How to Manipulate Arrays With unshift() in JavaScript

The unshift() method in JavaScript is used to add one or more elements to the beginning of an array. The elements are added in the order in which they are passed as arguments. The method returns the new length of the array.

Here is an example of how to use unshift():

let fruits = ["Banana", "Orange", "Apple"];
fruits.unshift("Mango", "Pineapple");
console.log(fruits);
// Output: ["Mango", "Pineapple", "Banana", "Orange", "Apple"]

In this example, the unshift() method is used to add “Mango” and “Pineapple” to the beginning of the fruits array. The method returns the new length of the array, which is 5.

Please note that the unshift() method modifies the original array and it does not create a new one.

You can also use the unshift() method to add a single element to an array by passing a single argument. For example:

let numbers = [1, 2, 3];
numbers.unshift(0);
console.log(numbers);
// Output: [0, 1, 2, 3]

In this example, the unshift() method is used to add the number 0 to the beginning of the numbers array.

It’s also worth noting that the unshift() method can accept any type of argument, not just strings or numbers. For example, you can add an object or another array to an array using the unshift() method:

let items = ["book", "pen"];
let newItem = { name: "notebook", price: 5 };
items.unshift(newItem);
console.log(items);
// Output: [{name: "notebook", price: 5}, "book", "pen"]

You can also use spread operator to add multiple elements to an array using the unshift() method:

let numbers = [3, 4, 5];
let newNumbers = [1, 2, ...numbers];
console.log(newNumbers);
// Output: [1, 2, 3, 4, 5]

Another thing to keep in mind when using the unshift() method is that it can have performance implications when used on large arrays. Because the method adds elements to the beginning of the array, all other elements have to be shifted to make room for the new elements. This can be a costly operation, especially for large arrays.

If you need to add elements to the beginning of a large array, but you don’t want to pay the performance cost of using unshift(), you can use the spread operator to create a new array with the new elements, and then concatenate it with the original array. For example:

let largeArray = new Array(10000).fill(0);
let newElements = [1, 2, 3];

let newArray = [...newElements, ...largeArray];
console.log(newArray);
// Output: [1, 2, 3, 0, 0, ...(9999 more elements)]

This approach creates a new array with the new elements, and then concatenates it with the original array. This way, the original array is not modified and the performance cost of adding elements to the beginning of the array is avoided.

It’s important to note that this approach will create a new array object, hence it will consume more memory, but it will be faster on large array manipulation.

In summary, the unshift() method is a powerful and convenient tool for adding elements to the beginning of an array in JavaScript, but it can have performance implications when used on large arrays. An alternative approach is to use the spread operator to create a new array with the new elements and then concatenate it with the original array.