← coderrocketfuel.com

Push an Item to the Beginning of an Array in JavaScript

How do you push an item to the beginning of an array using JavaScript?

In this article, we'll show you four different ways to do this using plain JavaScript:

  1. The unshift() Method
  2. The concat() Method
  3. The ES6 Spread Operator ... Method
  4. The splice() Method

We'll cover each of those methods in more detail below and provide you with code samples as well.

Let's get started!

Table Of Contents

1. Unshift() Method

The unshift() method adds one or more items to the beginning of an array and returns the new length of the modified array.

Here's what it looks like in a code example:

let originalArray = ["Taco", "Hamburger", "Hot Dog", "Chicken"]

originalArray.unshift("Veal")

console.log(originalArray)

// Result: ["Veal", "Taco", "Hamburger", "Hot Dog", "Chicken"]

The unshift() method takes one or multiple parameters of the element you want to append to the front of the array.

If you add multiple items to the function as parameters, they will be added as chunk at the beginning in the same exact order you passed them as arguments.

It's also important to note that this method will return the length of the newly created array (not the new array itself). This will differ with some of the other methods we cover in this article and will be either good or bad depending on your use case.

Check out the MDN Web Documentation for more specific information on the unshift() method.

In the next section, we'll cover the concat() method.

2. Concat() Method

The concat() method is used to combine two or more arrays. It doesn't change anything about the arrays given to the method but simply returns the newly created array.

Here's what the code looks like when using the concat() method to append an item to the front of an array:

const originalArray = ["Taco", "Hamburger", "Hot Dog", "Chicken"]

const newArray = ["Veal"].concat(originalArray)

console.log(newArray)

// Result: ["Veal", "Taco", "Hamburger", "Hot Dog", "Chicken"]

In contrast to the array length value returned by the unshift() method, concat() will return a shallow copy of the newly created array. Therefore, this method is good for you to use when the original array needs to remain unchanged for whatever reason.

Check out the MDN Web Documentation for more specific information on the concat() method.

The next method we'll cover is the ES6 Spread Operator.

3. ES6 Spread Operator

The spread syntax was a feature added to the ES6 version of JavaScript that allows you to iterate over an array and expand its values where zero or more arguments or elements are expected.

In layman's terms, it allows you to manipulate strings, arrays, and objects in a syntax that is more succinct and easier to use compared to other methods. And it can be used specifically to push an item to the beginning of an array.

Here's what the code looks like:

let originalArray = ["Taco", "Hamburger", "Hot Dog", "Chicken"]

originalArray = ["Veal", ...originalArray]

console.log(originalArray)

// Result: ["Veal", "Taco", "Hamburger", "Hot Dog", "Chicken"]

Using the spread operator in this way simply creates a new version of the array and where "Veal" is placed in the first position.

This method isn't supported in all browsers. Specifically, none of the Internet Explorer browser versions support the ES6 spread operator.

Check out the MDN Web Documentation for more specific information on the ES6 Spread Operator.

In the next section, we'll cover the last splice() method.

4. Splice() Method

The splice() method alters the contents of an array by the mode of removing or replacing existing elements and/or adding new ones in their place.

Here's what the method looks like in practice:

let originalArray = ["Taco", "Hamburger", "Hot Dog", "Chicken"]

originalArray.splice(0, 0, "Veal")

console.log(originalArray)

// Result: ["Veal", "Taco", "Hamburger", "Hot Dog", "Chicken"]

The splice() method takes three parameters in this order:

  1. The index at which you want to begin altering the array.
  2. An integer specifying how many elements in the array to remove from the start.
  3. The elements you want to add to the array (beginning from the start point).

In our code example, we gave both the first and second parameter a 0 value. By giving those items a value of 0, we're telling the splice() method to insert our element at the beginning of the originalArray we provided.

Check out the MDN Web Documentation for more specific information on the splice() method.

That was the last method we'll cover in this article.