Adding an element to the beginning of an array in JavaScript is a common task that you may need to perform when working with arrays.
In this article, we will see a bunch of ways to add an element to the beginning of an array in JavaScript.
1. Using the unshift()
method:
The unshift()
method is a built-in JavaScript method that adds one or more elements to the beginning of an array and returns the new length of the array.
Here’s an example of how to use the unshift()
method:
let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // Output: [0, 1, 2, 3]
In this example, we declare an array arr
with three elements: 1, 2, and 3. Then we use the unshift()
method to add the number 0 to the beginning of the array. The console.log()
statement outputs the new array, which now has four elements: 0, 1, 2, and 3.
You can also use the unshift()
method to add multiple elements to the beginning of an array.
Here’s an example:
let arr = [1, 2, 3];
arr.unshift(-2, -1, 0);
console.log(arr); // Output: [-2, -1, 0, 1, 2, 3]
In this example, we use the unshift()
method to add three elements (-2, -1, and 0) to the beginning of the array. The console.log()
statement outputs the new array, which now has six elements: -2, -1, 0, 1, 2, and 3.
One thing to note is that the unshift()
method modifies the original array, so if you want to preserve the original array, you should make a copy of it before using the unshift()
method.
Using the spread operator:
Another way to add an element to the beginning of an array is to use the spread operator (...
). The spread operator can be used to concatenate arrays or add elements to the beginning or end of an array.
For example:
let arr = [1, 2, 3];
arr = [0, ...arr];
console.log(arr); // Output: [0, 1, 2, 3]
In this example, we declare an array arr
with three elements: 1, 2, and 3. Then we use the spread operator to create a new array that contains the element 0 followed by all the elements of the original array. We assign the new array to the variable arr
, effectively replacing the original array with the new array. The console.log()
statement outputs the new array, which now has four elements: 0, 1, 2, and 3.
One advantage of using the spread operator is that it does not modify the original array, so you don’t need to worry about accidentally changing the original array.
Using the concat()
method:
The concat()
method is a built-in JavaScript method that creates a new array by concatenating two or more arrays.
Here’s an example of how to use the concat()
method to add an element to the beginning of an array:
let arr = [1, 2, 3];
arr = [0].concat(arr);
console.log(arr); // Output: [0, 1,
In the example above, we declare an array arr
with three elements: 1, 2, and 3. Then we use the concat()
method to create a new array that contains the element 0 followed by all the elements of the original array. We assign the new array to the variable arr
, effectively replacing the original array with the new array. The console.log()
statement outputs the new array, which now has four elements: 0, 1, 2, and 3.
One thing to note is that the concat()
method does not modify the original array, so you need to assign the new array to a variable if you want to preserve the new array.
Using the splice()
method:
The splice()
method is a built-in JavaScript method that can be used to add or remove elements from an array.
Here’s an example of how to use the splice()
method to add an element to the beginning of an array:
let arr = [1, 2, 3];
arr.splice(0, 0, 0);
console.log(arr); // Output: [0, 1, 2, 3]
In this example, we declare an array arr
with three elements: 1, 2, and 3. Then we use the splice()
method to insert the element 0 at index 0 (i.e., the beginning of the array). The first argument to the splice()
method is the index at which to start inserting elements, the second argument is the number of elements to remove (which in this case is 0, since we’re not removing any elements), and the third argument (and any additional arguments) are the elements to insert. The console.log()
statement outputs the new array, which now has four elements: 0, 1, 2, and 3.
One advantage of using the splice()
method is that it can be used to insert or remove multiple elements at once.
Here’s an example:
let arr = [1, 2, 3];
arr.splice(0, 0, -2, -1, 0);
console.log(arr); // Output: [-2, -1, 0, 1, 2, 3]
In this example, we use the splice()
method to insert three elements (-2, -1, and 0) at index 0 (i.e., the beginning of the array). The console.log()
statement outputs the new array, which now has six elements: -2, -1, 0, 1, 2, and 3.
One thing to note is that the splice()
method modifies the original array, so if you want to preserve the original array, you should make a copy of it before using the splice()
method.
Thank you for reading, and let’s have conversation with each other
Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.