Array basics and must-know array operations
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” | 1985 | true | false |
Element index | 0 | 1 | 2 | 3 |
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 type | JS code | Result |
---|---|---|
Creating a new array | new 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 |