YogeshChauhan.com
How to merge arrays in JavaScript?
November 16, 2020

We can use concat() method to merge one or more than one arrays.

The concat() method creates a new array by merging, or concatenating, existing arrays.

Syntax


const array2 = array1.concat(arrays / values)

The concat() method creates a new array consisting of the elements in the object on which it is called.

It keeps adding the arrays elements in the same order as the arrays in arguments OR it values in the same order as arguments. 

Examples

Merging 2 Arrays


var names1 = ["Yogesh", "John"];
var names2 = ["Yogi", "Jonny"];
var names = names1.concat(names2);
console.log(names);

// [ 'Yogesh', 'John', 'Yogi', 'Jonny' ]

You can concat strings and numbers as well.


var names1 = ["Yogesh", "John"];
var names2 = [2, 3, 4];
var names = names1.concat(names2);
console.log(names);

// [ 'Yogesh', 'John', 2, 3, 4 ]

💡 concat() method change the existing arrays but returns a new array.

Merge Nested Arrays


const array1 = [["Yogesh"]];
const array2 = ["Jon", [2]];

const array = array1.concat(array2);

console.log(array);

// [ [ 'Yogesh' ], 'Jon', [ 2 ] ]

Merging 3 Arrays


var names1 = ["Yogesh", "John"];
var names2 = ["Yogi", "Jonny"];
var names3 = ["Yog", "Jon"];
var names = names1.concat(names2, names3);
console.log(names);

// [ 'Yogesh', 'John', 'Yogi', 'Jonny', 'Yog', 'Jon' ]

As we can see, all we need to do is just pas another array in the arguments. We can pass any number of arguments.

Passing a string as an argument


var names1 = ["Yogesh", "John"];
var names = names1.concat("Yog");
console.log(names);

// [ 'Yogesh', 'John', 'Yog' ]

It works like push() method. Isn’t it? JavaScript is full of surprises.

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

How to make a web page look good on any device?HTMLSQL ANY OperatorSQL/MySQLWhy do we need HAVING Clause in SQL?SQL/MySQLLearn to Implement Estimated Reading Time using PHP Part 2: Final Implementation with Source CodePHPHow to get recent posts in WordPress?WordPressHow to refresh a page using PHP at regularly occurring intervals?PHP