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

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);

---

https://i.stack.imgur.com/1pQk8.jpg

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

---

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)

---

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:

https://i.stack.imgur.com/f5u3L.png

---

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 ) 

---

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

const newArr = [item, ...oldArr]

---

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.

---

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);

---

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.

---

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

---

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

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

---

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]

---

There are a couple of ways to achieve this:

Using shift (mutable)

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

Using ES6 destructuring (immutable)

const num = 1; const arr = [2, 3]; const newArr = [num, ...arr]; console.log(newArr);

Using Array.prototype.concat (immutable)

const num = 1; const arr = [2, 3]; const newArr = [num].concat(arr); console.log(newArr);

---

let arr = [5, 6]; // using unshift arr.unshift(4); console.log('arr : ', arr); // using spread operator arr = [3, ...arr]; console.log('arr : ', arr); // using concat arr = [2].concat(arr); console.log('arr : ', arr); // using splice arr.splice(0, 0, 1) console.log('arr : ', arr);

---