How to append something to an array?
Use the Array.prototype.push method to append values to the end of an array:
// initialize arrayvar arr = [ "Hi", "Hello", "Bonjour"];// append new value to the arrayarr.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 arrayvar arr = ["Hi", "Hello", "Bonjour", "Hola"];// append multiple values to the arrayarr.push("Salut", "Hey");// display all valuesfor (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.
Update
Another way with ES6 syntax is to return a new array with the spread syntax. This leaves the original array unchanged, but returns a new array with new items appended, compliant with the spirit of functional programming.
const arr = [ "Hi", "Hello", "Bonjour",];const newArr = [ ...arr, "Salut",];console.log(newArr);
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);There is a lot of great information on JavaScript Reference.
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] = bis faster (300ms vs. 800ms) - Large arrays:
arr.push(b)is faster (500ms vs. 900ms)
Safari 5.0 (Mac):
- Small arrays:
arr[arr.length] = bis faster (90ms vs. 115ms) - Large arrays:
arr[arr.length] = bis 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; }}