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

26 Answers 11

up vote 3115 down vote accepted

Use the push() function to append to an array:

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

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

console.log(arr);

Will print

["Hi", "Hello", "Bonjour", "Hola"]

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

Will print

Hi
Hello
Bonjour
Hola 
Salut
Hey

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

Will print

["apple", "banana", "cherry", "dragonfruit", "elderberry", "fig"]
56 upvote
  flag
Note the return value of .push is not the array (or a new one, like .concat), but an integer representing the array's new length. – Jay
2 upvote
  flag
One other thing to notice. Don't use arr.length in the for condition, put it in a variable and use that variable in the for condition. There is no need to recalculate length on every run as this array's length is not changing. – RST
6 upvote
  flag
@RST: don’t use for at all (use .forEach). – Robert Siemer
upvote
  flag
@RobertSiemer Not sure what your point is. Going from for to foreach will have no impact on execution, they will both work. And there are probably even more ways to do this. I only added my comment because this answers seems to be used, and appreciated a lot while it has a flaw, especially when you have large arrays. – RST
upvote
  flag
@RST, my point is: the fix is not to copy arr.length in a var, but to not use arr.length at all. – Robert Siemer
27 upvote
  flag
I'd say the original code is just fine. There is no need whatsoever to optimize access to the length property. The interpreter does an amazing job at that itself and it will not make any difference in The Real World whether you optimize it away or not. If your array becomes so huge that optimizing .length would actually help, most probably an array is not the right data structure anymore. Using forEach has it's advantages, but it's highly doubtful that increased performance would be one of them, as the function call for each iteration incurs a cost and saves nothing. – Stijn de Witt
23 upvote
  flag
@RobertSiemer The length property of an array is not calculated every time you call it, it's a variable stored in the array object, which is only updated when you alter the array. So there is in fact no performance cost in including arr.length in the for condition. – mikeyq6
upvote
  flag
@mikeyq6: I never argued about speed. Using .length is prone to one-off-errors. .forEach is not. – Robert Siemer
upvote
  flag
@mikeyq6: No, I didn’t talk about “calculate the length every iteration”. User RST did. Talk to him. – I’m against writing a for-loop at all (with.length or any other way). – Robert Siemer
upvote
  flag
Why use a function call or make an extra length variable or get the length every cycle when you could just use a for...of loop? – towerofnix
upvote
  flag
@RobertSiemer coderwall.com/p/kvzbpa/don-t-use-array-foreach-use-for-inste‌​ad . Man, as a beginner its really hard to know who to believe haha – Mojimi
1 upvote
  flag
@Mojimi As a beginner ignore any advice that is about performance questions in edge cases such as this one. Use the more expressive syntax. Over time Javascript runtimes add more and more optimizations - they will inline forEach callback functions (some of them probably already do that) and there will be no difference in the generated machine code, if the function is called often enough to be compiled instead of interpreted by the runtime. Same advice goes as for any language that isn't assembler, actually. – Mörre

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

Will spit out:

"1,2,3"
"4,5,6"
"1,2,3,4,5,6"

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

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

Will display:

"1,2,3,4,5,6"

Lots of great info here

156 upvote
  flag
Just making sure people catch the var ar3 = ar1.concat(ar2); part. ar1.concat(ar2) does not save the values into ar1. You have to catch it by assigning it to ar3 or back to ar1, such as: ar1 = ar1.concat(ar2); – vbullinger
24 upvote
  flag
I'd say this is the wrong answer actually. The question was How do I append to an array in JavaScript?, but concat actually creates a new array. That is an important difference! Instead I'd say the answer below by Omnimike is actually the best one: Use Push.apply to push a whole array to an existing array without creating a new one. – Stijn de Witt
upvote
  flag
@StijndeWitt you can still append without creating a new array, as stated in the previous comment ar1 = ar1.concat(ar2); will append to ar1 – cameronjonesweb
2 upvote
  flag
@cameronjonesweb Actually, what it does is create a new array with the same contents as ar1, append ar2 and then return the new array. Just leave out the assignment part (ar1 = ...) from that line of code and you'll see that the original ar1 did not in fact change. If you want to avoid making a copy, you'll need push. Don't believe me, believe the docs: "The concat() method returns a new array" First sentence in the docs for concat. – Stijn de Witt

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;
    }
}
8 upvote
  flag
The question is if .length is a stored value or is calculated when being accessed, since if the latter one is true then it might be that using a simple variable (such as j) as the index value might be even faster – yoel halb
4 upvote
  flag
+1 for the statics, How do you make those benchmark? – mko
17 upvote
  flag
@yozloy: jsperf.com is your friend :) – Jens Roland
4 upvote
  flag
Would love to see concat() in the same test! – Justin
2 upvote
  flag
I wonder how much this has changed in the past four years. (jsperf would be handy right now.) – Paul Draper
8 upvote
  flag
This type of benchmarking is interesting, but ironically not very helpful in making apps faster. The rendering loop is by far much much more expensive during any cycle. In addition these internals of the JS language are continuously being optimized by browser developers. Thats the reason for my downvote, not the interestingness of this answer. If you want faster apps, benchmark first and see what to change - 99 out of 100 times it won't be an issue like this test shows. Often its poor developer JS/CSS - not browser internals that is making it slow. – LessQuesar
1 upvote
  flag
For the ease of others, I created a jsperf with @JensRoland's tests: jsperf.com/pushetc go ahead and add your own comparations and update it. – Henrik Aronsson
7 upvote
  flag
I agree with LessQuesar in sticking to the builtins whenever possible. Not that micro-optimization is bad in itself, but he's right that browsers are always improving their engine speed. Case in point: as of this writing, the per-browser performance is nearly identical for all the techniques listed above. Meaning a lot of fuss a few years ago for such a small gain, when now there is no gain. – Beejor
upvote
  flag
Oh, and Chrome is only fast because it forces its priority, in cases speeding up the interrupt cycle to ensure its speed, and opening lots and lots of processes. – wizzwizz4

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

arr.push(val);

E.g.

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

will log:

['a', 'b', 'c', 'd']

Use concat:

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

a now contains all the elements, [1, 2, 3, 3, 4, 5].

Reference: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/concat

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)

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); // ['first', 'second', 'third']

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

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

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

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

arr.push(...['fourth', 'fifth']);
console.log(arr) // ['first', 'second', 'third', 'fourth', 'fifth']
18 upvote
  flag
best answer for appending an array of items while not creating a new array. – Gabriel Littman
1 upvote
  flag
@GabrielLittman Specially because appending to an array, IMHO, should modify the array, not create a new one. – Juan Mendes
2 upvote
  flag
I like the push.apply version, would rather use Array.prototype.push.apply() though. – Michael
upvote
  flag
Sometimes it's important to preserve the reference to an array - for example in AngularJs when an array is in scope on some controller and some service needs to update the data in the array for display. That's why I'm upvoting this solution. – see sharper

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

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.

upvote
  flag
This is what i required, maintain original array reference – amit bakle

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

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

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

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); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

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

Babel REPL Example

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

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

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

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 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.

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]

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

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"]
upvote
  flag
For 1), this says "without modifying the original array." But that's literally what push does: it modifies the original array by pushing new elements onto it. Am I reading this wrong, or should this be edited? – Phil Calvin

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

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

keeping the original array immutable.

upvote
  flag
I want searching for this, thank you good sir – Sapher

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.

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

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' ]

Using the method push() will append an item to an array. See the example below.

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

The push() method adds a new element to an array (at the end), refer the example below

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  Adds a new element ("Kiwi") to fruits

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 arr = [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"]

Not the answer you're looking for? Browse other questions tagged or ask your own question.