Working with Arrays in JavaScript

Arrays are one of the most commonly used methods of information storage in JavaScript. In the simplest terms, arrays are containers for storing data.

The type of data that you can store in an array ranges from strings to numbers to JavaScript objects. You can also store other arrays inside each other.

If this is your first introduction to a JavaScript array, below is an example of an array, showing the many different types of information that can be stored within an array.

var catArray = [“I love my cat”, 1, {pet: “cat”, name: “Sassafras”, age: 6}, [1, 2, 3]];

Arrays are versatile. You can use them for most types of information you’ll need to access later in your code. As you can see from this example, I’ve assigned an array to a variable called “catArray.”

Inside “catArray” I’ve stored various bits of helpful information. This data includes a string, a number, a JavaScript object, and another array.

Of course, as with any type of storage system, it’s important to know how to use the information stored in an array.

In this article, I cover a few JavaScript methods used to add and remove information from arrays. These methods include push(), pop(), shift() , and unshift(). I’ll give a definition and the use of each method, followed with coding examples.

This is not an exhaustive tutorial. Its only a starting point to help whet your appetite for JavaScript arrays.

Pushing the limits

The push() method is the one I use the most when interacting with arrays. This method adds another element to your existing array. The method push() will always add the new item to the end of the array.

The following code is an example of how push() works.

var veggieArray = [“carrots”, “broccoli”, “beets”, “corn”];

Test this code in a code editor and look at the result in your browser’s console. You should see that we’ve added the string “cauliflower” to the end of veggieArray.

Popped “corn”

The pop() method removes the last element in an array. After removing the item, pop() will return the removed item.

var veggieArray = [“carrots”, “broccoli”, “beets”, “corn”];
var removedVeggie = veggieArray.pop();

In this example, pop() removes the string “corn’’ from veggieArray. We’ve stored veggieArray.pop() to a variable called removedVeggie. The value of this variable is now the returned array element that was “popped.” In this case, that value is the string “corn.”

To shift or unshift

The shift() method is like pop(). It also removes an element from an array, but instead of removing the last element in the array, shift() removes the first one.

This method is called shift() because it “shifts” all the remaining elements in the array back by one. This makes the index of each element one less than they were before they were shifted.

var veggieArray = [“carrots”, “broccoli”, “beets”, “corn”];
var removedVeggie = veggieArray.shift();

In the above example, shift() removes “carrots” from the array and stores it in the removedVeggie variable. Because we removed an element from the beginning of the array, we also changed the indexes of the remaining elements.

For example, whereas “carrots” used to be at veggieArray[0] — which is at index 0 in veggieArray — the string “broccoli” now occupies that index.

Last, but not least, we have unshift(), which is a method that works like push() . This method, unshift() , adds a new element to an array. But instead of adding an element to the end of the array like push(), unshift() adds the new element at the beginning.

Using our previous example, let’s swap out the push() method for unshift(). By doing this, we add the string “cauliflower” to the beginning of our veggieArray instead of adding it to the end.

var veggieArray = [“carrots”, “broccoli”, “beets”, “corn”];

Since we’re adding an element to the beginning of the array, we’ve increased the index of each element after index 0 by 1. For example, the string “cauliflower” is now at index 0 and “carrots” is now at index 1.

As you can see, there are various ways to add or remove elements from arrays. If you want to learn more about manipulating array data, take a look at the Mozilla Developer Network web docs on arrays.

W3Schools also has a great tutorial on JavaScript arrays.

To practice the basics of JavaScript, check out freeCodeCamp’s basic JavaScript exercises. Codecademy’s Introduction to JavaScript course is also a great resource for beginners.

Thanks so much for reading!