There are various methods to add an element to the beginning of an array in JavaScript. Each method has its unique benefits, drawbacks, and use cases. This article will discuss all possible methods to prepend an element to an array, including their syntax, examples, and applicable use cases.
1. Using the unshift() Method
The unshift() method is the most straightforward way to add one or more elements to the beginning of an array. It modifies the original array.
Syntax
array.unshift(element1, element2, ..., elementN);Example
let arr = [10, 20, 30, 40, 50];
arr.unshift(5);
console.log(arr); // Output: [ 5, 10, 20, 30, 40, 50 ]Features
- Time Complexity: O(n) (because elements are shifted).
- Modifies Original Array: Yes.
2. Using the Spread Operator (...)
The spread operator can create a new array by spreading the original array’s elements and placing the new element at the start.
Syntax
let newArray = [element, ...array];Example
let arr = [10, 20, 30, 40, 50];
let updatedArr = [5, ...arr];
console.log(updatedArr); // Output: [ 5, 10, 20, 30, 40, 50 ]Features
- Time Complexity: O(n).
- Modifies Original Array: No.
3. Using the concat() Method
The concat() method combines two or more arrays and/or values into a new array. It doesn’t modify the original array.
Syntax
let newArray = [].concat(element, array);Example
let arr = [ 10, 20, 30, 40, 50 ];
let updatedArr = [].concat(5, arr);
console.log(updatedArr); // Output: [ 5, 10, 20, 30, 40, 50 ]Features
- Time Complexity: O(n).
- Modifies Original Array: No.
4. Using Array Indexing
You can manually shift elements and assign a value to the first index of the array.
Syntax
for (let i = array.length; i > 0; i--) {
array[i] = array[i - 1];
}
array[0] = element;Example
let arr = [ 10, 20, 30, 40, 50 ];
let newElement = 5;
for (let i = arr.length; i > 0; i--) {
arr[i] = arr[i - 1];
}
arr[0] = newElement;
console.log(arr); // Output: [ 5, 10, 20, 30, 40, 50 ]
Features:
- Time Complexity: O(n).
- Modifies Original Array: Yes.
5. Using the splice() Method
The splice() method can insert elements into any position in the array. To add an element to the beginning, set the starting index to 0.
Syntax
array.splice(start, deleteCount, item1, item2, ..., itemN);Example
let arr = [ 10, 20, 30, 40, 50 ];
arr.splice(0, 0, 5);
console.log(arr); // Output: [ 5, 10, 20, 30, 40, 50 ]Features:
- Time Complexity: O(n).
- Modifies Original Array: Yes.
Handling Edge Cases
Adding Multiple Elements
Some methods, like unshift() and concat(), can handle multiple elements simultaneously.
Example
let arr = [ 30, 40, 50 ];
arr.unshift(10, 20);
console.log(arr); // Output: [ 10, 20, 30, 40, 50 ]
Adding to an Empty Array
All methods work seamlessly with empty arrays.
let emptyArray = [];
emptyArray.unshift(10);
console.log(emptyArray); // Output: [ 10 ]Adding Non-Primitive Elements
Objects, arrays, and functions can also be added.
let items = [1, 2];
items.unshift([3, 4]);
console.log(items); // Output: [[3, 4], 1, 2]