Use unshift. It's like push, except it adds elements to the beginning of the array instead of the end.
unshift/push- add an element to the beginning/end of an arrayshift/pop- remove and return the first/last element of an array
A simple diagram...
unshift -> [array] <- push
shift <- [array] -> pop
and chart:
| add | remove | start | end | |
|---|---|---|---|---|
push |
X | X | ||
pop |
X | X | ||
unshift |
X | X | ||
shift |
X | X |
Check out the MDN Array documentation. Virtually every language that has the ability to push/pop elements from an array will also have the ability to unshift/shift (sometimes called push_front/pop_front) elements, you should never have to implement these yourself.
As pointed out in the comments, if you want to avoid mutating your original array, you can use concat, which concatenates two or more arrays together. You can use this to functionally push a single element onto the front or back of an existing array; to do so, you need to turn the new element into a single element array:
const array = [3, 2, 1]
const newFirstElement = 4
const newArray = [newFirstElement].concat(array) // [ 4, 3, 2, 1 ]
console.log(newArray);concat can also append items. The arguments to concat can be of any type; they are implicitly wrapped in a single-element array, if they are not already an array:
const array = [3, 2, 1]
const newLastElement = 0
// Both of these lines are equivalent:
const newArray1 = array.concat(newLastElement) // [ 3, 2, 1, 0 ]
const newArray2 = array.concat([newLastElement]) // [ 3, 2, 1, 0 ]
console.log(newArray1);
console.log(newArray2);Use unshift. It's like push, except it adds elements to the beginning of the array instead of the end.
unshift/push- add an element to the beginning/end of an arrayshift/pop- remove and return the first/last element of an array
A simple diagram...
unshift -> [array] <- push
shift <- [array] -> pop
and chart:
| add | remove | start | end | |
|---|---|---|---|---|
push |
X | X | ||
pop |
X | X | ||
unshift |
X | X | ||
shift |
X | X |
Check out the MDN Array documentation. Virtually every language that has the ability to push/pop elements from an array will also have the ability to unshift/shift (sometimes called push_front/pop_front) elements, you should never have to implement these yourself.
As pointed out in the comments, if you want to avoid mutating your original array, you can use concat, which concatenates two or more arrays together. You can use this to functionally push a single element onto the front or back of an existing array; to do so, you need to turn the new element into a single element array:
const array = [3, 2, 1]
const newFirstElement = 4
const newArray = [newFirstElement].concat(array) // [ 4, 3, 2, 1 ]
console.log(newArray);concat can also append items. The arguments to concat can be of any type; they are implicitly wrapped in a single-element array, if they are not already an array:
const array = [3, 2, 1]
const newLastElement = 0
// Both of these lines are equivalent:
const newArray1 = array.concat(newLastElement) // [ 3, 2, 1, 0 ]
const newArray2 = array.concat([newLastElement]) // [ 3, 2, 1, 0 ]
console.log(newArray1);
console.log(newArray2);
var a = [23, 45, 12, 67];
a.unshift(34);
console.log(a); // [34, 23, 45, 12, 67]Videos
What is the fastest way to add an element to the beginning of a JavaScript array?
Does unshift() modify the original array?
What is the difference between push() and unshift()?
Arrays are a crucial part of any programming language, and JavaScript is no exception. Arrays are an ordered collection of data that can be manipulated using various methods available in JavaScript. One of the most common operations when working with arrays is adding new elements to an array. In this article, we will discuss how to add new array elements at the beginning of an array in JavaScript.
Adding Elements to the Beginning of an Array in JavaScript
In JavaScript, the unshift()method is used to add elements to the beginning of an array. This method adds one or more elements to the beginning of an array and returns the new length of the array.
Syntax: array.unshift(element1, element2, ..., elementX)
Here, element1, element2, ..., elementX are the elements that we want to add to the beginning of the array.
Example:
const fruits = ['apple', 'banana', 'mango']; fruits.unshift('orange'); console.log(fruits); // Output: ['orange', 'apple', 'banana', 'mango'] In the above example, we have created an array of fruits and added a new fruit 'orange' at the beginning of the array using the unshift()method.
We can also add multiple elements to the beginning of the array using the unshift() method.
Example:
const fruits = ['apple', 'banana', 'mango'];
fruits.unshift('orange', 'papaya', 'kiwi'); console.log(fruits);
// Output: ['orange', 'papaya', 'kiwi', 'apple', 'banana', 'mango'] In this example, we have added three new fruits to the beginning of the array using the unshift() method.
Advantages of using unshift()
The unshift() method is useful in situations where we want to add elements to the beginning of an array without overwriting or removing any existing elements. It is also an efficient method as it returns the new length of the array after adding elements, making it easy to keep track of the array's length.
Conclusion
In conclusion, adding new elements to the beginning of an array in JavaScript is a straightforward process using the unshift() method. This method is efficient and returns the new length of the array after adding elements. By using this method, we can easily manipulate and modify arrays to suit our needs.
Use unshift, which modifies the existing array by adding the arguments to the beginning:
TheArray.unshift(TheNewObject);
Use .unshift() to add to the beginning of an array.
TheArray.unshift(TheNewObject);
See MDN for doc on unshift() and here for doc on other array methods.
FYI, just like there's .push() and .pop() for the end of the array, there's .shift() and .unshift() for the beginning of the array.
let array = ["somevalue", "anothervalue"]
let foo = {bar: true}
array.unshift(foo);
console.log(array); // prints [{bar: true}, "somevalue", "anothervalue"]
Similarly, the shift() method removes the first item in the array.
It simply append the foo in front of array. so array will become
[{bar: true}, "somevalue", "anothervalue"]
Alternate :
You can also use unshift, it also append data at index 0, eg.
let array = [2, 3, 4]
array.unshift(1)
console.log(array) /// output : [1, 2, 3, 4]