Arrays

Go back to JavaScript Index

What is an array?

An array is a speciel type of variable that can store more than one value - in other words: a kind of list. The values of an array may be of any data type - and they may also include multiple data types.

Syntax

let arrayName = ["value1", "value2", "value3"];
1.0 | Array syntax

If the array stores a lot of values, you may want to use multiple lines to maintain an overview:

let arrayName = [
"value1",
"value2",
"value3"
];
1.1 | Array syntax

Example

let shoppingList = ["milk", "carrots", "bananas"];
1.2 | An example of an array

Accessing the values inside the array

We may access the values of an array, the same way we would any other variable - by using the name:

console.log(shoppingList);
1.3 | Accessing an array

Notice, however, that the values are printet in a row and without spaces or commas separating them.

Accessing one value in an array

If we want to access a specific element or value in the array, we can refer to its index number. The array index starts at 0:

console.log(shoppingList[0]);
1.4 | Accessing the first value in an array

In our array example there are 3 values - the first one, as shown, has the index number 0, the second index number 1 and the third and last have the index number 2:

console.log(shoppingList[2]);
1.5 | Accessing the last value in an array with 3 values

If we have to guess the index number ourselves in our programs, though, we might get into trouble as we can add and remove elements in the array as a part of our program.

But - based on the example we can see that the index number of the last value is equal to the length (meaning the number of values) of the array minus 1. This we might write down this way:

console.log(shoppingList[shoppingList.length - 1]);
1.6 | Accessing the last element in an array

The property length returns the number of values in the array which in our case is 3. If we subtract 1 from 3, we get 2.

Updating values in an array

It is possible to change the values in an array by accessing it using the index number and then assigning it a new value:

console.log(shoppingList[2]);
shoppingList[2] = "apples";
console.log(shoppingList[2]);
1.7 | Changing a value in an array

Adding a new value to an array

We can also add a new value to our list by using the .push() method:

shoppingList.push("Orange");
1.8 | Adding a new value to our array

Removing values from an array

If we want to remove the last element of an array, we may use the .pop() method:

shoppingList.pop();
1.9 | Removing the last value of an array

If we, however, want to remove an element that is not the last one, we need to use the .splice() method:

shoppingList.splice(0, 1);
2.0 | Removing a value from the array

In the example above we remove the first element from our array. How?

The first parameter is the index number that we start removing from - in this case, we start at the very beginning of the array, meaning index number 0.

The second parameter is how many we are to remove from there - in this case just 1.

Replacing a value with another value

We can replace the first value in the array with another value by using the .shift() and .unshift() methods:

console.log(shoppingList)
shoppingList.shift();
console.log(shoppingList)
shoppingList.unshift("strawberries");
console.log(shoppingList)
1.2 | Changing a value in an array