Different Ways of Creating Arrays in JavaScript

Manipulating and working with Arrays is one of the key skill of a Web developer. This article will take you to the journey of creating arrays in JavaScript using different ways

Let’s start the Journey

Let’s look at what are the various ways to create Arrays in JavaScript.

The Most familiar and useful way of creating arrays is by using square bracket notation. 99% of the time everyone will be using this way of creating arrays which is shown below

Another way of creating arrays is by using Array constructor available in JavaScript. Array Constructor will take array elements as the parameter which is shown below

Here 1,2,”Javasript”,true,-2,5.3 are the Array elements

But if we provide only one Integer argument to the Array constructor then Array constructor will pick it as a length of the array and creates an empty array of specified size. In the below way of creating array new keyword is optional.

This behavior only occurs when we are providing only one Integer argument to the constructor. Other than integer if we provide any single value then that value will be considered as an array element

Here true is an Array element

Another way of creating array in JavaScript is by using of method available under Array Constructor. of method will take Array elements as the arguments and creates an array with provided Array elements

Here 1,1,Javascript,true,false,-9,9.5 are the Array elements

Unlike Array Constructor, If we provide only one Integer argument to of method then of method will not consider it as a length of the array instead it will create an array with single integer element.

of method will consider that 5 as an array element instead of length

Another way of creating arrays in JavaScript is by using from method available under Array Constructor. from method takes any Iterable or Array-like object as a argument and converts it to an Array

What is Array-like object and Iterable?

As name suggests, An Array like object is an object which have length property and supports index based access. On the other hand an iterable means an object on which we can iterate through using for loop or any supported ways.

Array, NodeList, HTMLCollections, Strings are the perfect examples for iterables but NodeList,HTMLCollections and strings will come under Array-like objects because they has length property and they support index based access but they do not support Array methods(Like push(),pop()….). This is the reason why they are called as Array-like objects. The key takeaway is all arrays are iterables but not all Iterables are arrays(Instead they are Array-like).

So as mentioned above, from method will take any Iterable as an argument and creates an array. We will see different examples of this method below

In this example, We will create an array using from method by providing Array elements as an argument to from method as shown below

Here we should provide array elements wrapped around square brackets

The next example is very interesting and this is where from method will be lot more useful. Consider a scenario where we need to convert and iterable(It may be NodeList, HTMLCollection or String) to an array so that we can manipulate them using available array methods.

For example, We have an Unordered List items and we need to convert all list items into an Array so that we can delete or add list items by using different Array methods.

HTMLColletion is a Array-like object

Now if we want to convert this HTMLCollection object into Array then we can use from method which is shown below

We can see that HTMLCollection object is converted to Array Object

In a short summary, In this article we discussed about different ways of creating arrays in JavaScript. One way is by using square brackets notation, second one is by using Array Constructor, third way is by using of method available under Array Constructor and final way is by using from method available under Array constructor

This is it for this Article and in next article I will be coming up with Different Array Methods Available in JavaScript.