💥ES6 ARRAYS 101 #1💥

CREATE AN ARRAY IN ES5

In the ES5 specification, we mainly had two ways to create arrays: array literal syntax and the Array constructor. Both ways only required listing the array elements one by one, which seems to be an easy task. But if we wanted to do something more like converting an array-like object (eg arguments in a function) to an array, we had some limitations and a lot of code to write.

CREATE AN ARRAY IN ES6

To understand the problem of creating arrays with the Array constructor, it's worth seeing its unpredictability in action:

let myArray = new Array(3);
console.log(myArray.length); //3
console.log(myArray[0]);     //undefined
console.log(myArray[1]);     //undefined
console.log(myArray[2]);     //undefined

myArray = new Array("3")
console.log(myArray.length); //1
console.log(myArray[0]);     //3
console.log(myArray[1]);     //undefined
console.log(myArray[2]);     //undefined

myArray = new Array(1,2,"3")
console.log(myArray.length); //3
console.log(myArray[0]);     //1
console.log(myArray[1]);     //2
console.log(myArray[2]);     //3

When we passed a number in the form of Number to the constructor, it was assigned to the length property of the array, and whenever we changed the number to a String, it becomes the first element in the array. When we pass multiple values, they automatically become elements of the array. This behavior can confuse someone and cause many bugs, hence ES6 has a new option to create an array. In the form of the Array.of() method:

let myArray = Array.of(3);
console.log(myArray.length); //1
console.log(myArray[0]);     //3


myArray = Array.of(1, 2, "3")
console.log(myArray.length); //3
console.log(myArray[0]);     //1
console.log(myArray[1]);     //2
console.log(myArray[2]);     //3

myArray = Array.of("3")
console.log(myArray.length); //1
console.log(myArray[0]);     //3

To create an array, pass its values to Array.of().

In most cases you don't need to use Array.of(), you just need to use plain array literal ([]), however when you need to pass the array constructor in a function, you'd better use Array.of():

function arrayCreator(creator, value) {
    return creator(value)
}

let myArray = arrayCreator(Array.of, 69)
console.log(myArray) // [ 69 ]

Now let's move on to the problem I mentioned at the beginning, converting a non-array object to an array. This is what it looked like in ES5:

function createArrayFrom(iWantToBeArray) {
    var array = [];

    for(var i=0; i<iWantToBeArray.length; i++) {
        array.push(iWantToBeArray[i])
    }
    return array;
} 

There is another way, to use the slice() method. You only need to define the this value for the slice method that acts on an array-like object. A little less code, but still not the best solution:

function createArrayFrom(iWantToBeArray) {
    return Array.prototype.slice.call(iWantToBeArray)
}

This moves to a new method in ES6 - Array.from(). When we give it, as the first argument, an element to be enumerated, or an array-like object, it will return an array:

function createArrayFrom(iWantToBeArray) {
    return Array.from(iWantToBeArray)
}

But it is not everything. If you want, you can add a mapping function as a second argument, with which you can change the values obtained during the conversion:

function addOne() {
    return Array.from(arguments, x=>x+1)
}
let myArray = addOne(1,2,3)
console.log(myArray) // [ 2, 3, 4 ]

Finally, you can use the Array.from() method on the iterating elements (any element containing Symbol.iterator):

let sayHello = {
    *[Symbol.iterator]() {
        yield "Hello";
        yield "World";
        yield "!"
    }
}

let LOUD_HELLO = Array.from(sayHello, x => x.toLocaleUpperCase())
console.log(LOUD_HELLO) // [ 'HELLO', 'WORLD', '!' ]

End of Part One.

💥Thanks for reading!💥