JavaScript arrays are easily one of my favorite data types. They are dynamic, easy to use, and offer a whole bunch of built-in methods we can take advantage of.

However, the more options you have the more confusing it can be to decide which one you should use.

In this article, I would like to discuss some common ways of adding an element to a JavaScript array.

The Push Method

The first and probably the most common JavaScript array method you will encounter is push(). The push() method is used for adding an element to the end of an array.

Let's say you have an array of elements, each element being a string representing a task you need to accomplish. It would make sense to add newer items to the end of the array so that we could finish our earlier tasks first.

Let's look at the example in code form:

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

Alright, so push has given us a nice and simple syntax for adding an item to the end of our array.

Let's say we wanted to add two or three items at a time to our list, what would we do then? As it turns out, push() can accept multiple elements to be added at once.

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item', 'Fifth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Now that we've added some more tasks to our array we might want to know how many items are currently in our array to determine if we have too much on our plate.

Luckily, push() has a return value with the length of the array after our element(s) have been added.

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.push('Fourth item', 'Fifth item');

console.log(arrLength); // 5 
console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

The Unshift Method

Not all tasks are created equal. You might run into a scenario in which you are adding tasks to your array and suddenly you encounter one which is more urgent than the others.

It's time to introduce our friend unshift() that allows us to add items to the beginning of our array.

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2');

console.log(arrLength); // 5 
console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

You may notice in the example above that, just like the push() method, unshift() returns the new array length for us to use. It also gives us the ability to add more than one element at a time.

The Concat Method

Short for concatenate (to link together), the concat() method is used for joining together two (or more) arrays.

If you remember from above, the unshift() and push() methods return the length of the new array. concat(), on the other hand, will return a completely new array.

This is a very important distinction and makes concat() extremely useful when you're dealing with arrays you do not want to mutate (like arrays stored in React state).

Here is what a fairly basic and straightforward case might look like:

const arr1 = ['🍎', '🍌'];
const arr2 = ['🥕', '🍩'];

const arr3 = arr1.concat(arr2);

console.log(arr3); // ["🍎", "🍌", "🥕", "🍩"] 

Let's say you have multiple arrays you would like to join together. No worries, concat() is there to save the day!

const arr1 = ['🍎', '🍌'];
const arr2 = ['🥕', '🍩'];
const arr3 = ['🥚', '🍟'];

const arr4 = arr1.concat(arr2,arr3);

console.log(arr4); // ["🍎", "🍌", "🥕", "🍩", "🥚", "🍟"]

Cloning with Concat

Remember how I said that concat() can be useful when you don't want to mutate your existing array? Let's take a look at how we can leverage this concept to copy over the contents of one array into a new array.

const arr1 = ["🍎", "🍌", "🥕", "🍩", "🥚", "🍟"];

const arr2 = [].concat(arr1);

arr2.push("🍇");

console.log(arr1) //["🍎", "🍌", "🥕", "🍩", "🥚", "🍟"]
console.log(arr2) //["🍎", "🍌", "🥕", "🍩", "🥚", "🍟", "🍇"]

Awesome! We can essentially "clone" an array using concat().

But there is a small 'gotcha' in this cloning process. The new array is a "shallow copy" of the copied array. This means that any object is copied by reference and not the actual object.

Let's take a look at an example to explain this idea more clearly.

const arr1 = [{food:"🍎"}, {food:"🍌"}, {food:"🥕"}]

const arr2 = [].concat(arr1);

//change only arr2
arr2[1].food = "🍕";
arr2.push({food:"🍔"})

console.log(arr1) //[ { food: '🍎' }, { food: '🍕' }, { food: '🥕' } ]

console.log(arr2) //[ { food: '🍎' }, { food: '🍕' }, { food: '🥕' }, 
{ food: '🍔' } ]

Even though we didn't directly make any changes to our original array, the array was ultimately affected by the changes we made on our cloned array!

There are multiple different ways to properly do a "deep clone" of an array, but I will leave that for you as homework.

TL;DR

When you want to add an element to the end of your array, use push(). If you need to add an element to the beginning of your array, try unshift(). And you can add arrays together using concat().

There are certainly many other options for adding elements to an array, and I invite you to go out and find some more great array methods!

Feel free to reach out to me on Twitter and let me know your favorite array method for adding elements to an array.