How to Merge Arrays in JavaScript – Array Concatenation in JS
source link: https://www.freecodecamp.org/news/how-to-merge-arrays-in-javascript-array-concatenation-in-js/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
November 28, 2022 / #JavaScript
How to Merge Arrays in JavaScript – Array Concatenation in JS
There are multiple ways to merge arrays in JavaScript. You can use long or short approaches. I'll be showing 3 of them in this article.
When working with arrays in JavaScript, there are cases where you want to combine multiple arrays together. For example, arrays with related data coming from different sources can be merged into one single array.
You can merge arrays in different ways. Let's look at some of them, from my favorite to my least favorite.
Here's a video version of this article if you'd like to use it to supplement your learning.
1. How to Use the Spread Operator in JavaScript
The spread operator allows you to spread an iterable collection (object or array) into another collection. Using this operator on arrays, you can merge the contents of arrays together.
Here's an example:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = [...array1, ...array2]
// [1, 2, 3, 4, 5, 6]
For the merged
variable, we create a new array and then spread the values of array1
followed by array2
in it. Now you can see the merged
array containing the values from these arrays.
You can use this operator for multiple arrays:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]
const merged = [...array2, ...array3, ...array1]
// [4, 5, 6, 7, 8, 9, 1, 2, 3]
In the merged
array here, we first spread array2
, then array3
, and lastly, array1
.
You can learn more about this operator in this article: Spread Operator Simplified.
2. How to Use Array.concat
in JavaScript
You use the concat
method of arrays to combine the contents of an array with new values to form a new array.
These new values can be numbers, strings, booleans, objects, or even, arrays.
The method accepts a list of values as arguments:
array.concat(value1, value2, ..., valueN)
By specifying an array as an argument, you can merge an existing array with the specified array to form a new array. Here's an example:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const merged = array1.concat(array2)
// [1, 2, 3, 4, 5, 6]
As you can see, the contents of array1
are concatenated with the contents of array2
to form a new array assigned to merged
.
You can pass multiple arrays for merging also:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]
const merged = array2.concat(array3, array1)
// [4, 5, 6, 7, 8, 9, 1, 2, 3]
In this example, we use the concat
method on array2
which means the contents of array2
are first in the merged array.
For the arguments, we pass array3
first, which means the contents of array3
are next in the merged array, then followed by the contents of array1
.
You can learn more about concat
in this article: Array concat simplified.
3. How to Use Array.push
in JavaScript
The push
method of arrays allows you to "push" (add) new values to the end of an array.
array.push(value1, value2, ...valueN)
Using this method, you can push a new array to an existing array to create a merge process. Unlike the previous approaches I mentioned, the push
approach modifies the array it is used on.
Here's an example:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
for(let i = 0; i < array2.length; i++) {
array1.push(array2[i])
}
console.log(array1)
// [1, 2, 3, 4, 5, 6]
Here, we use a for
loop to loop through the values of array2
, and on each loop, we push the value at the index to array1
.
At the end of the loop, you see array1
modified, containing the values from array2
.
Instead of a for
loop, you can also use the spread
operator with the push
method. Since the push
method accepts a list or arguments separated by a comma, you can spread another array in this method, and they will all be pushed to the array the method is applied to:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
array1.push(...array2)
console.log(array1)
// [1, 2, 3, 4, 5, 6]
You can do this for multiple arrays:
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]
array3.push(...array2, ...array1)
console.log(array3)
// [7, 8, 9, 4, 5, 6, 1, 2, 3]
Here, we call push
on array3
, then spread the values of array2
followed by array1
as arguments to be pushed into array3
.
Wrapping Up
In this article, we've seen three approaches for merging arrays in JavaScript. I especially love the spread
operator as it's easier and simpler to use.
When using push
, beware, as I mentioned, that it modifies the array it is used on (unlike concat
that returns a new array instead). This can cause unexpected results if you do not use it intentionally and carefully.
Developer Advocate and Content Creator passionate about sharing my knowledge on Tech. I simplify JavaScript / ReactJS / NodeJS / Frameworks / TypeScript / et al
My YT channel: youtube.com/c/deeecode
If you read this far, tweet to the author to show them you care.
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK