How to append something to an array?

Answer 1

Use concat:

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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