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  lt  theArray length  i          newArray push theArray i       theArray   newArray  delete newArray    Is there any 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

User · Answer

Cheatsheet to prepend new element s  into the array 1  Array unshift  x000D   x000D  const list    23  45  12  67    list unshift 34    console log list       34  23  45  12  67   x000D   x000D   x000D   2  Array splice  x000D   x000D  const list    23  45  12  67    list splice 0  0  34    console log list       34  23  45  12  67   x000D   x000D   x000D   3  ES6 spread     x000D   x000D  const list    23  45  12  67   const newList    34     list    console log newList       34  23  45  12  67   x000D   x000D   x000D   4  Array concat  x000D   x000D  const list    23  45  12  67   const newList    32  concat list    console log newList       34  23  45  12  67   x000D   x000D   x000D   Note  In each of these examples  you can prepend multiple items by providing more items to insert

User · Answer

you can reverse your array and push the data   at the end again reverse it  var arr  2 3 4 5 6   var arr2 1  arr reverse       6 5 4 3 2  arr push arr2

User · Answer

If you want to push elements that are in a array at the beginning of you array use  lt func gt  apply  lt this gt    lt Array of args gt      x000D   x000D  const arr    1  2   arr unshift apply arr   3  4    console log arr       3  4  1  2  x000D   x000D   x000D

User · Answer

Using ES6 destructuring   avoiding mutation off the original array   const newArr    item     oldArr

User · Answer

With ES6   use the spread operator       DEMO  x000D   x000D  var arr    23  45  12  67   arr    34     arr      RESULT    34 23  45  12  67   console log arr  x000D   x000D   x000D

User · Answer

you have an array   var arr    23  45  12  67    To add an item to the beginning  you want to use splice    x000D   x000D  var arr    23  45  12  67   x000D  arr splice 0  0  34  x000D  console log arr   x000D   x000D   x000D

User · Answer

you can first reverse array and then add elem to array then reverse back it  const arr    2 3 4 5 6   const arr2   1  arr reverse       6 5 4 3 2  arr push arr2    console log arr reverse         1 2 3 4 5 6   good lock ali alizadeh

User · Answer

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 - gt  array  lt - push    shift    lt - array - gt  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   x000D   x000D  const array    3  2  1   const newFirstElement   4  const newArray    newFirstElement  concat array       4  3  2  1    console log newArray   x000D   x000D   x000D   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   x000D   x000D  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   x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

Another way to do that through concat   x000D   x000D  var arr    1  2  3  4  5  6  7   x000D  console log  0  concat arr    x000D   x000D   x000D    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

User · Answer

Using splice we insert an element to an array at the begnning   arrName splice  0  0   newName1

User · Answer

x000D   x000D  var a    23  45  12  67   x000D  a unshift 34   x000D  console log a       34  23  45  12  67  x000D   x000D   x000D

User · Answer

Without Mutate Actually  all unshift push and shift pop mutate the origin 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

[javascript] How can I add new array elements at the beginning of an array in Javascript?

Examples related to javascript

Examples related to arrays