Advertisement
Advertisement


How to append something to an array?


Question

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

2017/09/10
1
2893
9/10/2017 7:21:27 PM

Accepted Answer

Use the Array.prototype.push method to append values to the end of an array:

// initialize array
var arr = [
  "Hi",
  "Hello",
  "Bonjour"
];

// append new value to the array
arr.push("Hola");

console.log(arr);


You can use the push() function to append more than one value to an array in a single call:

// initialize array
var arr = ["Hi", "Hello", "Bonjour", "Hola"];

// append multiple values to the array
arr.push("Salut", "Hey");

// display all values
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}


Update

If you want to add the items of one array to another array, you can use firstArray.concat(secondArray):

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

arr = arr.concat([
  "dragonfruit",
  "elderberry",
  "fig"
]);

console.log(arr);

Update

Just an addition to this answer if you want to prepend any value to the start of an array (i.e. first index) then you can use Array.prototype.unshift for this purpose.

var arr = [1, 2, 3];
arr.unshift(0);
console.log(arr);

It also supports appending multiple values at once just like push.

2020/07/30
4510
7/30/2020 7:07:36 PM

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

var ar1 = [1, 2, 3];
var ar2 = [4, 5, 6];

var ar3 = ar1.concat(ar2);

alert(ar1);
alert(ar2);
alert(ar3);

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

var ar1 = [1, 2, 3];
var ar2 = [4, 5, 6];

ar1 = ar1.concat(ar2);
alert(ar1);

Lots of great info here.

2019/06/23

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;
    }
}
2017/09/10

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:

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

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

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

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

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

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

arr.push(...['fourth', 'fifth']);
console.log(arr) ;

2019/06/23

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

var array1 = [11, 32, 75];
var array2 = [99, 67, 34];

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

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.

2019/06/23

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

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

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

Babel REPL Example

2019/06/23

Source: https://stackoverflow.com/questions/351409
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]