🟨JavaScript arrays

collecting several objects into one variable

Definition of an array

We can think of an array as a list or collection of related objects - in JavaScript, this would look like:

const myArray = [ 1, 2, "something", true, anotherVariable ]

With JavaScript, we can include objects of different types (such as strings and numbers) into the same array, while other programming languages might not allow us to do this!

Creating arrays

The example we have just seen shows how to create an array in JavaScript:

const myArray = [ 1, 2, "something", true, anotherVariable ]

We can even create an empty array like this:

const myArray = []

Adding elements to the array :push() and unshift()

Then, we can add elements individually by using the arrayname[index] bracket notation:

myArray[0] = 1
myArray[1] = 2
myArray[2] = "something"
myArray[3] = true

Note that the first element of an array is 0, not 1!

Also, in JavaScript, array element indices must be a number! (You cannot use a string as an index!)

We can also add elements to the end of array with the push method:

myArray.push("another thing")
console.log(myArray)
> 1, 2, "something", true, "another thing"

myArray.push("yet another thing")
console.log(myArray)
> 1, 2, "something", true, "another thing", "yet another thing"

To add elements at the beginning of an array, we can use the unshiftmethod:

const newArray = [ 0, 1, 2, "three", 4 ]

newArray.unshift("another thing")
console.log(myArray)
> [ "another thing", 0, 1, 2, "three", 4 ]

Accessing array objects

We can also use the arrayname[index] bracket notation to access array objects, e.g.:

console.log(myArray[2]) // let's print this out
> "something"

Updating array objects

Updating an array object is basically the same as re-creating it:

const myArray = [ 1, 2, "something", true ]
myArray[2] = "a new thing" // let's update!
console.log(myArray[2]) // let's print this out
> "a new thing"

Converting arrays to strings : toString() and join()

If we have an array and wish to print out the elements, we have to convert it to a string with a simple method called toString():

const myArray = [ 1, 2, "something", true ]
const myArrayString = myArray.toString()
console.log(myArrayString)
> 1,2,something,true

We can also use the join() method to convert an array into a string and then join each element with any arbitrary string:

const myArray = [1, 2, "something", true ]
const myArrayJoined = myArray.join(" + ") 
console.log(myArrayJoined)
> 1 + 2 + something + true

By default, join() , without an argument, will return a String list that has no spaces after commas (pretty much the same as toString()!)

Finding the length of an array : length

To find the length (number of elements) of an array, we have another simple property called length:

const myArray = [ 1, 2, "something", true ]
console.log(myArray.length)
> 4

Looping through arrays : for

Most programming courses will teach the for loop as a way to iterate, or move, through an array:

const myArray = [ 1, 2, "something", true ]
for (let i = 0; i < myArray.length; i++) {
    console.log(myArray[i])
}

Taking the last element of an array : pop()

We can use the pop() method to get the last element of an array:

const myArray = [ 1, 2, "something", true ]
const lastElement = myArray.pop()

// the last element gets removed from the original array
console.log(myArray)
> [ 1, 2, "something" ]

// the variable lastElement gets assigned the last element
console.log(lastElement)
> true

Taking the first element of an array : shift()

We can use the shift() method to get the first element of an array:

const myArray = [ 1, 2, "something", true ]
const firstElement = myArray.shift()
console.log(myArray)
> [ 2, "something", true ]
console.log(firstElement)
> 1

While push()and unshift()can add multiple elements to an array, pop()and shift()can only subtract one element from an array at a time! (Hint: the last two built-in methods do not take any parameters!)

Multi-dimensional arrays

We can think of a two-dimensional array as just a table (or in algebra, a matrix) with rows and columns!

A chessboard is a good example of a matrix:

let chessboard = [
    ["R", "N", "B", "Q", "K", "B", "N", "R"],
    ["P", "P", "P", "P", "P", "P", "P", "P"],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " "],
    ["p", "p", "p", "p", "p", "p", "p", "p"],
    ["r", "n", "b", "q", "k", "b", "n", "r"]
]

We would then access an element using double square bracket notation like this:

console.log(chessboard[0][3])
> "Q"

The former set of square brackets would denote the row and the latter set the column!

Destructuring arrays

In a technique called destructuring, we can "take apart" an array and place the parts into variables - for example, in our chessboard example from above, we can use the following syntax:

let [firstRow, secondRow] = chessboard
// firstRow and secondRow are just variable names and are not special keywords

console.log(firstRow)
> ["R", "N", "B", "Q", "K", "B", "N", "R"]

console.log(secondRow)
> ["P", "P", "P", "P", "P", "P", "P", "P"]

Note that we do not have to include all of the elements in the array! We can even skip elements by placing a blank space in between commas like this:

let [firstRow, secondRow, , , , , seventhRow, eighthRow] = chessboard

console.log(seventhRow)
> ["p", "p", "p", "p", "p", "p", "p", "p"]

console.log(eighthRow)
> ["r", "n", "b", "q", "k", "b", "n", "r"]

We can even use the spread operator, ...variablename, to include the "rest" of the elements in an array:

let [firstRow, secondRow, ...restOfTheRows] = chessboard

console.log(restOfTheRows)
> (6) [Array(8), Array(8), Array(8), Array(8), Array(8), Array(8)]

This would return a "sub-array" with any element that wasn't individually destructured!

The element with the spread operator must appear as the last element of the destructuring so:

let [firstRow, ...restOfTheRows, lastRow] = chessboard

...will not work! A SyntaxError will occur:

Uncaught SyntaxError: Rest element must be last element

Searching arrays : indexOf()

Much like a String,we can use the Array version of the built-inindexOf() method to see if a value exists inside an array:

let myArray = [ "item", 300, -1, "something", true, true, true ]

console.log(myArray.indexOf(300))
> 1 
// i.e. the second element of the array

console.log(myArray.indexOf(true))
> 4
// i.e. the first occurrence of true in the array

console.log(myArray.indexOf("not here"))
> -1
// it will return -1 if value is not found

Note the robustness of the indexOf() when searching for values of various data types!

The indexOf() method also comes with an optional parameter, which allows us to search from (and including) a specific index in the array:

let myArray = [ "item", true, 300, -1, "something", 300, true ]

console.log(myArray.indexOf(300, 2))
> 2
// i.e. the third element of the array

console.log(myArray.indexOf(300, 3))
> 5
// i.e. the sixth element; 
// indexOf searches at or after the (3+1)th element

console.log(myArray.indexOf(true, 4))
> 6
// i.e. the last element (myArray.length - 1)

Adding and removing elements from the middle of an array with splice()

Not to confuse with slice(), the splice()method allows us to "do surgery" on an array by removing items from it, and then adding items to the array:

let myArray = [ "first", "second", "third", "fourth", "fifth" ]
myArray.splice(2, 1, "tooth", "both")
console.log(myArray)
> [ "first",  "second", "tooth", "both", "fourth", "fifth" ]
// starting from index 2, remove the next 1 item(s)
// then, in their place(s), add "tooth" and "both"

myArray.splice(3, 2, "moth")
> [ "first", "second", "tooth", "moth", "fifth" ]
// continue from the mutated array
// starting from index 3, remove the subsequent 2 items
// then, in their places, add "moth"

The original array will change (mutate)! Thus, we can see what happens to myArray by logging it to the console immediately!

Meanwhile, the splice() method will return the removed elements of the original array

In general, the splice()method consists of:

theArray.splice(startIndex, numberOfItemsToRemove, additionalItem1, additionalItem2, ...)

Checking if an array has a certain value : includes()

Also very similar to the String's built-in method, the Array's version of includes() returns a Boolean that specifies whether an array has an element with a certain value:

let myArray = [ "a", "b", "C", "d", 2 ]

console.log(myArray.includes("C")
> true

console.log(myArray.includes("c")
> false
// includes() is case sensitive!

console.log(myArray.includes("2")
> false 
// "2" is not in the array but 2 is!

As we can gather from the above, the includes() method is both case-sensitive and type-sensitive!

Copying arrays with concat(), slice(), ...spread

An obvious way to copy an array would be to do something like this:

let originalArray = [1, 2, 3]
let copiedArray = myArray

However, any change in the copiedArraywould result in a change in the original array:

copiedArray[0] = -1
console.log(originalArray[0])
> -1

We call this phenomenon deep copying: a change in one copy results in a change in the original!

To perform shallow copying of an array (i.e., one where each copy is actually its own thing), we would use some other methods:

Using concat()

let originalArray = [1, 2, 3]
let copiedArray = [].concat(originalArray)

console.log(copiedArray)
> [1, 2, 3]

copiedArray[0] = -1
console.log(originalArray[0])
> 1 
// not -1!

Using slice()

let originalArray = [1, 2, 3]
let copiedArray = originalArray.slice()

console.log(copiedArray)
> [1, 2, 3]

copiedArray[0] = -1
console.log(originalArray[0])
> 1 
// not -1!

Using the spread ... operator

let originalArray = [1, 2, 3]
let copiedArray = [...originalArray]

console.log(copiedArray)
> [1, 2, 3]

copiedArray[0] = -1
console.log(originalArray[0])
> 1 
// not -1!

All three methods result in the same shallow copying!