How do I append an object (such as a string or number) to an array in JavaScript?
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]);
}
Note that the push()
method returns the updated length of the array.
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"
];
// Do not forget to assign the result as, unlike push, concat does not change the existing array
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);
Answered 2023-09-20 20:23:17
push
and unshift
(as is shift
) are the only in situ variants, while concat
and spread syntax clone the array. - anyone 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.
Answered 2023-09-20 20:23:17
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. - anyone ar1 = ar1.concat(ar2);
will append to ar1
- anyone 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
. - anyone ar2
above is anyways. The result of .push
in the scenario will be = [ar1, [ar2]]
. .concat solves that problem, but with sacrifice of speed and a new array created. To use .push
properly in array appends, loop out the contained element first and push each. ar2.forEach(each => { ar1.push(each); });
- anyone Some quick benchmarking (each test = 500k appended elements and the results are averages of multiple runs) showed the following:
Firefox 3.6 (Mac):
arr[arr.length] = b
is faster (300ms vs. 800ms)arr.push(b)
is faster (500ms vs. 900ms)Safari 5.0 (Mac):
arr[arr.length] = b
is faster (90ms vs. 115ms)arr[arr.length] = b
is faster (160ms vs. 185ms)Google Chrome 6.0 (Mac):
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;
}
}
Answered 2023-09-20 20:23:17
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) ;
Answered 2023-09-20 20:23:17
Array.prototype.push.apply()
though. - anyone You can use the push
and apply
functions 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.
Answered 2023-09-20 20:23:17
...
operator instead of apply const a1 = [] const a2 = [5,6,7] const.push(...a2)
edit: syntax highlight - anyone array1.concat(array2)
in this situation. The call to push
seems unnecessary. - anyone concat
makes a copy. The call to push
is no more unnecessary than the call to concat
. For appending multiple items to an existing array, push
is the best solution. - anyone 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
.
Answered 2023-09-20 20:23:17
If arr
is an array, and val
is the value you wish to add use:
arr.push(val);
E.g.
var arr = ['a', 'b', 'c'];
arr.push('d');
console.log(arr);
Answered 2023-09-20 20:23:17
Use concat
:
a = [1, 2, 3];
b = [3, 4, 5];
a = a.concat(b);
console.log(a);
Answered 2023-09-20 20:23:17
JavaScript with the ECMAScript 5 (ES5) 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 (ES6) standard which is supported by Chrome, Firefox, Internet Explorer, and 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 arrays, 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.
Answered 2023-09-20 20:23:17
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');
Answered 2023-09-20 20:23:17
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"]
Answered 2023-09-20 20:23:17
push
does: it modifies the original array by pushing new elements onto it. Am I reading this wrong, or should this be edited? - anyone 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
Answered 2023-09-20 20:23:17
Now, you can take advantage of ES6 syntax and just do
let array = [1, 2];
console.log([...array, 3]);
keeping the original array immutable.
Answered 2023-09-20 20:23:17
Append a 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 an 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
Answered 2023-09-20 20:23:17
arrName.push('newElemenet1, newElemenet2, newElemenet3')
? - anyone arrName
was of length 1
. - anyone If you are using ES6 you can use spread operator to do it.
var arr = [
"apple",
"banana",
"cherry"
];
var arr2 = [
"dragonfruit",
"elderberry",
"fig"
];
arr.push(...arr2);
Answered 2023-09-20 20:23:17
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 returns 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 than the highest index, it will return undefined which evaluates to false).
Answered 2023-09-20 20:23:17
"undefined"
. It must read void 0
! "undefined"
is a string and "undefined" !== void 0
, hence your if(myArray[i]
is false unless the array at index i
is set to the string with the contents equivalent of 'u'+'n'+'d'+'e'+'f'+'i'+'n'+'e'+'d'
. Also note that you should not use undefined
, instead use void 0
. Because void 0
always is the undefined value, while undefined
can be defined via something like function x(undefined) { alert(undefined) } x("hello world")
, so you cannot be sure if somebody accidentally set window["undefined"]=1
or similar. - anyone You can do it using JavaScript Spread Operator Syntax:
// Initialize the array
var arr = [
"Hi",
"Hello",
"Bangladesh"
];
// Append a new value to the array
arr = [...arr, "Feni"];
// Or you can add a variable value
var testValue = "Cool";
arr = [...arr, testValue ];
console.log(arr);
// Final output [ 'Hi', 'Hello', 'Bangladesh', 'Feni', 'Cool' ]
Answered 2023-09-20 20:23:17
concat()
, of course, can be used with two-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
Answered 2023-09-20 20:23:17
Just want to add a snippet for non-destructive addition of an element.
var newArr = oldArr.concat([newEl]);
Answered 2023-09-20 20:23:17
myarray[myarray.length] = 'new element value added to the end of the array';
myarray.length returns the number of strings in the array. JavaScript is zero-based, so the next element key of the array will be the current length of the array.
Example:
var myarray = [0, 1, 2, 3],
myarrayLength = myarray.length; // myarrayLength is set to 4
Answered 2023-09-20 20:23:17
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]
Answered 2023-09-20 20:23:17
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')
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
Answered 2023-09-20 20:23:17
If you want to combine two 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]
Answered 2023-09-20 20:23:17
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);
Answered 2023-09-20 20:23:17
We don't have an 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 to 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); // Returns [1, 2, 3, 4, 5, 6];
Also we can use unshift, look at how we can apply this:
arr.unshift(0); // Returns [0, 1, 2, 3, 4, 5];
They are main functions to add or append new values to the arrays.
Answered 2023-09-20 20:23:17
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 the length method, e.g. array[aray.length] = 'test';
.
Answered 2023-09-20 20:23:17
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]);
}
Answered 2023-09-20 20:23:17
You can use the 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"]
Answered 2023-09-20 20:23:17
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);
Answered 2023-09-20 20:23:17