How can I add new array elements at the beginning of an array in JavaScript?

Question

I have a need to add or prepend elements at the beginning of an array.

For example, if my array looks like below:

[23, 45, 12, 67]

And the response from my AJAX call is 34, I want the updated array to be like the following:

[34, 23, 45, 12, 67]

Currently I am planning to do it like this:

var newArray = [];
newArray.push(response);
for (var i = 0; i < theArray.length; i++) {
 newArray.push(theArray[i]);
}
theArray = newArray;
delete newArray;

Is there a better way to do this? Does JavaScript have any built-in functionality that does this?

The complexity of my method is O(n) and it would be really interesting to see better implementations.

• Krisztián Balla: FYI: If you need to continuously insert an element at the beginning of an array, it is faster to use push statements followed by a call to reverse, instead of calling unshift all the time.
• rob: @JennyO'Reilly you should post this as an answer. Matched my use-case perfectly. thanks
• Avernikoz: Performance tests: jsperf.com/adding-element-to-the-array-start But the results are different for each browser.

Answer 1

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 array
• shift/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);

• user5900250: Using concat might be preferable as it returns the new array. Very useful for chaining. [thingToInsertToFront].concat(originalArray).reduce(fn).reverse().map(fn) etc... If you use unshift, you can't do that chaining because all you get back is the length.
• linuxunil: shift/unshift, push/pop, splice. Very logical names for such methods.

Answer 2

array operations image

var a = [23, 45, 12, 67];
a.unshift(34);
console.log(a); // [34, 23, 45, 12, 67]

• Pascal: The reason why people need a visual guideline for 4 everyday used functions is because of the encrypted function names... Why is unshift not called Insert? Shift should be Remove. etc...
• dreftymac: //Why is unshift not called Insert?// It comes from the conventions of the C programming language where array elements were treated like a stack. (see perlmonks.org/?node_id=613129 for a complete explanation)
• user229044: @Pascal No, insert and remove would be particularly bad names for this; they imply random access, instead of adding/removing from the front of the array
• Shannon Hochkins: I would have thought that unshift should remove the first key, and shift would insert at the first key, but that's just my general thought
• vsync: Mind that [23, 45, 12, 67].unshift(34) will not work. The Array must first be saved inside a variable, because unshift itself returns a value.

Answer 3

With ES6, use the spread operator ...:

Demo

var arr = [23, 45, 12, 67];
arr = [34, ...arr]; // RESULT : [34, 23, 45, 12, 67]
console.log(arr)

• devonj: also creates a new array, useful for pure functions
• Peter T.: what is the performance implication here? Is it slower than using unshift()?
• Abdennour TOUMI: Sure, it will be slower since it is an immutable array ( creating a new array). If you are working with a big array or the performance is your first requirement, please consider to use concat instead.
• Flimm: @AbdennourTOUMI Just to clarify your comment. It is not creating an immutable array, it is just creating a new array without mutating the existing one.
• John Weisz: @stackdave Of course performance is important in 2018 (2022). It may not be important in your todo app or webshop UI with 20 elements, but it's important in my graphics editor with 500 MB typed arrays.

Answer 4

Another way to do that is through concat:

var arr = [1, 2, 3, 4, 5, 6, 7];
console.log([0].concat(arr));

The difference between concat and unshift is that concat returns a new array. The performance between them could be found here.

function fn_unshift() {
 arr.unshift(0);
 return arr;
}
function fn_concat_init() {
 return [0].concat(arr)
}

Here is the test result:

Enter image description here

• Ivan De Paz Centeno: It would be good for your answer to append the performance comparison of both apart from adding the reference.
• Tigger: I just got jsPerf is temporarily unavailable while we’re working on releasing v2. Please try again later from the link. Another good reason to include the results instead of linking to them.
• Illuminator: jsPref result: unshift: 25,510 ±3.18% 99% slower concat: 2,436,894 ±3.39% fastest
• passatgt: In the latest Safari, fn_unshift() runs faster.
• rmcsharry: In the latest Safari (v 10), fn_unshift() is slower again.

Answer 5

Quick Cheatsheet:

The terms shift/unshift and push/pop can be a bit confusing, at least to folks who may not be familiar with programming in C.

If you are not familiar with the lingo, here is a quick translation of alternate terms, which may be easier to remember:

* array_unshift() - (aka Prepend ;; InsertBefore ;; InsertAtBegin ) 
* array_shift() - (aka UnPrepend ;; RemoveBefore ;; RemoveFromBegin )
* array_push() - (aka Append ;; InsertAfter ;; InsertAtEnd ) 
* array_pop() - (aka UnAppend ;; RemoveAfter ;; RemoveFromEnd ) 

Answer 6

Using ES6 destructuring (avoiding mutation off the original array):

const newArr = [item, ...oldArr]

• Jerry: Essentially a duplicate answer of the one by Abdennour TOUMI...
• ABaumstumpf: Don't. Spread-operator and creating a new array gets slow really fast.

Answer 7

You have an array: var arr = [23, 45, 12, 67];

To add an item to the beginning, you want to use splice:

var arr = [23, 45, 12, 67];
arr.splice(0, 0, 34)
console.log(arr);

• Lior Elrom: arr.splice(0, arr.length, 34)
• Janus Troelsen: @LiorElrom what does your snippet do?
• Juraj: @poushy it's browser specific, in Firefox 54 is unshift 50% faster (but mostly more readable)
• Andrew: @poushy Not anymore. Way slower.

Answer 8

Without Mutating

Actually, all unshift/push and shift/pop mutate the source array.

The unshift/push add an item to the existed array from begin/end and shift/pop remove an item from the beginning/end of an array.

But there are few ways to add items to an array without a mutation. the result is a new array, to add to the end of array use below code:

const originArray = ['one', 'two', 'three'];
const newItem = 4;
const newArray = originArray.concat(newItem); // ES5
const newArray2 = [...originArray, newItem]; // ES6+

To add to begin of original array use below code:

const originArray = ['one', 'two', 'three'];
const newItem = 0;
const newArray = (originArray.slice().reverse().concat(newItem)).reverse(); // ES5
const newArray2 = [newItem, ...originArray]; // ES6+

With the above way, you add to the beginning/end of an array without a mutation.

• Ahmad Khani: I just put an slice function at the end of originArray to prevent it from mutability.
• Pedro Ferreira: Awesome! When comes to (Redux) State management... this answer is precious!
• Bat: [newItem, ...originArray]; // ES6+ Is great syntax ! Worked perfect !! thanks.

Answer 9

Cheatsheet to prepend new element(s) into the array

1. Array#unshift

const list = [23, 45, 12, 67];
list.unshift(34);
console.log(list); // [34, 23, 45, 12, 67];

2. Array#splice

const list = [23, 45, 12, 67];
list.splice(0, 0, 34);
console.log(list); // [34, 23, 45, 12, 67];

3. ES6 spread...

const list = [23, 45, 12, 67];
const newList = [34, ...list];
console.log(newList); // [34, 23, 45, 12, 67];

4. Array#concat

const list = [23, 45, 12, 67];
const newList = [32].concat(list);
console.log(newList); // [34, 23, 45, 12, 67];

Note: In each of these examples, you can prepend multiple items by providing more items to insert.

Answer 10

If you need to continuously insert an element at the beginning of an array, it is faster to use push statements followed by a call to reverse, instead of calling unshift all the time.

Benchmark test: http://jsben.ch/kLIYf

• 192kb: Note: initial array should be empty.
• Olly Hodgson: In 2021 your benchmark shows a comprehensive win for unshift across all major desktop browsers (at least on this Mac).
• Krisztián Balla: @OllyHodgson testing on Ubuntu Linux with Firefox: reverse solution is 3-times faster.

Answer 11

Using splice we insert an element to an array at the begnning:

arrName.splice( 0, 0, 'newName1' );

Answer 12

If you want to push elements that are in an array at the beginning of your array, use <func>.apply(<this>, <Array of args>):

const arr = [1, 2];
arr.unshift.apply(arr, [3, 4]);
console.log(arr); // [3, 4, 1, 2]