25

I want to create an array in javascript and remember two ways of doing it so I just want to know what the fundamental differences are and if there is a performance difference in these two "styles"

var array_1 = new Array("fee","fie","foo","fum");
var array_2 = ['a','b','c'];

for (let i=0; i<array_1.length; i++){
  console.log(array_1[i])
}

for (let i=0; i<array_2.length; i++){
  console.log(array_2[i])
}
João Pimentel Ferreira
  • 9,166
  • 6
  • 52
  • 67
mcgrailm
  • 16,637
  • 21
  • 80
  • 128

5 Answers5

45

They do the same thing. Advantages to the [] notation are:

  • It's shorter.
  • If someone does something silly like redefine the Array symbol, it still works.
  • There's no ambiguity when you only define a single entry, whereas when you write new Array(3), if you're used to seeing entries listed in the constructor, you could easily misread that to mean [3], when in fact it creates a new array with a length of 3 and no entries.
  • It may be a tiny little bit faster (depending on JavaScript implementation), because when you say new Array, the interpreter has to go look up the Array symbol, which means traversing all entries in the scope chain until it gets to the global object and finds it, whereas with [] it doesn't need to do that. The odds of that having any tangible real-world impact in normal use cases are low. Still, though...

So there are several good reasons to use [].

Advantages to new Array:

  • You can set the initial length of the array, e.g., var a = new Array(3);

I haven't had any reason to do that in several years (not since learning that arrays aren't really arrays and there's no point trying to pre-allocate them). And if you really want to, you can always do this:

var a = [];
a.length = 3;
T.J. Crowder
  • 879,024
  • 165
  • 1,615
  • 1,639
  • 1
    +1, literal syntax *is* generally faster [in most browsers](http://jsperf.com/ArrayLit/2). The difference is significant for me in Chrome. – Andy E May 18 '11 at 16:03
  • 5
    `new Array(3)` isn't exactly the same as `[undefined, undefined, undefined]`. In the latter case, the array has properties "0", "1" and "2", whereas in the former, the array does not have these properties. This is illustrated by the fact that `("0" in [undefined, undefined, undefined])` returns `true` while `("0" in new Array(3))` returns `false`. – Tim Down May 18 '11 at 16:05
  • @Tim: Well look at that. Fair 'nuff, I'll fix it. – T.J. Crowder May 18 '11 at 16:07
  • @Andy E: Thanks, I've upgraded the performance aspect. But real world differences in normal use cases are unlikely to be perceptible. Still, in the absense of a really good reason to use the other... :-) – T.J. Crowder May 18 '11 at 16:12
  • @TJC: agree on that. Firefox seemed to favour using the constructor function anyway, in terms of performance. @downvoter: it's poor form to down vote without posting corrections or starting a constructive discussion on the matter. – Andy E May 18 '11 at 16:19
  • @Andy E: *"Firefox seemed to favour using the constructor function anyway, in terms of performance"* Interesting, not in my test of Firefox 3.6.17 on Ubuntu, there the `Array` constructor was 16% slower. But it's all going to depend on interpreter implementation (optimization) and also where you call it (number of links in the scope chain). :-) – T.J. Crowder May 18 '11 at 17:17
  • Does @downvoter have special behaviour that puts this question in the downvoter's inbox? – Tim Down May 19 '11 at 10:08
  • 1
    @Tim: No, but you can vote for that (or against): http://meta.stackexchange.com/questions/37090/feature-request-downvoter-sends-a-notification-to-all-downvoters-for-your-post – T.J. Crowder May 19 '11 at 10:17
4

There's no difference in your usage.

The only real usage difference is passing an integer parameter to new Array() which will set an initial array length (which you can't do with the [] array-literal notation). But they create identical objects either way in your use case.

davin
  • 41,227
  • 7
  • 73
  • 77
3

This benchmark on JSPerf shows the array literal form to be generally faster than the constructor on some browsers (and not slower on any).

This behavior is, of course, totally implementation dependent, so you'll need to run your own test on your own target platforms.

maerics
  • 133,300
  • 39
  • 246
  • 273
  • +1. Those differences wouldn't be so surprising (most are by a small factor), if not for the chrome results of twice the speed. That's very interesting. – davin May 18 '11 at 16:03
  • +1 I like the link to benchmark tool interestingly FF4 on mac [] is slower – mcgrailm May 18 '11 at 16:20
  • @davin: Chrome *does* have the fastest JS engine, so that is probably part of the reason. – Andy E May 18 '11 at 16:20
0

I believe the performance benefits are negligible.

See http://jsperf.com/new-array-vs-literal-array/4

troynt
  • 1,860
  • 15
  • 21
0

I think both ways are the same in terms of performance since they both create an "Array object" eventually. So once you start accessing the array the mechanism will be the same. I not too sure about how different the mechanisms to construct the arrays be (in terms of performance) though it shouldn't be any noticeable gains using one way to the other.

Urjit
  • 1,020
  • 8
  • 13