Javascript Snippets – Arrays, of… from? What?!

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.from, Array.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:

let ourArray = Array(3);
let ourBiggerArray = Array(1,2,3);
 
 
console.log(ourArray);
console.log(ourBiggerArray);
console.log(ourArray[0]);

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

Let’s view our array’s values:

ourArray = [null,null,null];

What about ourBiggerArray values:

ourBiggerArray = [1,2,3];

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

[undefined]

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/

let ourArray = Array.of(3);
let ourBiggerArray = Array.of(1,2,3);
console.log(ourArray[0]);

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

Let’s again view ourArray’s values:

ourArray = [3];

View ourBiggerArray values:

ourBiggerArray = [1,2,3];

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

[3]

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:

let ourArray = Array("3");
let ourBiggerArray = Array("1","2","3");

Results from above :

ourArray = "3";

ourBiggerArray = ["1","2","3"];

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

Let’s consider the code below:

let input = [1,2,3];
let ourArray = Array.of(input);
let ourBiggerArray = Array.from(input)

So what do you think ourArray’s values be?

ourArray = [[1,2,3]];

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

ourArray = [1,2,3];

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:

let input = [1,2,3];
let ourArray = Array.of(…input);
let ourBiggerArray = Array.from(input)

What do you get?

ourArray = [1,2,3];

ourBiggerArray = [1,2,3];

SAME!

Lastly…Ok I understand Array.of(…), and Array.from(…) but what’s the deal with New vs [] (array literal definition)

let ourArray = Array.of(3);
let ourOtherArray = [3];

ourArray = [3];

ourOtherArray = [3]