Way #1: the array literal notation
// Empty array const a = ; // Array with 1 element const b = ; // Array with 3 elements const c = [1, 2, 3];
Way #2: the Array() constructor function
It is also possible to create an array by using the
Array() constructor function, with the
When invoked without any argument, this function creates an empty array. When invoked with a single integer argument, it creates an array of the specified length. When invoked with 2 or more arguments or with a single non-integer element, it creates an array containing each argument as an element. The following code creates arrays that you would expect:
// Empty array const d = new Array(); console.log(d); //  // Array with 3 elements const e = new Array(1, 2, 3); console.log(e); /// [1 , 2, 3]
But this function has a flaw. Its behaviour is "unexpected" when invoked with a single integer argument:
// Special empty arrays const f = new Array(5); console.log(f); // [ , , , , ]; const g = new Array(1); console.log(g); // [ ]
The length of the array
f is 5, but there are no elements.
The length of the array
g is 1, but there is no element.
Note that this behavior happens only if the single argument is an integer. Take a look at the following examples:
// Arrays with 1 element const h = new Array('a'); console.log(a); // ['a'] const i = new Array(true); console.log(i) // [true]
Way #3: the Array.of() factory function
The flaw of the
However, the method
Array.of() was specifically introduced in the ES6/ES2015 specification to address this problem.
Array.of() is a factory function that creates and returns a new array, using the values of its arguments as the array elements, regardless of how many of them they are.
Way #4: the Array.from() factory function
Array.from() factory function was also introduced in the ES6/ES2015 specification.
It expects an iterable or array-like object as its first argument and returns a new array that contains the elements of that object.
Array.from(iterable) works like the spread operator
[... iterable] does.
Here is an example with an iterable object other than an array, a string:
const j = 'Babar'; const k = Array.from(a); console.log(k); // ['B', 'a', 'b', 'a', 'r']
That usually means that they have indexed access and a length property, but none of the array methods.
Examples include the special variable
DOM node lists, and strings." (Dr. Axel Rauschmayer).
Array.from() also accepts an optional second argument.
If you pass a function as the second argument, then as the new array is being built,
each element from the source object will be passed to the function you specify,
and the return value of the function will be stored in the array instead of the original value.
In this case, the
Array.from() function behaves exactly like
const l = 'moon'; const m = Array.from(l, el => el.toUpperCase()); console.log(m); // ['M', 'O', 'O', 'N']
Practice and remember
You can now test your skills with bite-size exercices.