Javascript ES6 — Array.from() and Array.of() # 10

In general, and if you’ve an array colors, you can access to each color respectively using a for of loop

const colors = ["red", "green", "blue"];

for (let color of colors) {
  console.log(color);
}

This colors is considered as an iterable object, and because I want to confuse a little bit, so if you don’t already know, an array is an object.

console.log(typeof colors)

Forget about that, when you use brackets you’re creating an array, in the opposite when you use curly braces you’re creating objects, this is simple.

Just remove this typeof and console log colors, you’ll find that there is a bunch of built-in methods that you can use in case of an array data type.

console.log(colors);

These kind of built-in methods aren’t the same for an object, let’s create an rgb object, that has three colors at each index, respectively, 0 has a value of red, 1 with the value of blue and 2 with the value of green.

const rgb = {
  0: "red",
  1: "blue",
  2: "green",
};

Now if you console log rgb, and you expand the _proto, you’ll see that you’ve different methods than the array methods, even if the type is considered the same.

console.log(rgb);

Because you’re smart, and you want this objects to looks like an array, you go further by adding a length of 3 which it’s is equivalent to how many elements you want to access to.

const rgb = {
  0: "red",
  1: "blue",
  2: "green",
  length: 3,
};

Now if you want to get the first element, and like an array, you console log rgb and access to the index 0 which it’s, in reality, a property, same for the second element, and the third element.

console.log(rgb[0]);
console.log(rgb[1]);
console.log(rgb[2]);

You can access to the length,

console.log(rgb.length);

You can access to the so called indexes 0, 1 and 2, your confidence increases that you convert any object to an array by using these hacks, and you try iterating over the rgb object using a for of loop.

for (let color of rgb) {
  console.log(color);
}

Nop, you cannot, the debugger is giving you an error, telling you that the variable rgb is not iterable.

Long story short, the rgb variable you just created is not considered an array, but an array-like, and the definition of an array-likeis, any object that have indexed access and a length property like arrays.

Okay, let’s comment out this for of loop, you’ll use it later.

// for (let color of rgb) {
//   console.log(color);
// }

And this is a real example of an array-like object, so you create 3 div’s on the html page, and you assign to a variable divs a querySelectorAll method to get all div’s on the document that matched a specified CSS selector message class.

const divs = document.querySelectorAll(".message");

And if you console log divs you’ll get a NodeList, which it’s an object that have 3 indexed accesses and a length property.

console.log(divs);

Same here you don’t have the same built-in methods as an array.

So you understand now the difference between an array and an array-like, and you know the limits of these considered array-like, however, what we really want is, how to convert these array-like to use the same built-in methods as an array like this concat, filter, shift, and to be also iterable in some cases.

Array.from()

To achieve that you use Array.from, which it’s a method that return an array object from any object with a length property, like these two objects rgb and divs or any iterable objects Strings, Arrays, and ES6 Map and Set, forget about these last ones, you’ll discover them later on a future video.

Let’s assign the result of an Array.from to a variable rgbToArray, and the array-like you want to convert to an array is rgb.

const rgbToArray = Array.from(rgb);

console log rgbToArray, and now you see a different presentation, and if you expand _proto you see a list built-in method used for arrays, like slice.

console.log(rgbToArray)

let’s use it to remove the first element at the index 0.

console.log(rgbToArray.slice(1))

Uncomment the for of loop, and the iteration also works.

for (let color of rgbToArray) {
  console.log(color);
}

Same for the divs NodeList, go fo a variable divsToArray and use Array.from to change it to an array object,

const divsToArray = Array.from(divs);

console log divsToArray,
console.log(divsToArray);

and if you expand _proto you’ll see the list of the array methods again, okay, pickup concat and concat a new value yellow, now you see a list with 4 elements, AWESOME.

console.log(divsToArray.concat("yellow"));

Remember, that you can also use Array.from for iterable values, as an example a string, so go for a firstName John, and use Array.from to convert the string to array, where each character will be stored on its specific index respectively.

const firstName = "John";

console.log(Array.from(firstName));

Now you’ve got an array of 4 indexes

Array.of

Let’s move to Array.of, which it’s used to create a new Array instance with a variable number of arguments, so, go for Array.of and set 3 elements, a number 10, a message Hello, and another number 54.

console.log(Array.of(10, "Hello", 54));

Now you’ve got an array of 3 elements, you’ll think that this method is similar to the Array constructor, but, it’s not.
For example if you set the number 10 to the Array constructor, it’ll create an array of 10 empty elements, and unlike the Array.of(10) it’ll create an array of one element with the value 10.

console.log(Array.of(10));
console.log(Array(10));

Leave a Reply

Your email address will not be published. Required fields are marked *