Arrays in JavaScript

Definition

An array is a data structure consisting of a collection of elements where each element is identified by an index in the array. An array can be single dimensional or multidimensional. Traditionally, a single dimensional array is represented as seen below

The above array has eight elements with values 1, 2, 3, 4, 5, 6, 7, & 8. The indices of an array can be seen above the elements and the first item in the array is found at index 0. We say that the length of the array is 8 and the first index of the array starts at index 0 and if you have eight elements in the array then the last element will be found at index 7, because if the array starts at 0 then the last element will be found at length of the array - 1 and in our case that will be 8 - 1 = 7.

Declaring an Array

How do we declare an array?

// Declare an array without a size
const arr = [];

// Declrate an array with a size
const arr2 = new Array(8);

In the above code, both the variables, arr and arr2 are objects and you can find out their type by running the following command

console.log({"typeOfArr": typeof arr});
console.log({"typeOfArr2": typeof arr2});

Both the variables, arr and arr2 are declared as constants because their type cannot be changed but the values in them can be changed.

The two arrays we created, are two different ways of creating an array in JavaScript. The first one is with a literal notation and the second one is with a class and when we use the Array class we can specify how many elements we need at the time of creation. Check out what the MDN docs have to say here.

Populating the array

There are many ways to add an element to an array and instead of decribing them here please checkout the MDN docs for

1. push - adds an element to the end of the array and returns the new length.
2. unshift - adds an element to the begining of the array and returns the new length.
3. splice - Think of splice as a multi purpose function which is used to add, remove, or replace elements in the array.

We populate our two arrays with data

// Populate array arr
arr.push(1);
arr.push(2);
arr.push(3, 4);
arr.push(5);
arr.push(6, 7, 8);

// arr = [1, 2, 3, 4, 5, 6, 7, 8]

// Populate array arr2
arr2.push(1);
arr2.push(2);
arr2.push(3, 4);
arr2.push(5);
arr2.push(6, 7, 8);
arr2.push(9);

// arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]

The push method on arr is used to add either one element or multiple elements separated by a comma and we have added eight elements.

The push method on the second array, arr2 was created with having eight empty slots but we added nine elements to it and this is indeed possible in JavaScript as the size of the array will increase to accomodate the 9th element.

Since arr and arr2 are arrays we will focus on arr moving forward

Accessing data from the array

After declaring your array the next thing we can do with it is to access the elements.

console.log({first: arr[0]});
console.log({second: arr[1]});
console.log({third: arr[2]});
console.log({fourth: arr[3]});
console.log({fifth: arr[4]});
console.log({sixth: arr[5]});
console.log({seventh: arr[6]});
console.log({eighth: arr[7]});

Remember, array starts at index 0 and the last element is found at the length of the array - 1. Accessing an element at index 9 will return undefined.

Accessing data from the array with loops

Usually a for loop is used to iterate over elements in an array and this is how we do it in JavaScript

for (let index = 0; index < arr.length; index++) {
    console.log({index: index, value: arr[index]});
}

JavaScript also provides another way to iterate over elements, the forEach way

arr.forEach((value, index) => {
    console.log({index: index, value: arr[index]});
});

JavaScript also provides another for loop called for of which returns the element from the array

for (const value of arr) {
    console.log({value: value});
}

A while loop can be used to iterate over elements but in a while loop or a do while loop you have to take care of the index and making sure it is incremented correctly and while comparision statement used in the while statement.

// while loop
let index = 0;
while (index < arr.length) {
    console.log({index: index, value: arr[index]});
    index++;
}

// do while loop
index = 0;
do {
    console.log({index: index, value: arr[index]});
    index++;
} while (index < arr.length)

An array is one of the most basic data structures and with an array we can implement algorithms like sort, union find, & quick find. The code in this article can be found in this gist.