JavaScript: Arrays, Array Properties, Array Methods: push, pop, shift, unshift, Stacks, and Queues!

Arrays

Arrays are ordered collections of values/variables that are stored sequentially. They are also considered to be objects.

I welcome you to play around with arrays in the console as you read this article. On a mac, you can press command + option + j to open console in Chrome. 🎉

// To make an empty array
let arr = [];

// To make an array of strings
let friends = ['Jim', 'Linda', 'Jerry'];

// To make an array of numbers
let ranNums = [35, 93, 2, 53];

// Arrays can also contain a mix of types
let whoKnows = ['String', 3, NaN, null];

Accessing Elements in an array

Let's say we have

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

as well as

let arr2 = [39, 84, 24, 94, 35];

Arrays have indices that start at 0. To access the first element in an array we would call arr[0] and to access the second we would call arr[1] and so forth. If we try to access an index that does not exist in an array, say arr[839], we will get undefined.

For example:

console.log(arr2[2]); // 24
console.log(arr2[934]); // undefined

Updating an array

If we want to update an item at a specific index, we can do something like:

arr2[0] = 99;
console.log(arr2); // [99, 84, 24, 94, 35]

Array Properties

We can check the length of an array as follows

let cats = ['Toby', 'Abigale', 'Bob'];
console.log(cats.length); // 3

Array Methods

Before we jump into array methods, a great way to think of an array is like a line of people waiting to get into a theme park. Let's say we have:

let line = ['Abby', 'Jim', 'Timmy'];

We can think of this such that Abby is first in line, then Jim, then Timmy.

If we want to add someone to the end of the line (array) we can call the .push() method:

line.push('Ethan');
console.log(line); // ['Abby', 'Jim', 'Timmy', 'Ethan']

Now, if Ethan got tied and wanted to leave the line we could remove him from the end of the line (array) by calling .pop():

line.pop();
console.log(line); // ['Abby', 'Jim', 'Timmy']

As Abby enters the theme park, we may want to remove her from the front of the line (array) by calling .shift()

line.shift();
console.log(line); // ['Jim', 'Timmy']

Jim and Timmy are waiting patiently in line, but Samuel is a total butthead and decides to cut the line (array) by calling .unshift()

line.unshift('Samuel');
console.log(line); // ['Samuel', 'Jim', 'Timmy']

Now, Ethan gets back in line with his friend Caitlyn. They can be appended to the line (array) together by calling .push()

line.push('Ethan', 'Caitlyn');
console.log(line); // ['Samuel', 'Jim', 'Timmy', 'Ethan', 'Caitlyn']

Stacks and Queues

Congratulations! Without realizing it, you learned how stacks and queues work.

A stack can be thought of like a stack of plates where you .push() and .pop() from the top (end of the array).

A queue can be thought of like a line where you .push() people onto the end of the line (array) and shift() them out of the front of the line (array).