Array basics and must-know array operations

Reading Time: 3 minutes 🕑

Last updated: October 7, 2021.

One comes across arrays very often when working in Javascript. For example, lists of users, blogs or news items may be stored in an array.

What is an array?

An array in simply a list of ordered values.

Values can be of the same type (e.g. all numerical, string or boolean values) or mixed. Strings can also contain more complex data than simple strings or numbers such as functions and Javascript objects (e.g. a list of blogs and their entire content).

Each value in an array known as an element. And the position of each element is know as its index.

Note that Javascript starts counting from 0. The the first element in an array has an index of 0 (not 1):

Array value“Mark”1985truefalse
Element index0123

Array syntax

We can create an array by calling the Array constructor. The following creates an empty array called users:

let users = new Array();

We can add element to an array at the moment of creation as follows:

let users = new Array('Ted', 'Bob', 'Jeff');

If we add a single number inside the parantheses of the constructor, we create an array of that many elment

let users = new Array(10); // Creates a new array of 10 elements

let usernames = new Array(1, 2, 3, 4, 5); // Creates a new array of 5 elements with values 1,2,3,4,5

But using the Array constructor is not the most common way to create new arrays.

In practice, it is much more common to use square brackets.

For example, we can create a new empty array as follows:

let users = [];

Or create an array of values:

let users = ['Ted', 'Bob', 'Jeff'] // An array of string values

let ages = [50, 24, 32] // Array of numerical values

let onMailingList = [true, false, false] // Array of numerical values

let userDetails = ['Ted', 50, true, 'Bob', 24, false, 'Jeff', 32, false] // Mixed array

Array operations

Because arrays are so common in Javascript, it is very important to be able to evaluate them and manipulate them to suit your needs.

To demonstrate some of the most important operations, we’ll use the following running example of news headline:

let newsHeadlines = ['flooding', 'Trump', 'weather']

Evaluating an array

Array.isArray()

To check whether an object is an array, we can apply the array.isArray() method. This returns a boolean value of true if the object is an array and false otherwise

let newsHeadlines = ['flooding', 'Trump', 'weather']

console.log(Array.isArray(newsHeadlines)) // true

.length

Applying the .length method to an array will return the number of elements in the array as a numerical value:

let newsHeadlines = ['flooding', 'Trump', 'weather']

console.log(newsHeadlines.length) // 3

Element value using []

Including the position of an element in square brackets after an array will return its value:

let newsHeadlines = ['flooding', 'Trump', 'weather']

console.log(newsHeadlines[1]) // "Trump"

Manipulating an array

Now, let’s get down to business. How do we add and remove elements from an array?

Here are the four must-know methods:

.push

We can add an element to the end of an array by applying the .push method:

let newsHeadlines = ['flooding', 'Trump', 'weather']

newsHeadlines.push('sport')

console.log(newsHeadlines) // ["flooding", "Trump", "weather", "sport"]

This method is very popular in, for example, adding a new user to a list of usernames or adding an item to a shopping basket.

.pop

To remove an element from the end of an array, we use the .pop method:

let newsHeadlines = ['flooding', 'Trump', 'weather']

newsHeadlines.pop()

console.log(newsHeadlines) // ["flooding", "Trump"]

.shift

We can also remove an element from the beginning of an array:

let newsHeadlines = ['flooding', 'Trump', 'weather']

newsHeadlines.shift()

console.log(newsHeadlines) // ["Trump", "weather"]

.unshift

And we can add an element to the beginning of an array using .unshift:

let newsHeadlines = ['flooding', 'Trump', 'weather']

newsHeadlines.unshift('major crisis')

console.log(newsHeadlines) // ["major crisis", "flooding", "Trump", "weather"]

This can also be used to add multiple elements:

let newsHeadlines = ['flooding', 'Trump', 'weather']

newsHeadlines.unshift('even more major crisis', 'major crisis')

console.log(newsHeadlines) // ["even more major crisis", "major crisis", "flooding", "Trump", "weather"]

Summary

Arrays are extremely common in Javascript so it is important to master the following:

Operation typeJS codeResult
Creating a new arraynew Array() Create a new array using the constructor method
[] Create a new array (more common)
Evaluating an array Array.isArray() Checks if object is array. Returns true or false.
.length Returns length of an array as numerical value
Manipulating an array .push Add an element to the end of an array
.pop Remove an element from the end of an array
.shift Remove an element from the beginning on an array
.unshift Add an element or elements to the beginning of an array