If you’ve played around with javascript a bit you’ve might have seen developers using Array.from(…)[], or new Array(…), or even Array.of(…) but why?! What’s the difference!?  Why the heck does Javascript have an Array.fromArray.of and Array or even []? The answer lies in the Javascript’s constructors for Arrays and arguments we may pass to create arrays.

Let’s see why that is by looking at how the constructors perform and passing in some code. We’ll also reveal a bug you can avoid in your own Javascript code.

 

Start here – Let’s make some arrays: 

For our tests we will create two sets of arrays and evaluate the results – can you guess what the answer will be?

Example 1 – Array(…)

MDN’s Spec – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Creating a simple array and then logging the results:

 

 


So what are the values of the array above? Can you guess?

Let’s view our array’s values:

 

What about ourBiggerArray values:

 

What if we access an index directly (ourArray[0]):

Weird right? What’s going wrong? Now let’s try the same code with Array.of(…).

 

Example 2 – Array.of(…)

MDN’s Spec – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of/

 

 

Looks almost the same, but let’s look again – can you guess what we get?

Let’s again view ourArray’s values:

 

View ourBiggerArray values:

 

What if we access an index directly (ourArray[0])?

Now that looks right!

But why?! It’s because the Array constructor when passed an argument with a sole integer instead of making an array with that number it creates an array of that LENGTH!

Check it out (taken from the MDN):

The difference between Array.of() and the Array constructor is in the handling of integer arguments: Array.of(7) creates an array with a single element, 7, whereas Array(7) creates an empty array with a length property of 7 (Note: this implies an array of 7 empty slots, not slots with actual undefined values).

Take comfort in knowing that this does not affect strings though:

 

Results from above :



Example 3 – Now that we understand Array.of(…) what’s Array.from(…)

Let’s consider the code below:

 

So what do you think ourArray’s values be?

 

For better or worse that’s a nested array.. lets see what ourBiggerArray’s values are:

 

Ah! Better! Why is that?! Let’s take a look at the MDN about Array.from(…).

The Array.from(…) method creates a new, shallow-copied Array instance from an array-like or iterable object.

It means basically you can pass in an array or iterable and it will destructure and insert into an array.

This might save you a little time vs es6 destructuring, consider:

 

What do you get?


SAME!

 

LastlyOk I understand Array.of(), and Array.from() but whats the deal with New vs [] (array literal definition)


 

And our results are: 



SAME!

 

Taken with a grain of salt, they function the same. As a matter of fact there is one subtle difference, Array.of(…) is better suited for subclassing.

Not to get too technical – but for those interested please check out the technical notes on the ECMA spec (https://tc39.github.io/ecma262/#sec-array.of).

Bottomline, TLDR; regarding Arrays!

  • Avoid Array(…) use [] OR Array.of(…)
  • Passing a single integer to Array() does not fill the array with the argument, it instead creates an array with that length!
  • Array.from(…) will create an array by iterating over a passed in object/array

Leave a Reply