Related
This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
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]);
}
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);
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] = 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;
}
}
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) ;
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.
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
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);
Use concat:
a = [1, 2, 3];
b = [3, 4, 5];
a = a.concat(b);
console.log(a);
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.
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');
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"]
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
Now, you can take advantage of ES6 syntax and just do
let array = [1, 2];
console.log([...array, 3]);
keeping the original array immutable.
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
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).
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' ]
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);
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
Just want to add a snippet for non-destructive addition of an element.
var newArr = oldArr.concat([newEl]);
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.
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
Append a value to an array
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]
Append a single item
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')
Append multiple items
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
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]
You .push() that value in.
Example: array.push(value);
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);
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.
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';.
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]);
}
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"]
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);
This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
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]);
}
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);
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] = 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;
}
}
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) ;
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.
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
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);
Use concat:
a = [1, 2, 3];
b = [3, 4, 5];
a = a.concat(b);
console.log(a);
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.
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');
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"]
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
Now, you can take advantage of ES6 syntax and just do
let array = [1, 2];
console.log([...array, 3]);
keeping the original array immutable.
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
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).
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' ]
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);
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
Just want to add a snippet for non-destructive addition of an element.
var newArr = oldArr.concat([newEl]);
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.
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
Append a value to an array
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]
Append a single item
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')
Append multiple items
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
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]
You .push() that value in.
Example: array.push(value);
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);
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.
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';.
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]);
}
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"]
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);
I am having a little difficuly coming up with a solution to my problem.
I am trying to get the item at an index of a collection of arrays. I cannot actually concatenate the arrays, they need to stay seperate.
Normally, to get the 3rd item from an array, you would do:
function getItemFromJustOneArray(index){
var my_array = [1,2,3,4,5,6];
return my_array[index];
}
getItemFromJustOneArray(2); // returns 3
However, I have a bunch of arrays (could be any amount of arrays) and these arrays cannot be merged into one.
function getItemFromMultipleArrays(index){
var array1 = [1,2];
var array2 = [3,4,5];
var array3 = [6];
// I cannot use concat (or similar) to merge the arrays,
// they need to stay seperate
// also, could be 3 arrays, but could also be 1, or 5...
// return 3;
}
getItemFromMultipleArrays(2); // SHOULD RETURN 3
I have tried a bunch of lines that loops over the array, but I cannot really get a working solution.
Does someone know an elegant solution to this problem?
Nest all the arrays in another array. Then loop over that array, decrementing index by each array's length until it's within the length of the current element. Then you can return the appropriate element of that nested array.
function getItemFromMultipleArrays(index) {
var array1 = [1, 2];
var array2 = [3, 4, 5];
var array3 = [6];
var all_arrays = [array1, array2, array3];
var i;
for (i = 0; i < all_arrays.length && index >= all_arrays[i].length; i++) {
index -= all_arrays[i].length;
}
if (i < all_arrays.length) {
return all_arrays[i][index];
}
}
console.log(getItemFromMultipleArrays(2)); // SHOULD RETURN 3
Why not spread the arrays to a new one and use the index for the value?
function getItemFromMultipleArrays(index) {
const
array1 = [1, 2],
array2 = [3, 4, 5],
array3 = [6];
return [...array1, ...array2, ...array3][index];
}
console.log(getItemFromMultipleArrays(2)); // 3
Another approach by using an offset for iterating arrays.
function getItemFromMultipleArrays(index) {
const
array1 = [1, 2],
array2 = [3, 4, 5],
array3 = [6],
temp = [array1, array2, array3];
let j = 0;
while (index >= temp[j].length) index -= temp[j++].length;
return temp[j][index];
}
console.log(getItemFromMultipleArrays(2)); // 3
console.log(getItemFromMultipleArrays(5)); // 6
this should do it, just copying all the arrays into a "big" one and accessing it (added a helping function)
// this function takes any amount of arrays and returns a new
// "concatted" array without affecting the original ones.
function connectArrays(...arrays) {
return [...arrays.flat()];
}
function getItemFromMultipleArrays(index) {
var array1 = [1,2];
var array2 = [3,4,5];
var array3 = [6];
var allArrays = connectArrays(array1, array2, array3);
return allArrays[index];
}
getItemFromMultipleArrays(2); // SHOULD RETURN 3
Lets say I have a list:
var list = []
Now I want to insert some value into the list in a way that its index should be according to its value
list.push(6)
list.push(2)
This will give me a result of [6, 2]
But what I want is its index should be managed according to its value.
Here 2 is smaller than 6 so 2 should come first and give result like
[2, 6] . And if again I do list.push(1) it should give result like [1,2,6] and so on.
How can I achieve this in javascript ?
You can use Array#sort.
var list = [];
list.push(6);
list.push(2);
list.push(1);
list.sort(function(a, b) {
return a - b;
});
console.log(list);
You simply need to use Array sort function. As it treats array items as string and does not sort integers correctly by default, you need to use custom compare function for this:
var arr = [1, 22, 6, 2 ];
arr.sort(function(a, b){
return a - b;
});
console.log( arr );
You can use the sort() function.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
The result of fruits will be:
Apple,Banana,Mango,Orange
Edit:
Sorry, for numbers this solution does not work. You can use this:
Sort numbers in an array in ascending order:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
The result of points will be:
1,5,10,25,40,100
We can override push function of list object.
var list = [];
var copyPush = list.push.bind(list);
list.push = function(){
var toret = copyPush.apply(this,arguments);
this.sort(function(a,b){ return a-b});
return toret;
}
list.push(1);
list.push(3);
list.push(2);
list.push(5);
console.log(list); //[1, 2, 3, 5]
These other answers are missing the point, they assume that the list is already populated, and then you push in. What you need to do is compare the number you are going to push into the array, with the array itself, splicing the value in like so:
arr = [1,5,7];
var number = 0;
function findValue(value) {
return function(element, index, array) {
return (element <= value);
}
}
var filtered = arr.filter(findValue(number))
index = arr.indexOf(filtered[filtered.length-1]) +1;
arr.splice(index, 0, number);
alert(arr);
Here's a working fiddle:
https://jsfiddle.net/GerardSimpson/h3t6vcka/
I have two arrays. The first array contains some values while the second array contains indices of the values which should be removed from the first array. For example:
var valuesArr = new Array("v1","v2","v3","v4","v5");
var removeValFromIndex = new Array(0,2,4);
I want to remove the values present at indices 0,2,4 from valuesArr. I thought the native splice method might help so I came up with:
$.each(removeValFromIndex,function(index,value){
valuesArr.splice(value,1);
});
But it didn't work because after each splice, the indices of the values in valuesArr were different. I could solve this problem by using a temporary array and copying all values to the second array, but I was wondering if there are any native methods to which we can pass multiple indices at which to remove values from an array.
I would prefer a jQuery solution. (Not sure if I can use grep here)
There's always the plain old for loop:
var valuesArr = ["v1","v2","v3","v4","v5"],
removeValFromIndex = [0,2,4];
for (var i = removeValFromIndex.length -1; i >= 0; i--)
valuesArr.splice(removeValFromIndex[i],1);
Go through removeValFromIndex in reverse order and you can .splice() without messing up the indexes of the yet-to-be-removed items.
Note in the above I've used the array-literal syntax with square brackets to declare the two arrays. This is the recommended syntax because new Array() use is potentially confusing given that it responds differently depending on how many parameters you pass in.
EDIT: Just saw your comment on another answer about the array of indexes not necessarily being in any particular order. If that's the case just sort it into descending order before you start:
removeValFromIndex.sort(function(a,b){ return b - a; });
And follow that with whatever looping / $.each() / etc. method you like.
I suggest you use Array.prototype.filter
var valuesArr = ["v1","v2","v3","v4","v5"];
var removeValFrom = [0, 2, 4];
valuesArr = valuesArr.filter(function(value, index) {
return removeValFrom.indexOf(index) == -1;
})
Here is one that I use when not going with lodash/underscore:
while(IndexesToBeRemoved.length) {
elements.splice(IndexesToBeRemoved.pop(), 1);
}
Not in-place but can be done using grep and inArray functions of jQuery.
var arr = $.grep(valuesArr, function(n, i) {
return $.inArray(i, removeValFromIndex) ==-1;
});
alert(arr);//arr contains V2, V4
check this fiddle.
A simple and efficient (linear complexity) solution using filter and Set:
const valuesArr = ['v1', 'v2', 'v3', 'v4', 'v5'];
const removeValFromIndex = [0, 2, 4];
const indexSet = new Set(removeValFromIndex);
const arrayWithValuesRemoved = valuesArr.filter((value, i) => !indexSet.has(i));
console.log(arrayWithValuesRemoved);
The great advantage of that implementation is that the Set lookup operation (has function) takes a constant time, being faster than nevace's answer, for example.
This works well for me and work when deleting from an array of objects too:
var array = [
{ id: 1, name: 'bob', faveColor: 'blue' },
{ id: 2, name: 'jane', faveColor: 'red' },
{ id: 3, name: 'sam', faveColor: 'blue' }
];
// remove people that like blue
array.filter(x => x.faveColor === 'blue').forEach(x => array.splice(array.indexOf(x), 1));
There might be a shorter more effecient way to write this but this does work.
It feels necessary to post an answer with O(n) time :). The problem with the splice solution is that due to the underlying implementation of array being literally an array, each splice call will take O(n) time. This is most pronounced when we setup an example to exploit this behavior:
var n = 100
var xs = []
for(var i=0; i<n;i++)
xs.push(i)
var is = []
for(var i=n/2-1; i>=0;i--)
is.push(i)
This removes elements starting from the middle to the start, hence each remove forces the js engine to copy n/2 elements, we have (n/2)^2 copy operations in total which is quadratic.
The splice solution (assuming is is already sorted in decreasing order to get rid of overheads) goes like this:
for(var i=0; i<is.length; i++)
xs.splice(is[i], 1)
However, it is not hard to implement a linear time solution, by re-constructing the array from scratch, using a mask to see if we copy elements or not (sort will push this to O(n)log(n)). The following is such an implementation (not that mask is boolean inverted for speed):
var mask = new Array(xs.length)
for(var i=is.length - 1; i>=0; i--)
mask[is[i]] = true
var offset = 0
for(var i=0; i<xs.length; i++){
if(mask[i] === undefined){
xs[offset] = xs[i]
offset++
}
}
xs.length = offset
I ran this on jsperf.com and for even n=100 the splice method is a full 90% slower. For larger n this difference will be much greater.
I find this the most elegant solution:
const oldArray = [1, 2, 3, 4, 5]
const removeItems = [1, 3, 5]
const newArray = oldArray.filter((value) => {
return !removeItems.includes(value)
})
console.log(newArray)
output:
[2, 4]
or even shorter:
const newArray = oldArray.filter(v => !removeItems.includes(v))
function filtermethod(element, index, array) {
return removeValFromIndex.find(index)
}
var result = valuesArr.filter(filtermethod);
MDN reference is here
In pure JS you can loop through the array backwards, so splice() will not mess up indices of the elements next in the loop:
for (var i = arr.length - 1; i >= 0; i--) {
if ( yuck(arr[i]) ) {
arr.splice(i, 1);
}
}
A simple solution using ES5. This seems more appropriate for most applications nowadays, since many do no longer want to rely on jQuery etc.
When the indexes to be removed are sorted in ascending order:
var valuesArr = ["v1", "v2", "v3", "v4", "v5"];
var removeValFromIndex = [0, 2, 4]; // ascending
removeValFromIndex.reverse().forEach(function(index) {
valuesArr.splice(index, 1);
});
When the indexes to be removed are not sorted:
var valuesArr = ["v1", "v2", "v3", "v4", "v5"];
var removeValFromIndex = [2, 4, 0]; // unsorted
removeValFromIndex.sort(function(a, b) { return b - a; }).forEach(function(index) {
valuesArr.splice(index, 1);
});
Quick ES6 one liner:
const valuesArr = new Array("v1","v2","v3","v4","v5");
const removeValFromIndex = new Array(0,2,4);
const arrayWithValuesRemoved = valuesArr.filter((value, i) => removeValFromIndex.includes(i))
If you are using underscore.js, you can use _.filter() to solve your problem.
var valuesArr = new Array("v1","v2","v3","v4","v5");
var removeValFromIndex = new Array(0,2,4);
var filteredArr = _.filter(valuesArr, function(item, index){
return !_.contains(removeValFromIndex, index);
});
Additionally, if you are trying to remove items using a list of items instead of indexes, you can simply use _.without(), like so:
var valuesArr = new Array("v1","v2","v3","v4","v5");
var filteredArr = _.without(valuesArr, "V1", "V3");
Now filteredArr should be ["V2", "V4", "V5"]
You can correct your code by replacing removeValFromIndex with removeValFromIndex.reverse(). If that array is not guaranteed to use ascending order, you can instead use removeValFromIndex.sort(function(a, b) { return b - a }).
Here's one possibility:
valuesArr = removeValFromIndex.reduceRight(function (arr, it) {
arr.splice(it, 1);
return arr;
}, valuesArr.sort(function (a, b) { return b - a }));
Example on jsFiddle
MDN on Array.prototype.reduceRight
filter + indexOf (IE9+):
function removeMany(array, indexes) {
return array.filter(function(_, idx) {
return indexes.indexOf(idx) === -1;
});
});
Or with ES6 filter + find (Edge+):
function removeMany(array, indexes = []) {
return array.filter((_, idx) => indexes.indexOf(idx) === -1)
}
Here's a quickie.
function removeFromArray(arr, toRemove){
return arr.filter(item => toRemove.indexOf(item) === -1)
}
const arr1 = [1, 2, 3, 4, 5, 6, 7]
const arr2 = removeFromArray(arr1, [2, 4, 6]) // [1,3,5,7]
Try this
var valuesArr = new Array("v1", "v2", "v3", "v4", "v5");
console.info("Before valuesArr = " + valuesArr);
var removeValFromIndex = new Array(0, 2, 4);
valuesArr = valuesArr.filter((val, index) => {
return !removeValFromIndex.includes(index);
})
console.info("After valuesArr = " + valuesArr);
Sounds like Apply could be what you are looking for.
maybe something like this would work?
Array.prototype.splice.apply(valuesArray, removeValFromIndexes );
var valuesArr = new Array("v1","v2","v3","v4","v5");
var removeValFromIndex = new Array(0,2,4);
console.log(valuesArr)
let arr2 = [];
for (let i = 0; i < valuesArr.length; i++){
if ( //could also just imput this below instead of index value
valuesArr[i] !== valuesArr[0] && // "v1" <--
valuesArr[i] !== valuesArr[2] && // "v3" <--
valuesArr[i] !== valuesArr[4] // "v5" <--
){
arr2.push(valuesArr[i]);
}
}
console.log(arr2);
This works. However, you would make a new array in the process. Not sure if thats would you want or not, but technically it would be an array containing only the values you wanted.
You can try Lodash js library functions (_.forEach(), _.remove()). I was using this technique to remove multiple rows from the table.
let valuesArr = [
{id: 1, name: "dog"},
{id: 2, name: "cat"},
{id: 3, name: "rat"},
{id: 4, name: "bat"},
{id: 5, name: "pig"},
];
let removeValFromIndex = [
{id: 2, name: "cat"},
{id: 5, name: "pig"},
];
_.forEach(removeValFromIndex, (indi) => {
_.remove(valuesArr, (item) => {
return item.id === indi.id;
});
})
console.log(valuesArr)
/*[
{id: 1, name: "dog"},
{id: 3, name: "rat"},
{id: 4, name: "bat"},
];*/
Don't forget to clone (_.clone(valuesArr) or [...valuesArr]) before mutate your array
You could try and use delete array[index] This won't completely remove the element but rather sets the value to undefined.
removeValFromIndex.forEach(function(toRemoveIndex){
valuesArr.splice(toRemoveIndex,1);
});
For Multiple items or unique item:
I suggest you use Array.prototype.filter
Don't ever use indexOf if you already know the index!:
var valuesArr = ["v1","v2","v3","v4","v5"];
var removeValFrom = [0, 2, 4];
valuesArr = valuesArr.filter(function(value, index) {
return removeValFrom.indexOf(index) == -1;
}); // BIG O(N*m) where N is length of valuesArr and m is length removeValFrom
Do:
with Hashes... using Array.prototype.map
var valuesArr = ["v1","v2","v3","v4","v5"];
var removeValFrom = {};
([0, 2, 4]).map(x=>removeValFrom[x]=1); //bild the hash.
valuesArr = valuesArr.filter(function(value, index) {
return removeValFrom[index] == 1;
}); // BIG O(N) where N is valuesArr;
You could construct a Set from the array and then create an array from the set.
const array = [1, 1, 2, 3, 5, 5, 1];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]