Arrays in ECMAScript6

Array before ECMAScript 5 weren't changed that much.
In ECMAScript 5, they added new methods to arrays to make them easier to use.
ECMAScript 6 continues this trend, making arrays very useful.

Before ECMAScript 6, there were two ways to create arrays:
The Array constructor and the array literal syntax.

However, the Array constructor was kind of confusing.
Most of the time, it acted normal; but if only one integer argument was given, it set the array's length to that value.

let arr = new Array(1, 2, 3);
console.log(arr); // 1,2,3

arr = new Array("1", "2", "3");
console.log(arr); // "1","2","3"

arr = new Array(3);
console.log(arr); // ",,"
console.log(arr.length); // 3

arr = new Array("3");
console.log(arr); // "3"
console.log(arr.length); // 1

Run code

And that's kind of confusing.
So, ECMAScript 6 introduced a new function: Array.of
It mostly acts the same as the Array constructor, but even when a single integer argument is given, it makes an array of that one element.

let arr = Array.of(1, 2, 3);
console.log(arr); // 1,2,3

arr = Array.of("1", "2", "3");
console.log(arr); // "1","2","3"

arr = Array.of(3);
console.log(arr); // 3
console.log(arr.length); // 1

arr = Array.of("3");
console.log(arr); // "3"
console.log(arr.length); // 1

Run code

Before ECMAScript 6, it was pretty annoying to convert array-like objects (such as arguments) and iterables to arrays.
ECMAScript 6 introduces a new function for this, too: Array.from (not to be confused with Array.of)

Run Code

There are more arguments.
The second one: A mapping argument.
It is a function, which will run on all the elements of the array-like element; and the return value of it will be used.
It is given three arguments, the current element, the index of the element, and the array itself.
The third argument specifies the this context of the function.

Run code

ECMAScript 6 introduces several new methods.
Let's take a look at them!

Array.protoytpe.fill
This method, you wouldn't believe it, fills the array's values with a given value.
It returns the modified array; yes, it's not a pure function.
It has three arguments:
The value to fill the array with
The starting point (default: 0)
The ending point (exclusive, default: array.length)

That means, if you only give one argument, the whole array will be filled with that value.
Let's look at some examples:

let arr = [1, 2, 3, 4, 5];
console.log(arr.fill(10)); // 10,10,10,10,10

console.log(arr.fill(20, 1, 4)); // 10,20,20,20,10

console.log(arr.fill(30, 2)); // 10,20,30,30,30

Run code

Array.prototype.find
This function accepts one parameter, a function; and just like with Array.of, the function acceps three arguments:
The element, the index of the element, and the array itself.
It returns the first element the function returns true to, or undefined

let arr = [1, 2, "yes", true, "kitten"];

console.log(arr.find(i => typeof i === "string")); // Returns first string, outputs "yes"

console.log(arr.find((n, i) => typeof n === "boolean" || i > 3)); // Returns the first boolean or the first element which has an index bigger than 3 (5th element), outputs "true"

console.log(arr.find(i => i > 3)); // Returns the first number bigger than three, outputs "undefined"

Run code

Array.prototype.findIndex
This function is literally the same as find, but rather than returning the value, it returns the index; or -1.

let arr = [1, 2, "yes", true, "kitten"];

console.log(arr.findIndex(i => typeof i === "string")); // Returns first string, outputs 2

console.log(arr.findIndex((n, i) => typeof n === "boolean" || i > 3)); // Returns the first boolean or the first element which has an index bigger than 3 (5th element), outputs 3

console.log(arr.findIndex(i => i > 3)); // Returns the first number bigger than three, outputs -1

Run code

Array.prototype.copyWithin
The copyWithin method is pretty confusing.
Its arguments are:
The index the copy should be pasted
The index the copy should start from (default 0)
The amount of copies (default array.length)
It returns the modified array.
I know it sounds confusing, but maybe some examples will clear it up.

let arr = [1, 2, 3, 4, 5];

console.log(arr.copyWithin(2)); // 1,2,3,4,5

console.log(arr.copyWithin(2, 1)); // 1,2,2,1,2

arr = [1, 2, 3, 4, 5];

console.log(arr.copyWithin(2, 0, 3)); // 1,2,1,2,3

Run code

entries, keys, values
These three functions are pretty similar; they are all generator functions.
entries: returns key-value pairs of the array (in arrays)
keys: returns the keys of the array
values: returns the values of the array; same as Symbol.iterator

let arr = ["kitten 1", "kitten 2", "kitten 3", "kitten 4", "kitten 5"];

for (const i of arr.entries())
console.log(i);

for (const i of arr.keys())
console.log(i);

for (const i of arr.values())
console.log(i);

Run code

ECMAScript 6 also introduced typed arrays, but there is no way I am explaining those in this code.

Thank you for reading!9

ES6 - Arrays are better now