JavaScript Array Concatenation: How to Merge Arrays in JS?

Unfold the power of JavaScript Array concatenation or concatenate in this comprehensive tutorial.

In this article, we are going to explore different methods for concatenating arrays, including the concat() method, the spread operator, and more.

So without further ado, let’s discover the power of array concatenation and how it can be used to manipulate and organize data in your JavaScript programs.

What is Array?

An array is a data structure that can store a collection of elements. These elements can be of any type, such as:

✅ numbers

✅ strings

✅ objects

✅ or even other arrays.

Arrays are commonly used in programming to organize and manipulate data.

In many programming languages, including JavaScript, arrays are indexed, meaning that each element in the array has a specific position, starting from 0.

You can access the elements of an array using their index, and you can also use various methods to add, remove, or manipulate the elements in the array.

Here’s an example of an array in JavaScript:

let sampleArray = ["Hi", "Welcome", "to", "Itsourcecode"];
console.log(sampleArray[1]); 
console.log(sampleArray[3]); 

Output:

Welcome
Itsourcecode

In this example, we create an array called sampleArray with four elements: the strings “Hi”, “Welcome”, “to”, “Itsourcecode.” We can then access the elements of the array using their index.

For example, sampleArray[1] returns the first element of the array (2), and sampleArray[3] returns the fourth element of the array (4).

What is Array concatenation?

Array concatenation is a common operation in JavaScript, and it is used to merge two or more arrays into a single array.

Some of the typical scenarios where array concatenation is frequently utilized in JavaScript are as follows:

📌 Combining data from multiple sources

If you have data stored in multiple arrays, you can use concatenation to combine them into a single array for easier processing.

📌 Creating new arrays

You can use concatenation to create new arrays by combining existing arrays or by adding new elements to an existing array.

📌 Flattening nested arrays

If you have an array of arrays, you can use concatenation to flatten it into a single array.

📌 Manipulating arrays

You can use concatenation to add, remove, or rearrange elements in an array.

These are just a few examples of how array concatenation can be used in JavaScript.

The concat() method is a flexible and powerful tool that can be used in many different ways to manipulate and work with arrays.

5 ways on how to merge or concatenate arrays in JavaScript

Here are five (5) ways to merge or concatenate arrays in JavaScript:

Solution 1: Use the concat() method

The concat() method is a built-in method of the Array object that allows you to merge two or more arrays into a new array.

Here’s an example:

let samplearray1 = [10, 20, 30];
let samplearray2 = [40, 50, 60];
let result = samplearray1.concat(samplearray2);
console.log(result);

Output:

[ 10, 20, 30, 40, 50, 60 ]

Here’s another example:

let samplearray1 = ["Hi", "Welcome", "to"];
let samplearray2 = ["Itsourcecodes", "that offers", "free sourcecode"];
let result = samplearray1.concat(samplearray2);
console.log(result);

Output:

[
  'Hi',
  'Welcome',
  'to',
  'Itsourcecodes',
  'that offers',
  'free sourcecode'
]

Solution 2: Use the spread operator (…)

The spread operator allows you to spread the elements of an array into a new array.

This can be used to merge arrays as shown in the example below:

let samplearray1 = [10, 20, 30];
let samplearray2 = [40, 50, 60];
let result = [...samplearray1, ...samplearray2];
console.log(result); 

Output:

[ 10, 20, 30, 40, 50, 60 ]

Here’s another example:

let samplearray1 = ["Welcome", "to"];
let samplearray2 = ["Itsourcecodes"];
let result = [...samplearray1, ...samplearray2];
console.log(result);

Output:

[ 'Welcome', 'to', 'Itsourcecodes' ]

Solution 3: Use the push() method

The push() method allows you to add one or more elements to the end of an array.

You can use this method in combination with the apply() method to merge arrays.

Here’s an example:

let samplearray1 = [10, 20, 30];
let samplearray2 = [40, 50, 60];
Array.prototype.push.apply(samplearray1, samplearray2);
console.log(samplearray1);

Output:

[ 10, 20, 30, 40, 50, 60 ]

Here’s another example:

let samplearray1 = ["This", "is"];
let samplearray2 = ["Itsourcecode"];
Array.prototype.push.apply(samplearray1, samplearray2);
console.log(samplearray1);

Output:

[ 'This', 'is', 'Itsourcecode' ]

Solution 4: Use a loop

You can use a loop to iterate over the elements of one array and add them to another array using the push() method.

Here’s an example:

let samplearray1 = [10, 20, 30];
let samplearray2 = [40, 50, 60];
for (let i = 0; i < samplearray2.length; i++) {
samplearray1.push(samplearray2[i]);
}
console.log(samplearray1); 

Output:

[ 10, 20, 30, 40, 50, 60 ]

Here’s another example:

let samplearray1 = ["Hi", "this"];
let samplearray2 = ["is", "Itsourcecodes"];
for (let i = 0; i < samplearray2.length; i++) {
    samplearray1.push(samplearray2[i]);
}
console.log(samplearray1);

Output:

[ 'Hi', 'this', 'is', 'Itsourcecodes' ]

Solution 5: Use the Array.from() method

The Array.from() method creates a new Array instance from an array-like or iterable object.

You can use this method to merge arrays, here’s an example:

let samplearray1 = [1, 2, 3, 4, 5];
let samplearray2 = [6, 7, 8, 9, 10];
let result = Array.from([...samplearray1,...samplearray2]);
console.log(result);

Output:

[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

Here’s another example:

let samplearray1 = ["this", "is", "just", "a", "sample"];
let samplearray2 = ["of", "merging", "arrays" , "in", "JavaScript"];
let result = Array.from([...samplearray1,...samplearray2]);
console.log(result);

Output:

[
  'this',    'is',
  'just',    'a',
  'sample',  'of',
  'merging', 'arrays',
  'in',      'JavaScript'
]

So those are just five (5) ways you can merge or concatenate arrays in JavaScript.

Conclusion

In conclusion, this article discusses the JavaScript Array Concatenation.

Array concatenation is a powerful technique in JavaScript that allows us to merge two or more arrays into a single array.

We have provided several methods for achieving this, including the built-in concat() method, the spread operator (…), the push() method, using loops, and the Array.from() method.

Each method has its own advantages and disadvantages providing flexibility in manipulating and organizing data in JavaScript programs and can be used depending on your specific needs.

We are hoping that this article provides you with enough information that help you understand the JavaScript array concatenation.

You can also check out the following article:

• Backtick in JavaScript
• focusin in JavaScript
• JavaScript multidimensional array

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
 · View all posts by Caren Bautista →