Arrays

Page section: posts

Arrays are variables with multiple values.

let birds = ["swans", "geese", "emus", "hoatzins", 250, true]

To access one item in an array use square brackets. Counting starts with a zero.

alert(birds[0]);

Array of arrays

Example of a shopping list:

let shoppingList = [["bananas", 6], ["apples", 4], ["carton of milk", 1]]

Array properties

The .length property can be used to get the number of items in an array.

Editing arrays

You can change the content of an array in a similar way to a variable but using square brackets to select a specific item in the array.

const fish = ['trout', 'salmon', 'stingray'];

fish[2] = ['herring'];

fish

// outputs Array(3) ['trout', 'salmon', 'herring']

Array methods

There are a lot of different methods used to edit arrays.

concat()

The concat method is used to join two or more arrays together.

includes()

The .includes method used with arrays will find out if an element is included in the array. It returns boolean.

myArray = ['one', 'two', 'three'];

myArray.includes('two');

// output: true

indexOf()

The indexOf method gets the position a value in an array.

const myArray = ['grivet', 'guereza', 'lutung'];

myArray.indexOf['grivet'];

// 0

currently returning undefined for some reason.

Join()

This allows you to join every element in an array together with some code in between.

myArray.join(', ');

Destructive methods

The following methods permanently alter the original array and so hence are called destructive.

Pop() and Push()

These remove and add a last item.

birds.pop();

And using push you can add something or multiple things:

birds.push("rheas", 10, true, "hair");

Shift() and unshift()

Like pop and push but they add or remove the first item in an array. Shift will get rid of it. Unshift can add something.

birds.shift();  // will remove the first item

And you can add things to the beginning:

birds.unshift("rheas", 10, true, "hair");

splice()

let letters = ["a", "b", "c", "d", "e", "f"];
letters.splice(2, 2, "x", "y", "z");

Leaves the content of letters = ["a", "b", "x", "y", "z", "e", "f"]

The first number refers to the number in the array (counting from zero). The second number is how many to take out.

In this case starting with [2] means “c”. Taking out 2 means “c” and “d”.

So splice removes certain items and add new items anywhere in the array.

So pop and push can remove the last item or add one. Then shift and unshift can remove or add a first item. And splice can take care of anything in the middle.

What does slice do then?

slice()

Slice is used to copy parts of an array to a new array.

let someLetters = letters.slice(1, 3);

The first figure is the first item to be taken, in this case 1 means the second item. The second digit is the item after the slice. So in the above example the second and third items will be sliced but not the fourth letters[3].

You can use slice to modify an array rather than copying to a new one like this:

let letters = letters.slice(1, 3);

sort()

You can use sort to change the order of array items to be alphabetical:

myArray = myArray.sort();
  1. JS Array cheatsheet at wweb.dev

A video reference of array methods, all time stamped so easily searchable, is portEXE’s video:

Table of Contents