Arrays

Arrays, as mentioned before are any ordered set of values separated by commas and enclosed in square brackets ([]).

let arr = [1, 2, 3, 4];
let emptyArr = [];
let nestedArrs = [[1, 2, 3], [4, 5], [6]];
let jumbledArr = [2, true, false, "2.43", [4, ["hello"], []]];

When creating an array, it is possible to split it into multiple lines. Type the opening square bracket and hit enter; your cursor will go to the next line. Then, enter a value, put a comma, and hit ctrl + enter (or cmd + return on mac). The console will go to the next line. Keep doing this until you have entered all the values needed, then navigate to the closing square bracket and hit enter to execute the line.

As with strings, you can access a particular element in an array using square bracket indexes:

let arr = [1, 2, 3, 4];
arr[0]; // 1
arr[2]; // 3

These indexes can be chained to access particular elements in nested arrays:

let nestedArr = [
    [1, 2, 3, 4],
    [5, 6, 7],
    [8, 9]
]
nestedArr[0]; // [1, 2, 3, 4]
nestedArr[0][1]; // 2
nestedArr[2][1]; // 9

You can also reassign values in an array in this way:

let nums = [1, 2, 3, 4];
nums[2] = 10;
nums; // [1, 2, 10, 4]

The length of an array is accessible through its length property:

arr.length; // 4
nestedArr.length; // 3
nestedArr[2].length; // 2

Adding values to an array

To add values to the end of an array, there are 2 ways. The first way is to assign values using indexing.

let arr = []; // empty array
arr[0] = 1
arr; // [1]
arr[1] = 2;
arr; // [1, 2]

In general, arr[arr.length] = x will add x to the end of the array.

It is possible to use the wrong index an accidentally reassign a value. It is also possible to pass in an index beyond the length of an array. In this case, JavaScript will create "gaps" in the array filled with the value undefined:

let arr = [1, 2, 3];
arr[4] = 4;
arr; // [1, 2, 3, undefined, 4]

The second way to add arrays prevents any chance of using the wrong index, and involves the push method.

let arr = [1, 2, 3];
let l = arr.push(4);
arr; // [1, 2, 3, 4]
l; // 4

The method takes in one argument and pushes it to the back of the array. It also returns the new length of the array after insertion. push is a variadic function, so you can push multiple values at once:

let arr = [];
let l = arr.push(1, 2, 3, 4, 5, 6);
arr; // [1, 2, 3, 4, 5, 6]
l; // 6

There is no easy way to insert elements into a specific position in the array. One way is to copy over the elements into a new array, making sure to insert the new value you want to at the right index, and then use the new array. Another way is to use the splice method, as detailed in this StackOverflow post.

Removing values from an array

The best way to remove elements from an array is to use the pop method. It is a nullary function that removes the last element in the array and returns the element it removed.

let nums = [1, 2, 3, 4];
let x = nums.pop();
nums; // [1, 2, 3]
x; // 4

Again, it is not easy to remove a specific element; the splice and indexOf methods will be needed.

Searching for an element

To check if an element exists in an array, the indexOf method is useful. It returns -1 if the element is not present, otherwise it returns the index of the element.

let arr = [1, 2, 3, 4];
arr.indexOf(3); // 2
arr.indexOf(23); // -1

indexOf will not work when passing in another array as an argument:

let arr = [[1, 2, 3], [4, 5, 6]]; // 2D nested array
arr.indexOf([1, 2, 3]); // returns -1 even though [1, 2, 3] is an element

This is because indexOf uses the === operator, which returns false for two arrays even if they have the same elements unless they refer to the same object:

let arr1 = [1, 2, 3];
let arr2 = [arr1, [4, 5, 6]];
arr2.indexOf(arr1); // returns 0 now

Array sliceing

To get a particular portion of an array, you can use the slice method. It takes in a start and end and returns all the elements from the start index to just before the end index:

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.slice(2, 5); // [3, 4, 5]

Omitting the end value will slice till the end of the array:

arr.slice(4); // [5, 6, 7, 8, 9]

If the end value is greater than or equal to the start value then it returns an empty array:

arr.slice(6, 2); // []

If only one argument k is provided and the argument is negative, then the last |k| elements are returned:

arr.slice(-4); // [6, 7, 8, 9]

Array sorting

There are two ways to sort an array. The first is the sort method. It takes no arguments, has no return value and sorts the array it is called on:

let nums = [3, 4, 6, 1, 2, 5];
nums[3]; // 1
nums.sort();
nums; // sorted to [1, 2, 3, 4, 5, 6]
nums[3]; // 4

The second way is to use the toSorted method. This does not change the original array and instead returns a new sorted array:

let nums = [3, 4, 6, 1, 2, 5];
let sortedNums = nums.toSorted();
nums; // still [3, 4, 6, 1, 2, 5]
sortedNums; // [1, 2, 3, 4, 5, 6]

Both these methods sort the elements of the array according to their natural ascending order as defined by JavaScript. To sort an array in descending order, you can call one of the sort or toSorted methods and then reverse the array.

Reversing an array

Like with sorting, there are two ways to reverse the ordering of elements in an array. The first is the reverse method, which works like the sort method (i.e. it changes the original array):

let nums = [1, 2, 3, 4, 5, 6];
nums[3]; // 4
nums.reverse();
nums; // [6, 5, 4, 3, 2, 1]
nums[3]; // 3

The second way is to use the toReversed method which is similar to the toSorted method (i.e. it does not modify the original array and returns a new one instead):

let nums = [1, 2, 3, 4, 5, 6]
let reversedNums = nums.toReversed();
nums; // still [1, 2, 3, 4, 5, 6]
reversedNums; // [6, 5, 4, 3, 2, 1]

To sort an array in descending order, combine the sorting and reversing methods:

let nums = [3, 5, 1, 2, 6, 4];
nums.sort()
nums.reverse();
nums; // now [6, 5, 4, 3, 2, 1]

Iterating through an array

A for or while loop can be used to iterate through the elements of an array and perform an action. For this next bit let's try to go through the elements of an array nums and add the squares of each element to a new array. Below is the code for this:

let nums = [1, 2, 3, 4, 5];
let squaredNums = []
for (let i = 0; i < nums.length; i++) {
    squaredNums.push(nums[i] ** 2);
}
squareNums; // [1, 4, 9, 16, 25]

But there is a better way of doing this. Arrays have a forEach method that takes in a unary function and applies it to every element in the array. It is common to use lambda expressions and anonymous functions for this. The above code can be shortened to:

let nums = [1, 2, 3, 4, 5];
let squaredNums = [];
nums.forEach(x => squaredNums.push(x ** 2));
squaredNums; // [1, 4, 9, 16, 25]

If the unary function passed in to forEach returns any value, the value is ignored and "lost" i.e. cannot be used by any code you write

More methods

There is a full list of array methods here; this section would be far too long if I tried covering them here.

Next steps

Now we're done covering the basics of JavaScript. The next section will move on to HTML, followed by CSS, and then back to JavaScript where we'll combine the 3 to make a functional frontend.