Learning JavaScript: Arrays

Next I’m going to look at arrays, which are composite data types. I’m going to look at how they work and how to add, replace or extract data from them, as well as nested arrays.

Please note: This article is subject to constantly change as and when I learn more!

What is an array?

An array is a way to store multiple pieces of data (unlike a variable, which can only store one) for later use. They can store data of different types (strings, numbers, etc.) at the same time. This is what one looks like:

// Create the array
var arrayName = [item1, item2, item3, item4];

The array is declared as a variable and within square brackets [ ], data items can be placed separated by commas ,. All of these items will be contained within the array.

This example has an array called variousThings which contains a mixture of strings and numbers. When the array value is printed, it will spit out all the items in the array.

// Create the array
var variousThings = ["giraffe", "vacuum cleaner", 78, "envelope"];

// Print the array
console.log(variousThings);

[ "giraffe", "vacuum cleaner", 78, "envelope" ]

Data indexing

Each item in an array is numbered, with the first item having an index of zero (not 1, as you’d expect). This is called zero-based-indexing.

// Create the array
var pets = ["cat", "dog", "rabbit", "hamster", "gerbil", "goldfish"];

This array has six items, and the index numbers for each item are as follows:

0. cat
1. dog
2. rabbit
3. hamster
4. gerbil
5. goldfish

So therefore, the index only goes up to 5 even though there are 6 items in the array.

Pulling an item out of an array

Using the index markers, any item can be pulled out of an array and displayed. Say I want to pull out the 4th item from my pets array (hamster); I would state the array name followed by the index number (3, in this case) I want to access within square brackets [ ], as follows:

// Print the 4th item in the array
console.log(pets[3]);

hamster

Adding and removing items

Arrays can be edited after they have been initially created. Array items can be added, removed or replaced.

Adding items

In my example below, I have an array called fruits, which contains five fruit names as strings ("banana", "apple", "cherry", "blueberry" and "nectarine"). To put an additional item onto the end of the array, I would use this piece of code to do so: arrayName.push("newItem");

In the code example:

1. The fruits array is first created, then printed;
2. I want to add "strawberry", so the piece of code fruits.push("strawberry"); is used to push this new item onto the array;
3. The array is printed again, so the new item can be now seen as part of it, added as the last item.

// Create the array
var fruits = ["banana","apple","cherry","blueberry","nectarine"];

//Print the array
console.log(fruits);

// Add a new item to the array
fruits.push("strawberry");

// Print the array
console.log(fruits);

["banana", "apple", "cherry", "blueberry", "nectarine"]
["banana", "apple", "cherry", "blueberry", "nectarine", "strawberry"]

Removing items

I have my fruits array again, containing the five fruit names as strings. If I want to remove the last item in the array, I would use this piece of code to do so: arrayName.pop();

In the code example:

1. The fruits array is first created, then printed;
2. fruits.pop(); is used to remove the last item from the array;
3. The array is printed again, so it can be seen that "nectarine" has been removed.

// Create the array
var fruits = ["banana","apple","cherry","blueberry","nectarine"];

//Print the array
console.log(fruits);

// Take an item off the array
fruits.pop();

// Print the array
console.log(fruits);

["banana", "apple", "cherry", "blueberry", "nectarine"]
["banana", "apple", "cherry", "blueberry"]

Replacing an item

Again using my fruits array, I want to replace the string "cherry" with the new string "raspberry".

To do this, I need to find the index position of "cherry", which is 2 (remember zero-based indexing). This piece of code arrayName[indexNo] = newItem; is used to replace whatever is currently in that index position with something else.

In my example below:

1. The fruits array is created and printed;
2. I want to replace the string "cherry" with the new string "raspberry", so I use this piece of code to achieve this: fruits[2] = "raspberry";;
3. The array is printed again so the change can be seen.

// Create the array
var fruits = ["banana","apple","cherry","blueberry","nectarine"];

//Print the array
console.log(fruits);

// Replace item placed at index 2
fruits[2] = "raspberry";

// Print the array
console.log(fruits);

["banana", "apple", "cherry", "blueberry", "nectarine"]
["banana", "apple", "raspberry", "blueberry", "nectarine"]