When we're dealing with large amounts of data, we want to make sure we can organize and manage it properly.

In {lang}, we use arrays to store several pieces of data in one place.

Array Declaration / Creation:

You start an array declaration with an opening square bracket, end it with a closing square bracket, and put a comma between each entry, like this:

let sandwich = ["peanut butter", "jelly", "bread"]

In this program we created an array consisting of 3 string items: "peanut butter", "jelly" and "bread".

Then, we stored that array in a variable sandwich so we can later access it. For example, I can print the array:

// Creating the array:
let sandwich = ["peanut butter", "jelly", "bread"];

// Printing the array:
console.log(sandwich); // Output: ["peanut butter", "jelly", "bread"]

Items Data Types

Arrays can store any data types (strings, integers, booleans, etc.) and the items shouldn't necessary be of the same data type. For example:

let myArray = ["Hello world!", 32, False];

myArray consits of one string item, one number item and one boolean item.

We use arrays to better organize pieces of data which are part of the same family or share the same meaning, like the name of our friends or the items in a sandwich.

So most of the time we will have arrays where the items share the same data type.

Accessing Elements

Arrays are ordered, meaning each element has a numbered position known as its index. We access an array element by referring to its index number.

Arrays use zero-based indexing, so the first element in an array has an index of 0, the second element has an index of 1, etc.

We’re using bracket notation, [] with the index after the name of the array to access the element:

let myArray = ["Hello world!", 32, false];

console.log(array[0]); // Output: "Hello world!"
console.log(array[1]); // Output: 32
console.log(array[2]); // Output: false

Updating elements:

Unlike strings, the entries of arrays are mutable and can be changed freely, using indices and the bracket notation:

let myArray = ["Hello world!", 32, false];

myArray[1] = "second element";
myArray[2] = -60;

console.log(myArray); // Output: ["Hello world!", "second element", -60]

Push:

An easy way to append data to the end of an array is via the push() method.

.push() takes one or more parameters and "pushes" them onto the end of the array.

Examples:

let myArray = ["Hello world!"];

myArray.push(44);
console.log(myArray); // Output: ["Hello world!", 44]

myArray.push("apples", true, 12);
console.log(myArray); // Output: ["Hello world!", 44, "apples", true, 12]

Pop:

Another way to change the data in an array is with the .pop() function.

.pop() removes the last element of an array and also returns the value of that element.

Any type of entry can be popped off of an array - numbers, strings, even nested arrays.

let threeArr = [1, 4, 6];
let oneDown = threeArr.pop();

console.log(oneDown); // Output: 6
console.log(threeArr); // Output: [1, 4]

Getting the size:

We can get the size of an array using the .length property.

let ourArray = [50, 40, 30];
console.log(ourArray.length); // Output: 3

ourArray.pop();
console.log(ourArray.length); // Output: 2

Nested Arrays

An array can have elements which are also arrays. When an array contains one or more other arrays, it is known as a nested array. For example:

let nestedArray = [ ["Andy", 9], ["Mary", 8, false] ];

We can access an element from this nested array using the bracket notation with the index value, just like we would with a normal array:

let nestedArray = [ ["Andy", 9], ["Mary", 8, false] ];

console.log(nestedArray[1]); // Output: ["Mary", 8, false]

nestedArray[1] grabs the element at index 1, which is the array ["Mary", 8, false]

Now, if we want to access some elements within the inner array nestedArray[1], we can add one more bracket notation with the index of the element we want to get:

let nestedArray = [ ["Andy", 9], ["Mary", 8, false] ];

console.log(nestedArray[1]); // Output: ["Mary", 8, false]
console.log(nestedArray[1][0]); // Output: "Mary"
console.log(nestedArray[1][2]); // Output: false

Most of the times we work with 2-dimentional nested arrays (array in array) like the one above. But let's see an example of a 3-dimentional array (array in array in array) to see what's possible:

const arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
  [[10, 11, 12], 13, 14]
];

arr[3]; // [[10, 11, 12], 13, 14]
arr[3][0]; // [10, 11, 12]
arr[3][0][1]; // 11

Iterating through the elements:

We can iterate throught the elements of an array using a for loop and the of keyword like this:

var sandwich = ["peanut butter", "jelly", "bread"];
for (let ingredient of sandwich) {
    console.log(ingredient);
}

// This will print the strings "peanut butter", "jelly" and "bread" on three separate lines

We can also iterate throught the elements of an array using indices and a for loop like this:

var sandwich = ["peanut butter", "jelly", "bread"];
for (let i = 0; i < sandwich.length; i++) {
    console.log(sandwich[i]);
}

// This will print the strings "peanut butter", "jelly" and "bread" on three separate lines

Both ways take O(n) time, where n is the length of the array we iterate on.

How the dynamic array works behind the scenes is not trivial and you might be asked to explain this in interviews. So make sure you watch this video to fully understand how the dynamic array operates: