The Basics of Arrays in JavaScript

What is an Array?

“An array is an ordered collection of data (either primitive or object depending upon the language). Arrays are used to store multiple values in a single variable. This is compared to a variable that can store only one value.” — MDN

Arrays are used all of the time in programming and are one of the most common data structures. As MDN states, Arrays are a collection of data that are used to store multiple values in one single variable. In JavaScript, the values could be the same type or different types.

let firstArray = [1, 2, 3, 4, 5];

let secondArray = [1, "2", true, 4, false];

These are arrays and both of them are valid in JavaScript because JavaScript is an “untyped” language.

How do you create an Array?

You can create an array with the new keyword

let array_name = new Array(item1, item2, ...) // Old Practice

You can create an array without the new keyword and just use []

let array_name = [item1, item2, ...]; // Newer Standard

You can also create a multi-line array

let array_name = [
  item1,
	item2,
	...
];

How do you access the elements in an Array?

Arrays are zero-indexed. This means that Arrays start at 0 when you want to access an element. For example, item1 in the above Array would be accessed by using array_name[0] or to access item2, array_name[1]. There are other ways to access items in an array since you won't always know the index of an item. However, I will discuss those more advanced methods in a future blog. For now, just know that you can access an element in an Array by using array_name[index-1].

TIP: You can also access the last item in an array by using array_name[-1]. Or, you can access any element before the last one by adding a (-) sign before the number.

How do you change a specific element in an Array?

As you now know, Arrays are zero indexed. So, to change an element, you’d have to access that element and set it to a new value.

let favorite_foods = ["🍕", "🍔", "🍜"]  // Initial Array
favorite_foods[1] = "🍎"                // Change 🍔 to 🍎
favorite_foods                          // New Array => ["🍕", "🍎", "🍜"]

Some Common Basic JS Methods

Add an element to the end of the array — .push()

You can add an element to the end of the array by using the .push() method. The .push() method will return the new length of the array.

let favorite_foods = ["🍕", "🍔", "🍜"]  // Initial Array
favorite_foods.push("🍎")               // Add 🍎 to the end - returns 4
favorite_foods                         // New Array => ["🍕", "🍔", "🍜", "🍎"]

Remove the last element from the array — .pop()

You can remove the last element from the array and return it by using the .pop() method.

let favorite_foods = ["🍕", "🍔", "🍜"]  // Initial Array
favorite_foods.pop()                    // Pop off the last item in the array and return it - Returns "🍜"
favorite_foods                          // New Array => ["🍕", "🍔"]

Add an element to the beginning of the array — .unshift()

You can even add an element to the beginning of the array using .unshift(). This will move all of the other elements down one (increase their index by 1). The .unshift() method will return the new array length.

let favorite_foods = ["🍕", "🍔", "🍜"]  // Initial Array
favorite_foods.unshift("🍎")            // Add 🍎 to the beginning - returns 4
favorite_foods                         // New Array => ["🍎", "🍕", "🍔", "🍜"]

Removes the first element from the array — .shift()

Finally for this blog, we have .shift(). .shift() will remove the first element from the array and return it. The elements that follow will be "shifted" forward (decrease their index by 1).

let favorite_foods = ["🍕", "🍔", "🍜"]  // Initial Array
favorite_foods.shift()                  // Remove the first item in the array and return it - Returns "🍕"
favorite_foods                          // New Array => ["🍕", "🍜"]

Conclusion

This wraps up some of the basic uses and methods of arrays in JavaScript. Arrays and one of (if not the) most common data structures in JavaScript. They make it very easy to store multiple values in just one single variable. In subsequent blog posts, I will discuss some more advanced array features for manipulation, sorting, comparing, and iterating!