💥ES6 ARRAYS 101 #1💥
Tags: programming, javascript, webdev
Published: 2021-05-06 10:42:51

# 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:
```js
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:
```js
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()`:

```js
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:

```js
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:
```js
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:
```js
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:
```js
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`):
```js
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!💥