15: Arrays

Arrays are helping you when you have to deal with many similar objects.

For example, let’s imagine you have a list with your favorite animals. You could write it like this:

let animal1 = "🐹";
let animal2 = "🐶";
let animal3 = "🐰";
let animal4 = "🐱";
let animal5 = "🐵";
let animal6 = "🦁";

But what if you want to add the 🐻 on the 3rd position? You would have to rename all variables from animal3 to animal6. That would be a lot of work and it feels really unflexible. Instead you can use an array, it is a list of sorted elements. Your code would look like this:

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];

Much better and more clear. But how do we get the element on the 3rd place, the 🐰?

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
console.log(animals[2]);

You can see that you can just write the variable name, in our case animals (notice we are using the plural form here), and add the square brackets ([]) right after it. Inside the square brackets is the number 2. But why 2 and not 3?

Awkward Blonde GIFfrom Awkward GIFs

It is not a mistake, but in programming we usually start counting from 0. That means, index 0 is the 1st item, index 1 is the 2nd item and so on… It seems a bit confusing at first, but you will get used to it quite fast, and it makes calculations much easier for us.

As mentioned, the number to access an element in an array is called and index. Every element in an array has its own index. Here you can see an example which index is connected to which element in our animals array.

Index:	0	1	2	3	4	5
[	“🐹”,	“🐶”,	“🐰”,	“🐱”,	“🐵”,	“🦁”	]

A small hint: If you can, you should only use the same types (strings, numbers, bools, …) in your arrays. Don’t mix them up. It will make your code more complicated and more prone to errors.

You can do a lot more with arrays and we will look through some of the most useful methods.

Length of array

You can get the length of your current array like this:

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
console.log(animals.length);

In this case you will see the number 6 being output in your console.

Finding the index of an element

If you want to find the index of a specific element inside your array, you can do it like this:

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
console.log(animals.indexOf("🐰"));

In this case you would get the index of the 🐰 in the animals array. So you would see 2 in your console. If you would try to look up something that is not in your array, this method would return -1.

The best way is to try it out yourself. Try to find the index of the 🐵 and if that did work, try to find the 🐝.

Turn the array into a string

If you want to put all animals in your array into a single string, you can use this method:

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
console.log(animals.join(" "));

All elements will be joined together in a single string. The parameter that you can use will be put in between the elements. In this case we use an empty space ` `. But if we want to place our animals in a forest, we can use a tree for example:

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
console.log(animals.join("🌲"));

Adding elements at the end of an array

To add an element at the end of an array you can use the push() command.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals.push("🐻");
console.log(animals);

Now you can see that the 🐻 is added at the end of your animals array. As you see, to add something at the end, you just have to use it as a parameter.

Removing elements from the end of an array

If you want to remove the 🦁 at the end of your animals array, you can use the pop() command.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals.pop();
console.log(animals);

This command returns the element that is removed, if you would save it into a variable and print it to your console, you could see what was removed.

Adding elements at the beginning of an array

To add an element at the beginning of an array you can use the unshift() command.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals.unshift("🐻");
console.log(animals);

Now you can see that the 🐻 is added at the beginning of your animals array. As you see, to add something at the beginning, you just have to use it as a parameter.

Removing elements at the beginning of an array

If you want to remove the 🐹 at the beginning of your animals array, you can use the shift() command.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals.shift();
console.log(animals);

This command returns the element that is removed, if you would save it into a variable and print it to your console, you could see what was removed.

Removing or adding elements inside the array

To add or remove elements in the middle of the array you can use the function splice(). The first parameter is the index where you want to execute the command, next the number of elements you want to remove. If you just want to add elements you use 0. Last, you can give a list of elements that you want to add, divided by commas ,. If you only want to delete elements, you can leave that empty.

Here you can see an example of adding the 🐻 at the 3rd position. Remember that we start to count at 0.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals.splice(2, 0, "🐻");
console.log(animals);

Here is another example where we delete the 🐰 at the 3rd position.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals.splice(2, 1);
console.log(animals);

And here is another example where we delete the 🐰 and add the 🐻 instead at the same time.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals.splice(2, 1, "🐻");
console.log(animals);

Replace elements inside an array

If you just want to replace an element in an array, you can use the index notation instead.

This example does the same, as the last example with the splice command, it will also replace the 🐰 with the 🐻.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals[2] = "🐻";
console.log(animals);

As you can see, you can use the same notation that we used to access a value in an array to also overwrite it.