Learning JavaScript | Arrays

Arrays in JavaScript hold a list of properties that are not linked to a key pair value. Instead Arrays hold your data in a space in memory and use the index of that memory location to later retrieve information.

Photo by Dušan veverkolog on Unsplash

Push, Pop, Shift, Unshift

Since we dont store the values in arrays with a key pair value, and instead we use the index of the array to reference a value; JavaScript has some really helpful Array methods that help us add or remove values, those being push(), pop(), shift(), and unshift()

Push

The push() method adds an item to the end of an array like so:

const cars = ["Honda", "Nissan"]

console.log(cars) // prints "Honda", "Nissan"

cars.push("Toyota") // adds item at the end of the array

console.log(cars) // prints "Honda", "Nissan", "Toyota"

Pop

The pop() method removes an item from the end of an array like so:

const cars = ["Honda", "Nissan", "Toyota"]

console.log(cars) // prints "Honda", "Nissan", "Toyota"

cars.pop()

console.log(cars) // prints "Honda", "Nissan"

Shift

The shift() method removes an item from the beginning of an array like so:

const cars = ["Honda", "Nissan", "Toyota"]

console.log(cars) // prints "Honda", "Nissan", "Toyota"

cars.shift()

console.log(cars) // prints "Nissan", "Toyota"

Unshift

The unshift() method adds an item to the beginning of an array like so:

const cars = ["Honda", "Nissan", "Toyota"]

console.log(cars) // prints "Honda", "Nissan", "Toyota"

cars.shift("Tesla")

console.log(cars) // prints "Tesla", "Honda", "Nissan", "Toyota"

In my experience the most common of these four that I use the most is push() , and I usually have to lookup shift and unshift to remember which one adds to an array, and which one removes from an array 😅. But in general these four methods make working with array values much easier

Get Harold’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

If we did not have these methods we would have to know the index that we wanted to edit and use something like the splice() method. This may seem like a good solution at such a small scale, but often times we won’t know where the array ends and begins without doing some extra work beforehand.

const cars = ["Honda", "Nissan", "Toyota"];

cars.splice(2, 1); // removes "Toyota"
cars.splice(0, 1); // removes "Honda"
cars.splice(1, 1); // removes "Nissan"
cars.splice(0, 3); // removes all items

console.log(cars);

To manually add items you would create a new array with the original values plus the new value. And ideally you would delete the original array from memory after:

const newArr = new Array(...cars, "BMW"); // adds "BMW" to the end

const newArr = new Array("BMW", ...cars); // adds "BMW" to the beginning

Instantiating an Array

We can create an instance of an array type using the predefined Array class that comes with JavaScript

const names = new Array() // using the 'new' keyword

When using the new keyword we can still add values to the array like so:

const names = new Array();

names.push("Carl");

console.log(names); // logs "Carl"

Or we can use the JSON syntax with square braces.

const car = [...] // using [] square brackets

We can initialize the same array by using curly brackets like so:

const names = ["Carl"];

console.log(names); // logs "Carl"

Arrays and their Index

const arr = [24, 12, 10, 9, 15, -4]

arr[0] // value: 24 index: 0 length: 1
arr[1] // value: 12 index: 1 length: 2
arr[2] // value: 10 index: 2 length: 3
arr[3] // value:  9 index: 3 length: 4
arr[4] // value: 15 index: 4 length: 5
arr[5] // value: -4 index: 5 length: 6

The index represents the location in the array which is 0 based, while the length of the array starts at 1 and just represents the length.

So if we use the index to reference the values in an array, there will always be 1 less numeric value than the length of the array. in our example [24, 12, 10, 9, 15, -4] our array has 6 values, so the max index is 5. we can represent this in code like this:

arr.length // get the number of values in the array
arr.length - 1 // to get the index of the last value

console.log(arr[arr.length - 1]) // Prints -4

Array Destructuring

Say we have an array of names mixed in with some numbers

const names = ["John", "Jane", 432, 592];

const [name, [letter1, letter2], ...numbers] = names;
console.log(name); // Returns "John"
console.log(letter1); // Returns "J"
console.log(letter2); // Returns "a"
console.log(numbers); // Returns [432, 592]

the value in the destructuring syntax, will match the value of the original array you are destructuring from. so thats why name will return whatever is at index 0, and then [letter1, letter2] will return the 0, and 1 index of the second string in the array “Jane” -> [J, a] .

Lets connect!

🌎 Linkedin | GitHub | Email 🌎

Please don’t hesitate to reach out through any of these channels I welcome feedback on my content and writing! Also consider following my Medium account for regular coding articles.

Thank you!