What s the difference between Array and while declaring a JavaScript array

Question

What s the real difference between declaring an array like this   var myArray   new Array      and  var myArray

User · Answer

There is an important difference that no answer has mentioned yet.

From this:

new Array(2).length           // 2
new Array(2)[0] === undefined // true
new Array(2)[1] === undefined // true

You might think the new Array(2) is equivalent to [undefined, undefined], but it's NOT!

Let's try with map():

[undefined, undefined].map(e => 1)  // [1, 1]
new Array(2).map(e => 1)            // "(2) [undefined × 2]" in Chrome

See? The semantics are totally different! So why is that?

According to ES6 Spec 22.1.1.2, the job of Array(len) is just creating a new array whose property length is set to the argument len and that's it, meaning there isn't any real element inside this newly created array.

Function map(), according to spec 22.1.3.15 would firstly check HasProperty then call the callback, but it turns out that:

new Array(2).hasOwnProperty(0) // false
[undefined, undefined].hasOwnProperty(0) // true

And that's why you can not expect any iterating functions working as usual on arrays created from new Array(len).

BTW, Safari and Firefox have a much better "printing" to this situation:

// Safari
new Array(2)             // [](2)
new Array(2).map(e => 1) // [](2) 
[undefined, undefined]   // [undefined, undefined] (2) 

// Firefox
new Array(2)             // Array [ <2 empty slots> ]
new Array(2).map(e => 1) // Array [ <2 empty slots> ]
[undefined, undefined]   // Array [ undefined, undefined ]

I have already submitted an issue to Chromium and ask them to fix this confusing printing: https://bugs.chromium.org/p/chromium/issues/detail?id=732021

UPDATE: It's already fixed. Chrome now printed as:

new Array(2)             // (2) [empty × 2]

User · Answer

There is a difference  but there is no difference in that example   Using the more verbose method  new Array   does have one extra option in the parameters  if you pass a number to the constructor  you will get an array of that length   x   new Array 5   alert x length      5   To illustrate the different ways to create an array   var a                     these are the same     b   new Array         a and b are arrays with length 0      c     foo    bar                 these are the same     d   new Array  foo    bar        c and d are arrays with 2 strings         these are different      e    3                 e length    1  e 0     3     f   new Array 3        f length    3  f 0     undefined      Another difference is that when using new Array   you re able to set the size of the array  which affects the stack size  This can be useful if you re getting stack overflows  Performance of Array push vs Array unshift  which is what happens when the size of the array exceeds the size of the stack  and it has to be re-created  So there can actually  depending on the use case  be a performance increase when using new Array   because you can prevent the overflow from happening   As pointed out in this answer  new Array 5  will not actually add five undefined items to the array  It simply adds space for five items  Be aware that using Array this way makes it difficult to rely on array length for calculations

User · Answer

The first one is the default object constructor call mostly used for dynamic values   var array   new Array length     initialize with default length   the second array is used when creating static values  var array    red  green  blue  yellow  white      this array will contain values

User · Answer

Using the Array constructor makes a new array of the desired length and populates each of the indices with undefined  the assigned an array to a variable one creates the indices that you give it info for

User · Answer

Well  var x   new Array   is different than var x      is different in some features I ll just explain the most useful two  in my opinion  of them   Before I get into expalining the differences  I will set a base first  when we use x      defines a new variable with data type of Array  and it inherits all the methods that belong to the array prototype  something pretty similar  but not exactly  to extending a class  However  when we use x   new Array   it initilizes a clone of the array prototype assigned to the variable x   Now let s see what are the difference  The First Difference is that using new Array x  where x is an integer  initilizes an array of x undefined values  for example new Array 16  will initialize an array with 16 items all of them are undefined  This is very useful when you asynchronously fill an array of a predefined length  For example  again      let s say you are getting the results of 100 competitiors  and you re receiving them asynchronously from a remote system or db  then you ll need to allocate them in the array according to the rank once you receive each result  In this very rare case you will do something like myArray result rank - 1    result name  so the rank 1 will be set to the index 0 and so on   The second difference is that using new Array   as you already know  instanciates a whole new clone of the array prototype and assigns it to your variable  that allows you to do some magic  not recommended btw   This magic is that you can overwrite a specific method of the legacy array methods  So  for example you can set the Array push method to push the new value to the beginning of the array instead of the end  and you can also add new methods  this is better  to this specific clone of the Array Prototype  That will allow you to define more complex types of arrays throughout your project with your own added methods and use it as a class   Last thing  if you re from the very few people  that I truly love  that care about processing overhead and memory consumption of your app  you d never tough new Array   without being desperate to use it      I hope that has explained enough about the beast new Array

User · Answer

I can explain in a more specific way starting with this example that s based on Fredrik s good one   var test1       test1 push  value    test1 push  value2     var test2   new Array    test2 push  value    test2 push  value2     alert test1   alert test2   alert test1    test2   alert test1 value    test2 value     I just added another value to the arrays  and made four alerts  The first and second are to give us the value stored in each array  to be sure about the values  They will return the same  Now try the third one  it returns false  that s because      JS treats test1 as a VARIABLE with a data type of array  and it treats test2 as an OBJECT with the functionality of an array  and   there are few slight differences here    The first difference is when we call test1 it calls a variable without thinking  it just returns the values that are stored in this variable disregarding its data type  But  when we call test2 it calls the Array   function and then it stores our  Pushed  values in its  Value  property  and the same happens when we alert test2  it returns the  Value  property of the array object   So when we check if test1 equals test2 of course they will never return true  one is a function and the other is a variable  with a type of array   even if they have the same value   To be sure about that  try the 4th alert  with the  value added to it  it will return true  In this case we tell JS  Disregarding the type of the container  whether was it function or variable  please compare the values that are stored in each container and tell us what you ve seen   that s exactly what happens   I hope I said the idea behind that clearly  and sorry for my bad English

User · Answer

For more information  the following page describes why you never need to use new Array       You never need to use new Object   in   JavaScript  Use the object literal      instead  Similarly  don   t use new Array      use the array literal      instead  Arrays in JavaScript work   nothing like the arrays in Java  and   use of the Java-like syntax will   confuse you       Do not use new Number  new String  or   new Boolean  These forms produce   unnecessary object wrappers  Just use   simple literals instead    Also check out the comments - the new Array length  form does not serve any useful purpose  at least in today s implementations of JavaScript

User · Answer

There s more to this than meets the eye  Most other answers are correct BUT ALSO    new Array n    Allows engine to reallocates space for n elements Optimized for array creation Created array is marked sparse which has the least performant array operations  that s because each index access has to check bounds  see if value exists and walk the prototype chain If array is marked as sparse  there s no way back  at least in V8   it ll always be slower during its lifetime  even if you fill it up with content  packed array  1ms or 2 hours later  doesn t matter    1  2  3          Created array is marked packed  unless you use delete or  1  3  syntax  Optimized for array operations  for     forEach  map  etc  Engine needs to reallocate space as the array grows      This probably isn t the case for older browser versions browsers

User · Answer

I ve incurred in a weird behaviour using       We have Model  classes  with fields initialised to some value  E g     require      dojo  base declare      dijit  WidgetBase      function declare  parser  ready   WidgetBase       declare  MyWidget     WidgetBase          field1           field2           function1  function         function2  function                    I found that when the fields are initialised with    then it would be shared by all Model objects  Making changes to one affects all others   This doesn t happen initialising them with new Array    Same for the initialisation of Objects     vs new Object     TBH I am not sure if its a problem with the framework we were using  Dojo

User · Answer

I ve found one difference between the two constructions that bit me pretty hard   Let s say I have   function MyClass      this property1       this property2 new Array       var MyObject1 new MyClass    var MyObject2 new MyClass      In real life  if I do this   MyObject1 property1 push  a    MyObject1 property2 push  b    MyObject2 property1 push  c    MyObject2 property2 push  d      What I end up with is this   MyObject1 property1   a   c   MyObject1 property2   b   MyObject2 property1   a   c   MyObject2 property2   d     I don t know what the language specification says is supposed to happen  but if I want my two objects to have unique property arrays in my objects  I have to use new Array

User · Answer

There is no big difference  they basically do  the same thing but doing them in different ways  but read on  look at this statement at W3C   var cars     Saab    Volvo   BMW      and  var cars   new Array  Saab    Volvo    BMW         The two examples above do exactly the same  There is no need to use   new Array    For simplicity  readability and execution speed  use the   first one  the array literal method     But at the same time  creating new array using new Array syntax considered as a bad practice      Avoid new Array        There is no need to use the JavaScript s built-in array constructor   new Array      Use    instead    These two different statements both create a new empty array named   points    var points   new Array               Bad var points                           Good       These two different statements both create a new array containing 6   numbers    var points   new Array 40  100  1  5  25  10      Bad     var points    40  100  1  5  25  10               Good      The new keyword only complicates the code  It can also produce some   unexpected results    var points   new Array 40  100       Creates an array with two elements  40 and 100       What if I remove one of the elements    var points   new Array 40            Creates an array with 40 undefined elements         So basically not considered as the best practice  also there is one minor difference there  you can pass length to new Array length  like this  which also not a recommended way

User · Answer

There is no difference when you initialise array without any length  So var a       amp  var b   new Array   is same    But if you initialise array with length like var b   new Array 1    it will set array object s length to 1  So its equivalent to  var b       b length 1     This will be problematic whenever you do array object push  it add item after last element  amp  increase length   var b   new Array 1   b push  hello world    console log b length      print 2   vs  var v       a push  hello world    console log b length      print 1

User · Answer

As I know the diference u can find the slice or the other funcitons of Array  like code1 and code2 show u Array and his instances   code1      slice     find slice here var arr   new Array    arr slice    find slice here Array prototype slice    find slice here   code2        proto      Array prototype     true var arr   new Array    arr   proto      Array prototype     true   conclusion   as u can see    and new Array   create a new instance of Array And they all get the prototype functions from Array prototype  They are just different instance of Array so this explain why

User · Answer

The difference between creating an array with the implicit array and the array constructor is subtle but important   When you create an array using  var a         You re telling the interpreter to create a new runtime array  No extra processing necessary at all  Done   If you use   var a   new Array      You re telling the interpreter  I want to call the constructor  Array  and generate an object  It then looks up through your execution context to find the constructor to call  and calls it  creating your array   You may think  Well  this doesn t matter at all  They re the same    Unfortunately you can t guarantee that   Take the following example   function Array         this is    SPARTA      var a   new Array    var b        alert a is         gt   SPARTA  alert b is         gt  undefined a push  Woa         gt  TypeError  a push is not a function b push  Woa         gt  1  OK    In the above example  the first call will alert  SPARTA  as you d expect  The second will not  You will end up seeing undefined  You ll also note that b contains all of the native Array object functions such as push  where the other does not   While you may expect this to happen  it just illustrates the fact that    is not the same as new Array     It s probably best to just use    if you know you just want an array  I also do not suggest going around and redefining Array

User · Answer

Oddly enough  new Array size  is almost 2x faster than    in Chrome  and about the same in FF and IE  measured by creating and filling an array   It only matters if you know the approximate size of the array  If you add more items than the length you ve given  the performance boost is lost   More accurately  Array  is a fast constant time operation that allocates no memory  wheras    is a linear time operation that sets type and value

User · Answer

In order to better understand    and new Array      gt           gt  new Array         gt             false  gt              false  gt  new Array      new Array     false  gt  new Array       new Array     false  gt  typeof         object   gt  typeof  new Array       object   gt         new Array     false  gt        new Array     false   The above result is from Google Chrome console on Windows 7

User · Answer

The difference of using  var arr   new Array size     Or  arr       arr length   size    As been discussed enough in this question    I would like to add the speed issue - the current fastest way  on google chrome is the second one   But pay attention  these things tend to change a lot with updates  Also the run time will differ between different browsers   For example - the 2nd option that i mentioned  runs at 2 million  ops second  on chrome  but if you d try it on mozilla dev  you d get a surprisingly higher rate of 23 million   Anyway  I d suggest you check it out  every once in a while  on different browsers  and machines   using site as such

User · Answer

The first one is the default object constructor call  You can use it s parameters if you want   var array   new Array 5     initialize with default length 5   The second one gives you the ability to create not empty array   var array    1  2  3      this array will contain numbers 1  2  3

[javascript] What’s the difference between "Array()" and "[]" while declaring a JavaScript array?

Examples related to javascript

Examples related to arrays

Examples related to declaration