Array creation

You know that JavaScript arrays are data structures that store elements of one or more types. This topic will teach you various ways to create arrays in JavaScript.

Creating an array

The easiest and most frequently used method to create an array uses literal notation. This method is similar to assigning a single value to a variable with the let or const keyword:

// literal notation
let arr = [element_1, element_2, element_3, element_n];

let arr1 = ['JetBrains', 'Hyperskill'];
let arr2 = [45, 34, 23];
let arr3 = ['JavaScript', 12]; 

As you can see above, square brackets [] surround the array of elements. Also, strings stored in an array must be enclosed with either single '' or double quotes "".

You can also use the new keyword with the Array() constructor to create Array objects. In this method, you can pass a single number argument to the Array() constructor to determine its length. Here, an array containing this number of empty slots will be created:

// Single argument
let arrayCreate = new Array(6);

console.log(arrayCreate.length) // 6
console.log(arrayCreate[0]) // undefined

If you pass multiple arguments to the Array() constructor, it creates an array containing the elements as shown below:

// Multiple arguments
let platforms = new Array('JetBrains', 'Hyperskill', 'WebStorm', 'PyCharm');

console.log(platforms.length); // 4
console.log(platforms[0]); // JetBrains

So, you can use literal notation or the Array() constructor to initialize and store elements in an array.

The following sections will look at some useful methods for creating or modifying arrays.

fill()

fill() returns a modified version of an array by changing the array's elements to a fixed value. This method takes up to three arguments:

fill(value, start, end)

• value: is the value used to fill the array.

• start: is the index where the filling should start. This parameter is optional, and its default value is 0.

• end: is the index where the filling should end, not including the end. This parameter is also optional; its default is the array's length.

You can see some examples in the following code:

const myNumbers = [1, 4, 7, 10, 15];

// fill with 0 from position 1 until position 3
console.log(myNumbers.fill(0, 1, 3)); // [1, 0, 0, 10, 15]

console.log(myNumbers.fill(13)); // [13, 13, 13, 13, 13]

// fill with 5 from position 2
console.log(myNumbers.fill(5, 2)); // [13, 13, 5, 5, 5]

Now, let's create an array using the new keyword and the fill() method:

let numberArray = new Array(6).fill(2); // [2, 2, 2, 2, 2, 2]

The above code will create an array with 6 slots and fill each one with the number 2.

from()

The Array.from() method creates a new Array instance from an array-like or iterable object (such as a Map). The syntax of the from() method is as follows:

Array.from(object, mapFunction, thisValue)

• object: is the object to convert to an array. This is a required field.

• mapFunction: is the map function to call on each element of the array. This is an optional field.

• thisValue: is a value to use as this when executing the mapFunction — also an optional field. (The this keyword will be discussed in a future topic.)

Let's look at some examples of creating an array using Array.from().

Using a string:

Array.from('Hello'); // ['H', 'e', 'l', 'l', 'o']

Using function arguments:

function createArray(...arguments) {
  return Array.from(arguments);
}

createArray(2, 4, 6); // [2, 4, 6]

Passing an arrow function to the mapFunction parameter:

Array.from([3, 5, 7], x => x * x); // [9, 25, 49]

of()

Array.of() was brought in with Javascript version ES6. It creates a new array instance that includes the given arguments, regardless of the type or number of inputs. The syntax of the of() method is Array.of(element_1, element_2, ..., element_n).

Here are some examples of creating an array using Array.of() :

Array.of(15); // [15]

Array.of(101, 202, 303); // [101, 202, 303]

Array.of(undefined); // [undefined]

The difference between Array.of() and the array constructor is in how they handle integer arguments: Array.of(10) creates an array with a single element, 10, while Array(10) creates an array with ten undefined values.

Conclusion

You learned how to create arrays using literal notation or the Array() constructor in this topic. You also learned about fill(), from(), and of() — these are helpful methods when creating or changing arrays.