Javascript How To Create An Array

Summary: in this tutorial, you'll learn about JavaScript arrays and their basic operations.

Introduction to JavaScript arrays

In JavaScript, an array is an ordered list of values. Each value is called an element specified by an index.

An JavaScript array has the following characteristics:

First, an array can hold values of different types. For example, you can have an array that stores the number and string, and boolean values.
Second, the length of an array is dynamically sized and auto-growing. In other words, you don't need to specify the array size upfront.

Creating JavaScript arrays

JavaScript provides you with two ways to create an array.The first one is to use the Array constructor as follows:

                                          let                scores =                new                Array();            
                          Code language:              JavaScript              (              javascript              )

The scores array is empty i.e. it holds no element.

If you know the number of elements that the array will hold, you can create an array with an initial size as shown in the following example:

                                          let                scores =                Array(10);            
                          Code language:              JavaScript              (              javascript              )

To create an array with some elements, you pass the elements as a comma-separated list into the Array() constructor.

For example, the following creates the scores array that has five elements (or numbers):

                                          let                scores =                new                Array(9,10,8,7,6);            
                          Code language:              JavaScript              (              javascript              )

It's important to notice that if you use the array constructor to create an array and pass into a number, you are creating an array with an initial size.

However, when you pass a value of another type like string into the Array() constructor, you create an array with an element of that value. For example:

                                          let                athletes =                new                Array(3);                // creates an array with initial size 3                let                scores =                new                Array(1,                2,                3);                // create an array with three numbers 1,2 3                let                signs =                new                Array('Red');                // creates an array with one element 'Red'                          
                          Code language:              JavaScript              (              javascript              )

JavaScript allows you to omit the new operator when you use the array constructor. For example, the following statement creates theartists array.

                                          let                artists =                Array();            
                          Code language:              JavaScript              (              javascript              )

In practice, you'll rarely use the Array() constructor to create an array.

The more preferred way to create an array is to use the array literal notation:

                                          let                arrayName = [element1, element2, element3, ...];            
                          Code language:              JavaScript              (              javascript              )

The array literal form uses the square brackets [] to wrap a comma-separated list of elements.

The following example creates the colors array that hold three strings:

                                          let                colors = ['red',                'green',                'blue'];            
                          Code language:              JavaScript              (              javascript              )

To create an empty array, you use square brackets without specifying any element like this:

                                          let                emptyArray = [];            
                          Code language:              JavaScript              (              javascript              )

Accessing JavaScript array elements

JavaScript arrays are zero-based indexed. In other words, the first element of an array starts at index 0, the second element starts at index 1, and so on.

To access an element in an array, you specify an index in the square brackets []:

arrayName [index]

Code language: CSS ( css )

The following shows how to access the elements of the mountains array:

                                          let                mountains = ['Everest',                'Fuji',                'Nanga Parbat'];                console.log(mountains[0]);                // 'Everest'                console.log(mountains[1]);                // 'Fuji'                console.log(mountains[2]);                // 'Nanga Parbat'                          
                          Code language:              JavaScript              (              javascript              )

To change the value of an element, you assign that value to the element like this:

                                          let                mountains = ['Everest',                'Fuji',                'Nanga Parbat']; mountains[2] =                'K2';                console.log(mountains);            
                          Code language:              JavaScript              (              javascript              )

Output:

[ 'Everest', 'Fuji', 'K2' ]

Code language: JSON / JSON with Comments ( json )

Getting the array size

Typically, the length property of an array returns the number of elements. The following example shows how to use the length property:

                                          let                mountains = ['Everest',                'Fuji',                'Nanga Parbat'];                console.log(mountains.length);                // 3                          
                          Code language:              JavaScript              (              javascript              )

Basic operations on arrays

The following explains some basic operations on arrays. And you'll learn advanced operations such as map(), filter(), and reduce() in the next tutorials.

1) Adding an element to the end of an array

To add an element to the end of an array, you use the push() method:

                                          let                seas = ['Black Sea',                'Caribbean Sea',                'North Sea',                'Baltic Sea']; seas.push('Red Sea');                console.log(seas);                          
                          Code language:              JavaScript              (              javascript              )

Output:

[ 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea', 'Red Sea' ]

Code language: JSON / JSON with Comments ( json )

2) Adding an element to the beginning of an array

To add an element to the beginning of an array, you use the unshift() method:

                                          let                seas = ['Black Sea',                'Caribbean Sea',                'North Sea',                'Baltic Sea']; seas.unshift('Red Sea');                console.log(seas);            
                          Code language:              JavaScript              (              javascript              )

Output:

[ 'Red Sea', 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea' ]

Code language: JSON / JSON with Comments ( json )

3) Removing an element from the end of an array

To remove an element from the end of an array, you use the pop() method:

                                          let                seas = ['Black Sea',                'Caribbean Sea',                'North Sea',                'Baltic Sea'];                const                lastElement = seas.pop();                console.log(lastElement);                          
                          Code language:              JavaScript              (              javascript              )

Output:

Baltic Sea

4) Removing an element from the beginning of an array

To remove an element from the beginning of an array, you use the shift() method:

                                          let                seas = ['Black Sea',                'Caribbean Sea',                'North Sea',                'Baltic Sea'];                const                firstElement = seas.shift();                console.log(firstElement);            
                          Code language:              JavaScript              (              javascript              )

Output:

Black Sea

5) Finding an index of an element in the array

To find the index of an element, you use the indexOf() method:

                                          let                seas = ['Black Sea',                'Caribbean Sea',                'North Sea',                'Baltic Sea'];                let                index = seas.indexOf('North Sea');                console.log(index);                // 2                          
                          Code language:              JavaScript              (              javascript              )

6) Check if an value is an array

To check if a value is an array, you use Array.isArray() method:

                                          console.log(Array.isArray(seas));                // true                          
                          Code language:              JavaScript              (              javascript              )

Summary

In JavaScript, an array is an order list of values. Each value is called an element specified by an index.
An array can hold values of mixed types.
JavaScript arrays are dynamic. They grow or shrink as needed.

Was this tutorial helpful ?