[javascript] How to append something to an array?

How do I append an object (such as a string or number) to an array in JavaScript?

This question is related to javascript arrays append

The answer is


you can do it using new javascript Es 6 feature :

// initialize array

var arr = [
    "Hi",
    "Hello",
    "Bangladesh"
];

// append new value to the array

arr= [...arr , "Feni"];

// or you can put a variable value

var testValue = "Cool";

arr = [...arr , testValue ];

console.log(arr); 

// final output  [ 'Hi', 'Hello', 'Bangladesh', 'Feni', 'Cool' ]

If arr is an array, and val is the value you wish to add use:

arr.push(val);

E.g.

_x000D_
_x000D_
var arr = ['a', 'b', 'c'];_x000D_
arr.push('d');_x000D_
console.log(arr);
_x000D_
_x000D_
_x000D_


Let the array length property do the work:

myarray[myarray.length] = 'new element value added to the end of the array';

myarray.length returns the number of strings in the array. JS is zero based so the next element key of the array will be the current length of the array. EX:

var myarray = [0, 1, 2, 3],
    myarrayLength = myarray.length; //myarrayLength is set to 4

Append a single item

To append a single item to an array, use the push() method provided by the Array object:

const fruits = ['banana', 'pear', 'apple']
fruits.push('mango')
console.log(fruits)

push() mutates the original array.

To create a new array instead, use the concat() Array method:

const fruits = ['banana', 'pear', 'apple']
const allfruits = fruits.concat('mango')
console.log(allfruits)

Notice that concat() does not actually add an item to the array, but creates a new array, which you can assign to another variable, or reassign to the original array (declaring it as let, as you cannot reassign a const):

const fruits = ['banana', 'pear', 'apple']
const allfruits = fruits.concat('mango')
console.log(allfruits)
let fruits = ['banana', 'pear', 'apple']
fruits = fruits.concat('mango')

Append multiple items

To append a multiple item to an array, you can use push() by calling it with multiple arguments:

const fruits = ['banana', 'pear', 'apple']
fruits.push('mango', 'melon', 'avocado')
console.log(fruits)

You can also use the concat() method you saw before, passing a list of items separated by a comma:

const fruits = ['banana', 'pear', 'apple']
const allfruits = fruits.concat('mango', 'melon', 'avocado')
console.log(allfruits)

or an array:

const fruits = ['banana', 'pear', 'apple']
const allfruits = fruits.concat(['mango', 'melon', 'avocado'])
console.log(allfruits)

Remember that as described previously this method does not mutate the original array, but it returns a new array.

Originally posted at


Some quick benchmarking (each test = 500k appended elements and the results are averages of multiple runs) showed the following:

Firefox 3.6 (Mac):

  • Small arrays: arr[arr.length] = b is faster (300ms vs. 800ms)
  • Large arrays: arr.push(b) is faster (500ms vs. 900ms)

Safari 5.0 (Mac):

  • Small arrays: arr[arr.length] = b is faster (90ms vs. 115ms)
  • Large arrays: arr[arr.length] = b is faster (160ms vs. 185ms)

Google Chrome 6.0 (Mac):

  • Small arrays: No significant difference (and Chrome is FAST! Only ~38ms !!)
  • Large arrays: No significant difference (160ms)

I like the arr.push() syntax better, but I think I'd be better off with the arr[arr.length] Version, at least in raw speed. I'd love to see the results of an IE run though.


My benchmarking loops:

function arrpush_small() {
    var arr1 = [];
    for (a = 0; a < 100; a++)
    {
        arr1 = [];
        for (i = 0; i < 5000; i++)
        {
            arr1.push('elem' + i);
        }
    }
}

function arrlen_small() {
    var arr2 = [];
    for (b = 0; b < 100; b++)
    {
        arr2 = [];
        for (j = 0; j < 5000; j++)
        {
            arr2[arr2.length] = 'elem' + j;
        }
    }
}


function arrpush_large() {
    var arr1 = [];
    for (i = 0; i < 500000; i++)
    {
        arr1.push('elem' + i);
    }
}

function arrlen_large() {
    var arr2 = [];
    for (j = 0; j < 500000; j++)
    {
        arr2[arr2.length] = 'elem' + j;
    }
}

You can use push and apply function to append two arrays.

_x000D_
_x000D_
var array1 = [11, 32, 75];_x000D_
var array2 = [99, 67, 34];_x000D_
_x000D_
Array.prototype.push.apply(array1, array2);_x000D_
console.log(array1);
_x000D_
_x000D_
_x000D_

It will append array2 to array1. Now array1 contains [11, 32, 75, 99, 67, 34]. This code is much simpler than writing for loops to copy each and every items in the array.


If you're only appending a single variable, then push() works just fine. If you need to append another array, use concat():

_x000D_
_x000D_
var ar1 = [1, 2, 3];_x000D_
var ar2 = [4, 5, 6];_x000D_
_x000D_
var ar3 = ar1.concat(ar2);_x000D_
_x000D_
alert(ar1);_x000D_
alert(ar2);_x000D_
alert(ar3);
_x000D_
_x000D_
_x000D_

The concat does not affect ar1 and ar2 unless reassigned, for example:

_x000D_
_x000D_
var ar1 = [1, 2, 3];_x000D_
var ar2 = [4, 5, 6];_x000D_
_x000D_
ar1 = ar1.concat(ar2);_x000D_
alert(ar1);
_x000D_
_x000D_
_x000D_

Lots of great info here.


You can use push method.

Array.prototype.append = function(destArray){
     destArray = destArray || [];
     this.push.call(this,...destArray);
     return this;
}
var arr = [1,2,5,67];
var arr1 = [7,4,7,8];
console.log(arr.append(arr1));// [7, 4, 7, 8, 1, 4, 5, 67, 7]
console.log(arr.append("Hola"))//[1, 2, 5, 67, 7, 4, 7, 8, "H", "o", "l", "a"]

Append Single Element

//Append to the end
arrName.push('newName1');

//Prepend to the start
arrName.unshift('newName1');

//Insert at index 1
arrName.splice(1, 0,'newName1');
//1: index number, 0: number of element to remove, newName1: new element


// Replace index 3 (of exists), add new element otherwise.
arrName[3] = 'newName1';

Append Multiple Elements

//Insert from index number 1
arrName.splice(1, 0,'newElemenet1', 'newElemenet2', 'newElemenet3');
//1: index number from where insert starts, 
//0: number of element to remove, 
//newElemenet1,2,3: new elements

Append array

//join two or more arrays
arrName.concat(newAry1, newAry2);
//newAry1,newAry2: Two different arrays which are to be combined (concatenated) to an existing array

We don't have append function for Array in javascript, but we have push and unshift, imagine you have the array below:

var arr = [1, 2, 3, 4, 5];

and we like append a value to this array, we can do, arr.push(6) and it will add 6 to the end of the array:

arr.push(6); // return [1, 2, 3, 4, 5, 6];

also we can use unshift, look at how we can apply this:

arr.unshift(0); //return [0, 1, 2, 3, 4, 5];

They are main functions to add or append new values to the arrays.


concat(), of course, can be used with 2 dimensional arrays as well. No looping required.

var a = [ [1, 2], [3, 4] ];

var b = [ ["a", "b"], ["c", "d"] ];

b = b.concat(a);

alert(b[2][1]); // result 2


The push() method adds new items to the end of an array, and returns the new length. Example:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

// The result of fruits will be:
Banana, Orange, Apple, Mango, Kiwi

The exact answer to your question is already answered, but let's look at some other ways to add items to an array.

The unshift() method adds new items to the beginning of an array, and returns the new length. Example:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon", "Pineapple");

// The result of fruits will be:
Lemon, Pineapple, Banana, Orange, Apple, Mango

And lastly, the concat() method is used to join two or more arrays. Example:

var fruits = ["Banana", "Orange"];
var moreFruits = ["Apple", "Mango", "Lemon"];
var allFruits = fruits.concat(moreFruits);

// The values of the children array will be:
Banana, Orange, Apple, Mango, Lemon

Javascript with ECMAScript 5 standard which is supported by most browsers now, you can use apply() to append array1 to array2.

var array1 = [3, 4, 5];
var array2 = [1, 2];

Array.prototype.push.apply(array2, array1);

console.log(array2); // [1, 2, 3, 4, 5]

Javascript with ECMAScript 6 standard which is supported by Chrome and FF and IE Edge, you can use the spread operator:

"use strict";
let array1 = [3, 4, 5];
let array2 = [1, 2];

array2.push(...array1);

console.log(array2); // [1, 2, 3, 4, 5]

The spread operator will replace array2.push(...array1); with array2.push(3, 4, 5); when the browser is thinking the logic.

Bonus point

If you'd like to create another variable to store all the items from both array, you can do this:

ES5 var combinedArray = array1.concat(array2);

ES6 const combinedArray = [...array1, ...array2]

The spread operator (...) is to spread out all items from a collection.


With the new ES6 spread operator, joining two arrays using push becomes even easier:

_x000D_
_x000D_
var arr = [1, 2, 3, 4, 5];_x000D_
var arr2 = [6, 7, 8, 9, 10];_x000D_
arr.push(...arr2);_x000D_
console.log(arr);
_x000D_
_x000D_
_x000D_

This adds the contents of arr2 onto the end of arr.

Babel REPL Example


push() adds a new element to the end of an array.
pop() removes an element from the end of an array.

To append an object (such as a string or number) to an array use -
array.push(toAppend);


The push() method adds new items to the end of an array, and returns the new length. Example:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

// The result of fruits will be:
Banana, Orange, Apple, Mango, Kiwi

The exact answer to your question is already answered, but let's look at some other ways to add items to an array.

The unshift() method adds new items to the beginning of an array, and returns the new length. Example:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon", "Pineapple");

// The result of fruits will be:
Lemon, Pineapple, Banana, Orange, Apple, Mango

And lastly, the concat() method is used to join two or more arrays. Example:

var fruits = ["Banana", "Orange"];
var moreFruits = ["Apple", "Mango", "Lemon"];
var allFruits = fruits.concat(moreFruits);

// The values of the children array will be:
Banana, Orange, Apple, Mango, Lemon

Javascript with ECMAScript 5 standard which is supported by most browsers now, you can use apply() to append array1 to array2.

var array1 = [3, 4, 5];
var array2 = [1, 2];

Array.prototype.push.apply(array2, array1);

console.log(array2); // [1, 2, 3, 4, 5]

Javascript with ECMAScript 6 standard which is supported by Chrome and FF and IE Edge, you can use the spread operator:

"use strict";
let array1 = [3, 4, 5];
let array2 = [1, 2];

array2.push(...array1);

console.log(array2); // [1, 2, 3, 4, 5]

The spread operator will replace array2.push(...array1); with array2.push(3, 4, 5); when the browser is thinking the logic.

Bonus point

If you'd like to create another variable to store all the items from both array, you can do this:

ES5 var combinedArray = array1.concat(array2);

ES6 const combinedArray = [...array1, ...array2]

The spread operator (...) is to spread out all items from a collection.


if you want to combine 2 arrays without the duplicate you may try the code below

array_merge = function (arr1, arr2) {
  return arr1.concat(arr2.filter(function(item){
    return arr1.indexOf(item) < 0;
  }))
}

usage:

array1 = ['1', '2', '3']
array2 = ['2', '3', '4', '5']
combined_array = array_merge(array1, array2)

Output: [1,2,3,4,5]


There are a couple of ways to append an array in JavaScript:

1) The push() method adds one or more elements to the end of an array and returns the new length of the array.

var a = [1, 2, 3];
a.push(4, 5);
console.log(a);

Output:

[1, 2, 3, 4, 5]

2) The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array:

var a = [1, 2, 3];
a.unshift(4, 5);
console.log(a); 

Output:

[4, 5, 1, 2, 3]

3) The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

var arr1 = ["a", "b", "c"];
var arr2 = ["d", "e", "f"];
var arr3 = arr1.concat(arr2);
console.log(arr3);

Output:

[ "a", "b", "c", "d", "e", "f" ]

4) You can use the array's .length property to add an element to the end of the array:

var ar = ['one', 'two', 'three'];
ar[ar.length] = 'four';
console.log( ar ); 

Output:

 ["one", "two", "three", "four"]

5) The splice() method changes the content of an array by removing existing elements and/or adding new elements:

var myFish = ["angel", "clown", "mandarin", "surgeon"];
myFish.splice(4, 0, "nemo");
//array.splice(start, deleteCount, item1, item2, ...)
console.log(myFish);

Output:

["angel", "clown", "mandarin", "surgeon","nemo"]

6) You can also add a new element to an array simply by specifying a new index and assigning a value:

var ar = ['one', 'two', 'three'];
ar[3] = 'four'; // add new element to ar
console.log(ar);

Output:

["one", "two","three","four"]

if you want to combine 2 arrays without the duplicate you may try the code below

array_merge = function (arr1, arr2) {
  return arr1.concat(arr2.filter(function(item){
    return arr1.indexOf(item) < 0;
  }))
}

usage:

array1 = ['1', '2', '3']
array2 = ['2', '3', '4', '5']
combined_array = array_merge(array1, array2)

Output: [1,2,3,4,5]


There are a couple of ways to append an array in JavaScript:

1) The push() method adds one or more elements to the end of an array and returns the new length of the array.

var a = [1, 2, 3];
a.push(4, 5);
console.log(a);

Output:

[1, 2, 3, 4, 5]

2) The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array:

var a = [1, 2, 3];
a.unshift(4, 5);
console.log(a); 

Output:

[4, 5, 1, 2, 3]

3) The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

var arr1 = ["a", "b", "c"];
var arr2 = ["d", "e", "f"];
var arr3 = arr1.concat(arr2);
console.log(arr3);

Output:

[ "a", "b", "c", "d", "e", "f" ]

4) You can use the array's .length property to add an element to the end of the array:

var ar = ['one', 'two', 'three'];
ar[ar.length] = 'four';
console.log( ar ); 

Output:

 ["one", "two", "three", "four"]

5) The splice() method changes the content of an array by removing existing elements and/or adding new elements:

var myFish = ["angel", "clown", "mandarin", "surgeon"];
myFish.splice(4, 0, "nemo");
//array.splice(start, deleteCount, item1, item2, ...)
console.log(myFish);

Output:

["angel", "clown", "mandarin", "surgeon","nemo"]

6) You can also add a new element to an array simply by specifying a new index and assigning a value:

var ar = ['one', 'two', 'three'];
ar[3] = 'four'; // add new element to ar
console.log(ar);

Output:

["one", "two","three","four"]

If you're only appending a single variable, then push() works just fine. If you need to append another array, use concat():

_x000D_
_x000D_
var ar1 = [1, 2, 3];_x000D_
var ar2 = [4, 5, 6];_x000D_
_x000D_
var ar3 = ar1.concat(ar2);_x000D_
_x000D_
alert(ar1);_x000D_
alert(ar2);_x000D_
alert(ar3);
_x000D_
_x000D_
_x000D_

The concat does not affect ar1 and ar2 unless reassigned, for example:

_x000D_
_x000D_
var ar1 = [1, 2, 3];_x000D_
var ar2 = [4, 5, 6];_x000D_
_x000D_
ar1 = ar1.concat(ar2);_x000D_
alert(ar1);
_x000D_
_x000D_
_x000D_

Lots of great info here.


you can do it using new javascript Es 6 feature :

// initialize array

var arr = [
    "Hi",
    "Hello",
    "Bangladesh"
];

// append new value to the array

arr= [...arr , "Feni"];

// or you can put a variable value

var testValue = "Cool";

arr = [...arr , testValue ];

console.log(arr); 

// final output  [ 'Hi', 'Hello', 'Bangladesh', 'Feni', 'Cool' ]

I think it's worth mentioning that push can be called with multiple arguments, which will be appended to the array in order. For example:

_x000D_
_x000D_
var arr = ['first'];_x000D_
arr.push('second', 'third');_x000D_
console.log(arr);
_x000D_
_x000D_
_x000D_

As a result of this you can use push.apply to append an array to another array like so:

_x000D_
_x000D_
var arr = ['first'];_x000D_
arr.push('second', 'third');_x000D_
arr.push.apply(arr, ['forth', 'fifth']);_x000D_
console.log(arr);
_x000D_
_x000D_
_x000D_

Annotated ES5 has more info on exactly what push and apply do.

2016 update: with spread, you don't need that apply anymore, like:

_x000D_
_x000D_
var arr = ['first'];_x000D_
arr.push('second', 'third');_x000D_
_x000D_
arr.push(...['fourth', 'fifth']);_x000D_
console.log(arr) ;
_x000D_
_x000D_
_x000D_


If you want to append two arrays -

var a = ['a', 'b'];
var b = ['c', 'd'];

then you could use:

var c = a.concat(b);

And if you want to add record g to array (var a=[]) then you could use:

a.push('g');

If you know the highest index (such as stored in a variable "i") then you can do

myArray[i + 1] = someValue;

However if you don't know then you can either use

myArray.push(someValue);

as other answers suggested, or you can use

myArray[myArray.length] = someValue; 

Note that the array is zero based so .length return the highest index plus one.

Also note that you don't have to add in order and you can actually skip values, as in

myArray[myArray.length + 1000] = someValue;

In which case the values in between will have a value of undefined.

It is therefore a good practice when looping through a JavaScript to verify that a value actually exists at that point.

This can be done by something like the following:

if(myArray[i] === "undefined"){ continue; }

if you are certain that you don't have any zeros in the array then you can just do:

if(!myArray[i]){ continue; }

Of course make sure in this case that you don't use as the condition myArray[i] (as some people over the internet suggest based on the end that as soon as i is greater then the highest index it will return undefined which evaluates to false)


If you want to append a single value into an array, simply use the push method. It will add a new element at the end of the array.

But if you intend to add multiple elements then store the elements in a new array and concat the second array with the first array...either way you wish.

arr=['a','b','c'];
arr.push('d');
//now print the array in console.log and it will contain 'a','b','c','d' as elements.
console.log(array);

If you are using the ES6 you can use spread operator to do it.

var arr = [
    "apple",
    "banana",
    "cherry"
];

var arr2 = [
    "dragonfruit",
    "elderberry",
    "fig"
];

arr.push(...arr2);

Append a value to an array

Since Array.prototype.push adds one or more elements to the end of an array and returns the new length of the array, sometimes we want just to get the new up-to-date array so we can do something like so:

const arr = [1, 2, 3];
const val = 4;

arr.concat([val]); // [1, 2, 3, 4]

Or just:

[...arr, val] // [1, 2, 3, 4]

If you want to append two arrays -

var a = ['a', 'b'];
var b = ['c', 'd'];

then you could use:

var c = a.concat(b);

And if you want to add record g to array (var a=[]) then you could use:

a.push('g');

Just want to add a snippet for non-destructive addition of an element.

var newArr = oldArr.concat([newEl]);

You can use the push() if you want to add values e.g. arr.push("Test1", "Test2");

If you have array you can use concat() e.g. Array1.concat(Array2)

If you have just one element to add you can also try length menthod e.g. array[aray.length] = 'test';


With the new ES6 spread operator, joining two arrays using push becomes even easier:

_x000D_
_x000D_
var arr = [1, 2, 3, 4, 5];_x000D_
var arr2 = [6, 7, 8, 9, 10];_x000D_
arr.push(...arr2);_x000D_
console.log(arr);
_x000D_
_x000D_
_x000D_

This adds the contents of arr2 onto the end of arr.

Babel REPL Example


Use concat:

_x000D_
_x000D_
a = [1, 2, 3];_x000D_
b = [3, 4, 5];_x000D_
a = a.concat(b);_x000D_
console.log(a);
_x000D_
_x000D_
_x000D_


Appending items on an array

let fruits =["orange","banana","apple","lemon"]; /*array declaration*/

fruits.push("avacado"); /* Adding an element to the array*/

/*displaying elements of the array*/

for(var i=0; i < fruits.length; i++){
  console.log(fruits[i]);
}

We don't have append function for Array in javascript, but we have push and unshift, imagine you have the array below:

var arr = [1, 2, 3, 4, 5];

and we like append a value to this array, we can do, arr.push(6) and it will add 6 to the end of the array:

arr.push(6); // return [1, 2, 3, 4, 5, 6];

also we can use unshift, look at how we can apply this:

arr.unshift(0); //return [0, 1, 2, 3, 4, 5];

They are main functions to add or append new values to the arrays.


If you are using the ES6 you can use spread operator to do it.

var arr = [
    "apple",
    "banana",
    "cherry"
];

var arr2 = [
    "dragonfruit",
    "elderberry",
    "fig"
];

arr.push(...arr2);

Append a single item

To append a single item to an array, use the push() method provided by the Array object:

const fruits = ['banana', 'pear', 'apple']
fruits.push('mango')
console.log(fruits)

push() mutates the original array.

To create a new array instead, use the concat() Array method:

const fruits = ['banana', 'pear', 'apple']
const allfruits = fruits.concat('mango')
console.log(allfruits)

Notice that concat() does not actually add an item to the array, but creates a new array, which you can assign to another variable, or reassign to the original array (declaring it as let, as you cannot reassign a const):

const fruits = ['banana', 'pear', 'apple']
const allfruits = fruits.concat('mango')
console.log(allfruits)
let fruits = ['banana', 'pear', 'apple']
fruits = fruits.concat('mango')

Append multiple items

To append a multiple item to an array, you can use push() by calling it with multiple arguments:

const fruits = ['banana', 'pear', 'apple']
fruits.push('mango', 'melon', 'avocado')
console.log(fruits)

You can also use the concat() method you saw before, passing a list of items separated by a comma:

const fruits = ['banana', 'pear', 'apple']
const allfruits = fruits.concat('mango', 'melon', 'avocado')
console.log(allfruits)

or an array:

const fruits = ['banana', 'pear', 'apple']
const allfruits = fruits.concat(['mango', 'melon', 'avocado'])
console.log(allfruits)

Remember that as described previously this method does not mutate the original array, but it returns a new array.

Originally posted at


You .push() that value in. Example: array.push(value);


You can use push and apply function to append two arrays.

_x000D_
_x000D_
var array1 = [11, 32, 75];_x000D_
var array2 = [99, 67, 34];_x000D_
_x000D_
Array.prototype.push.apply(array1, array2);_x000D_
console.log(array1);
_x000D_
_x000D_
_x000D_

It will append array2 to array1. Now array1 contains [11, 32, 75, 99, 67, 34]. This code is much simpler than writing for loops to copy each and every items in the array.


I think it's worth mentioning that push can be called with multiple arguments, which will be appended to the array in order. For example:

_x000D_
_x000D_
var arr = ['first'];_x000D_
arr.push('second', 'third');_x000D_
console.log(arr);
_x000D_
_x000D_
_x000D_

As a result of this you can use push.apply to append an array to another array like so:

_x000D_
_x000D_
var arr = ['first'];_x000D_
arr.push('second', 'third');_x000D_
arr.push.apply(arr, ['forth', 'fifth']);_x000D_
console.log(arr);
_x000D_
_x000D_
_x000D_

Annotated ES5 has more info on exactly what push and apply do.

2016 update: with spread, you don't need that apply anymore, like:

_x000D_
_x000D_
var arr = ['first'];_x000D_
arr.push('second', 'third');_x000D_
_x000D_
arr.push(...['fourth', 'fifth']);_x000D_
console.log(arr) ;
_x000D_
_x000D_
_x000D_


You can use the push() if you want to add values e.g. arr.push("Test1", "Test2");

If you have array you can use concat() e.g. Array1.concat(Array2)

If you have just one element to add you can also try length menthod e.g. array[aray.length] = 'test';


Appending items on an array

let fruits =["orange","banana","apple","lemon"]; /*array declaration*/

fruits.push("avacado"); /* Adding an element to the array*/

/*displaying elements of the array*/

for(var i=0; i < fruits.length; i++){
  console.log(fruits[i]);
}

Some quick benchmarking (each test = 500k appended elements and the results are averages of multiple runs) showed the following:

Firefox 3.6 (Mac):

  • Small arrays: arr[arr.length] = b is faster (300ms vs. 800ms)
  • Large arrays: arr.push(b) is faster (500ms vs. 900ms)

Safari 5.0 (Mac):

  • Small arrays: arr[arr.length] = b is faster (90ms vs. 115ms)
  • Large arrays: arr[arr.length] = b is faster (160ms vs. 185ms)

Google Chrome 6.0 (Mac):

  • Small arrays: No significant difference (and Chrome is FAST! Only ~38ms !!)
  • Large arrays: No significant difference (160ms)

I like the arr.push() syntax better, but I think I'd be better off with the arr[arr.length] Version, at least in raw speed. I'd love to see the results of an IE run though.


My benchmarking loops:

function arrpush_small() {
    var arr1 = [];
    for (a = 0; a < 100; a++)
    {
        arr1 = [];
        for (i = 0; i < 5000; i++)
        {
            arr1.push('elem' + i);
        }
    }
}

function arrlen_small() {
    var arr2 = [];
    for (b = 0; b < 100; b++)
    {
        arr2 = [];
        for (j = 0; j < 5000; j++)
        {
            arr2[arr2.length] = 'elem' + j;
        }
    }
}


function arrpush_large() {
    var arr1 = [];
    for (i = 0; i < 500000; i++)
    {
        arr1.push('elem' + i);
    }
}

function arrlen_large() {
    var arr2 = [];
    for (j = 0; j < 500000; j++)
    {
        arr2[arr2.length] = 'elem' + j;
    }
}

Now, you can take advantage of ES6 syntax and just do:

let array = [1, 2];
console.log([...array, 3]);

keeping the original array immutable.


If you want to append a single value into an array, simply use the push method. It will add a new element at the end of the array.

But if you intend to add multiple elements then store the elements in a new array and concat the second array with the first array...either way you wish.

arr=['a','b','c'];
arr.push('d');
//now print the array in console.log and it will contain 'a','b','c','d' as elements.
console.log(array);

concat(), of course, can be used with 2 dimensional arrays as well. No looping required.

var a = [ [1, 2], [3, 4] ];

var b = [ ["a", "b"], ["c", "d"] ];

b = b.concat(a);

alert(b[2][1]); // result 2


If you're only appending a single variable, then push() works just fine. If you need to append another array, use concat():

_x000D_
_x000D_
var ar1 = [1, 2, 3];_x000D_
var ar2 = [4, 5, 6];_x000D_
_x000D_
var ar3 = ar1.concat(ar2);_x000D_
_x000D_
alert(ar1);_x000D_
alert(ar2);_x000D_
alert(ar3);
_x000D_
_x000D_
_x000D_

The concat does not affect ar1 and ar2 unless reassigned, for example:

_x000D_
_x000D_
var ar1 = [1, 2, 3];_x000D_
var ar2 = [4, 5, 6];_x000D_
_x000D_
ar1 = ar1.concat(ar2);_x000D_
alert(ar1);
_x000D_
_x000D_
_x000D_

Lots of great info here.


Append a value to an array

Since Array.prototype.push adds one or more elements to the end of an array and returns the new length of the array, sometimes we want just to get the new up-to-date array so we can do something like so:

const arr = [1, 2, 3];
const val = 4;

arr.concat([val]); // [1, 2, 3, 4]

Or just:

[...arr, val] // [1, 2, 3, 4]

You .push() that value in. Example: array.push(value);


Let the array length property do the work:

myarray[myarray.length] = 'new element value added to the end of the array';

myarray.length returns the number of strings in the array. JS is zero based so the next element key of the array will be the current length of the array. EX:

var myarray = [0, 1, 2, 3],
    myarrayLength = myarray.length; //myarrayLength is set to 4

You can use push method.

Array.prototype.append = function(destArray){
     destArray = destArray || [];
     this.push.call(this,...destArray);
     return this;
}
var arr = [1,2,5,67];
var arr1 = [7,4,7,8];
console.log(arr.append(arr1));// [7, 4, 7, 8, 1, 4, 5, 67, 7]
console.log(arr.append("Hola"))//[1, 2, 5, 67, 7, 4, 7, 8, "H", "o", "l", "a"]

Use concat:

_x000D_
_x000D_
a = [1, 2, 3];_x000D_
b = [3, 4, 5];_x000D_
a = a.concat(b);_x000D_
console.log(a);
_x000D_
_x000D_
_x000D_


If arr is an array, and val is the value you wish to add use:

arr.push(val);

E.g.

_x000D_
_x000D_
var arr = ['a', 'b', 'c'];_x000D_
arr.push('d');_x000D_
console.log(arr);
_x000D_
_x000D_
_x000D_


push() adds a new element to the end of an array.
pop() removes an element from the end of an array.

To append an object (such as a string or number) to an array use -
array.push(toAppend);


If you know the highest index (such as stored in a variable "i") then you can do

myArray[i + 1] = someValue;

However if you don't know then you can either use

myArray.push(someValue);

as other answers suggested, or you can use

myArray[myArray.length] = someValue; 

Note that the array is zero based so .length return the highest index plus one.

Also note that you don't have to add in order and you can actually skip values, as in

myArray[myArray.length + 1000] = someValue;

In which case the values in between will have a value of undefined.

It is therefore a good practice when looping through a JavaScript to verify that a value actually exists at that point.

This can be done by something like the following:

if(myArray[i] === "undefined"){ continue; }

if you are certain that you don't have any zeros in the array then you can just do:

if(!myArray[i]){ continue; }

Of course make sure in this case that you don't use as the condition myArray[i] (as some people over the internet suggest based on the end that as soon as i is greater then the highest index it will return undefined which evaluates to false)


Now, you can take advantage of ES6 syntax and just do:

let array = [1, 2];
console.log([...array, 3]);

keeping the original array immutable.


Just want to add a snippet for non-destructive addition of an element.

var newArr = oldArr.concat([newEl]);

Append Single Element

//Append to the end
arrName.push('newName1');

//Prepend to the start
arrName.unshift('newName1');

//Insert at index 1
arrName.splice(1, 0,'newName1');
//1: index number, 0: number of element to remove, newName1: new element


// Replace index 3 (of exists), add new element otherwise.
arrName[3] = 'newName1';

Append Multiple Elements

//Insert from index number 1
arrName.splice(1, 0,'newElemenet1', 'newElemenet2', 'newElemenet3');
//1: index number from where insert starts, 
//0: number of element to remove, 
//newElemenet1,2,3: new elements

Append array

//join two or more arrays
arrName.concat(newAry1, newAry2);
//newAry1,newAry2: Two different arrays which are to be combined (concatenated) to an existing array

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to arrays

PHP array value passes to next row Use NSInteger as array index How do I show a message in the foreach loop? Objects are not valid as a React child. If you meant to render a collection of children, use an array instead Iterating over arrays in Python 3 Best way to "push" into C# array Sort Array of object by object field in Angular 6 Checking for duplicate strings in JavaScript array what does numpy ndarray shape do? How to round a numpy array?

Examples related to append

List append() in for loop ValueError: all the input arrays must have same number of dimensions Append a tuple to a list - what's the difference between two ways? How merge two objects array in angularjs? How to add an element at the end of an array? Appending a list or series to a pandas DataFrame as a row? Can someone explain how to append an element to an array in C programming? How to append elements at the end of ArrayList in Java? Append value to empty vector in R? How to append new data onto a new line