Arrays are a fundamental data structure in JavaScript, and they are used to store data collections in a single variable. One of the most common tasks when working with arrays is adding new elements. In this article, we will cover how to add elements to the start of an array in JavaScript.

Understanding Arrays in JavaScript

In JavaScript, arrays are created by using square brackets []. Elements can be added to an array using the push() method or the unshift() method. The push() method adds features to the end of an array, while the unshift() method adds elements to the start of an array.

				
					let fruits = ['apple', 'banana'];

fruits.push('mango');
console.log(fruits); // Output: ['apple', 'banana', 'mango']

fruits.unshift('peach');
console.log(fruits); // Output: ['peach', 'apple', 'banana', 'mango']

Adding Elements to the Start of an Array using unshift()

Another way to add elements to the start of an array is to use the spread operator. The spread operator is represented by three dots (…). It allows us to spread the elements of an array into a new array.

				
					let fruits = ['apple', 'banana'];
let newFruits = ['peach', ...fruits];
console.log(newFruits); // Output: ['peach', 'apple', 'banana']

Adding Elements to the Start of an Array using Array Concatenation

Another way to add elements to the start of an array is to use array concatenation. Array concatenation is the process of combining two arrays into a single array.

				
					let fruits = ['apple', 'banana'];
let newFruits = ['peach'].concat(fruits);
console.log(newFruits); // Output: ['peach', 'apple', 'banana']

In the above example, we have created two arrays: ‘fruits’ and ‘newFruits’. The ‘fruits’ array contains two elements, and the ‘newFruits’ array is created by concatenating the element ‘peach’ and the ‘fruits’ array. The output shows that the element ‘peach’ has been added to the start of the ‘newFruits’ array, and the order of the elements has changed accordingly.

Adding Elements to the Start of an Array using Array Destructuring

Array destructuring is a feature in JavaScript that allows us to extract values from arrays and assign them to individual variables. This feature can also be used to add elements to the start of an array.

				
					let fruits = ['apple', 'banana'];
let newFruits = ['peach', ...fruits];
[fruits[0], ...newFruits] = newFruits;
console.log(fruits); // Output: ['peach', 'apple', 'banana']

In the above example, we have created two arrays: ‘fruits’ and ‘newFruits’. The ‘fruits’ array contains two elements, and the ‘newFruits’ array contains the element ‘peach’ and all the elements of the ‘fruits’ array. Then, using array destructuring, we have assigned the elements of the ‘newFruits’ array to the ‘fruits’ array. The output shows that the elements of the ‘newFruits’ array have been added to the start of the ‘fruits’ array, and the order of the elements has changed accordingly.

In this article, we have covered four ways to add elements to the start of an array in JavaScript: using the unshift() method, using the spread operator, using array concatenation, and using array destructuring. Each method has its advantages and disadvantages, and the choice of method depends on the specific requirements of your project. However, regardless of which way you choose, the result is the same: a new element has been added to the start of an array, and the order of the elements has changed accordingly.


Thanks for reading. Happy coding!