JavaScript Arrays

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:

A JavaScript array has the following characteristics:

1. First, an array can hold values of mixed types. For example, you can have an array that stores elements with the types number, string, boolean, and null.
2. Second, the size of an array is dynamic and auto-growing. In other words, you don’t need to specify the array size up front.

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, which does hold any elements.

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 and initialize it 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)

Note that if you use the Array() constructor to create an array and pass a number into it, 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 using the Array() constructor. For example, the following statement creates the artists 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 holds string elements:

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); // 3Code language: JavaScript (javascript)

Basic operations on arrays

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

1) Appending an element to 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); // 2Code language: JavaScript (javascript)

6) Check if a value is an array

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

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

Quiz

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, which means that they grow or shrink as needed.