DEV Community

Megan Paffrath
Megan Paffrath

Posted on

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];
Enter fullscreen mode Exit fullscreen mode

Accessing Elements in an array

Let's say we have

let arr = [0, 1, 2, 3, 4];
Enter fullscreen mode Exit fullscreen mode

as well as

let arr2 = [39, 84, 24, 94, 35];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

Array Properties

We can check the length of an array as follows

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

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'];
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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).

Top comments (0)