In JavaScript, arrays enable storing a collection of multiple items under a single variable name. In programming, the situations when you work with just a single array are rare, thus requiring the knowledge of methods to work with multiple arrays simultaneously. This time, we’ll review the concat() method, responsible for joining (merging) two or more arrays without changing them.

Basics of the concat() method

In general, the concat() method refers to concatenation. In simple terms, concatenation equals joining. Consequently, the concat() method is used to join two or more arrays into a single array.

However, with this method, you won’t be able to change the original values stored in arrays. Syntax-wise, the concat() method is relatively simple:

array1.concat(array2, array3, ...arrayX)

Because this method’s output is an array, we place array1 before the concat() method in syntax. In brackets, array2 is a required parameter, array3 is the array that has to be joined. In this sense, arrayX refers to other arrays, which you can add for concatenation purposes. If all parameters are set up correctly, the return value is a new array, which contains joined arrays.

A basic example that best shows how the concat() method works, as follows:

const odds = [5,7,9];
const evens = [4,6,8];
const combined = odds.concat(evens);

console.log(combined); // Expected output: [ 5, 7, 9, 4, 6, 8 ]

We take odds and evens with three numbers in different arrays. Then, we use the concat() method to merge odds with evens, resulting in the following output: [5, 7, 9, 4, 6 ,8]. As you can see, the output you get is a combined array, which contains values from both odds and evens arrays.

Using an empty array

Let’s come back to the previous code snippet and modify it a little bit. This time, let’s use the same values, only this time leaving an empty array and placing odds and evens into the brackets of the concat() method:

const odds = [5,7,9];
const evens = [4,6,8];
const combined = [].concat(odds, evens);

console.log(combined); // Expected output: [ 5, 7, 9, 4, 6, 8 ]

In this instance, the result you log through a console will be the same. However, the option of using an empty array can be helpful when working with dozens of arrays simultaneously.

Joining values into an array

Another example of the concat() method is when you have values stored differently. Please review the following code snippet:

const letterExamples = ['z', 'x', 'y'];

const valueExamples = letterExamples.concat(7, [8, 9]);
 
console.log(valueExamples);
// Expected output: in [ 'z', 'x', 'y', 7, 8, 9 ]

As you can see, in the value_examples, we have the values stored differently, with 8 and 9 being an array. Still, when you use the concat() method, the output you get will equal the concatenation of two arrays.

Working with nested arrays

The good news is that you can use the concat() method to work with nested arrays and join them similarly. While the output will return arrays located within arrays, it’s one of the principles of how nesting in JavaScript works. Take a look at how to work with nested arrays:

const num1 = [[66]];
const num2 = [77, [88]];

const numbers = num1.concat(num2);

console.log(numbers); // Expected output: [ [ 66 ], 77, [ 88 ] ]

Don’t forget that we cannot modify arrays when working with the concat() method. However, we can add values using the push() method. Let’s add 99 to the 0 position of numbers:

const num1 = [[66]];
const num2 = [77, [88]];

const numbers = num1.concat(num2);

console.log(numbers); // Expected output: [ [ 66 ], 77, [ 88 ] ]

num1[0].push(99);

console.log(numbers); // Expected output: [ [ 66, 99 ], 77, [ 88 ] ]

Please note that you can change the push() position to get different results, making the concat() method flexible and variable for your programming challenges.

Alternatives to concat()

We’ve written about the spread operator in JavaScript, which is used to include all elements from an object or an array into the list. It is sometimes speculated that the spread operator can be used as an alternative to the concat() method.

However, let us show how these two methods will be different when working with arrays and non-arrays at the same time:

  • Using concat():

function combineArray(array1, array2) {
  return [].concat(array1, array2);
}

const array_example = [1, 2, 3];
const notArray = 'example';

console.log(combineArray(array_example, notArray)); // Expected output: [ 1, 2, 3, 'example' ]

We include the non-array value of ‘example,’ which is still introduced to the combineArray, getting proper output.

  • Using spread operator:

function combineArray(array1, array2) {
  return [...array1, ...array2];
}

const array_example = [1, 2, 3];
const notArray = 'example';

console.log(combineArray(array_example, notArray));
// Expected output: [
//  1,   2,   3,   'e', 'x',
//  'a', 'm', 'p', 'l', 'e'
// ]

As you can see, a string ‘example’ is split into letters, which is not the most-wanted code behaviour you’d want to see. This example shows why the concatenation is best performed when using the concat() method compared to its alternatives.

Test yourself

  • Task 1. Use the concat() method to merge two arrays. The first one is [1, 2, 3], while the second one is: [‘x’, ‘y’, ‘z’]. Log your result through a console:

Solution:

let numbers = [1,2,3];
let letters = ['x', 'y', 'z'];
let concatenation = numbers.concat(letters);

console.log(concatenation); // Expected output: [ 1, 2, 3, 'x', 'y', 'z' ]

  • Task 2. Use the concat() method to merge the first two arrays from Task 1. This time, introduce a nested array called animals with the following values: [‘elephants’, [‘tigers’], ‘zebras’]:

Solution:

let numbers = [1,2,3];
let letters = ['x', 'y', 'z'];
let animals = ['elephants', ['tigers'], 'zebras']
let concatenation = numbers.concat(letters, animals);

console.log(concatenation); // Expected output: [ 1, 2, 3, 'x', 'y', 'z', 'elephants', [ 'tigers' ], 'zebras' ]

  • Task 3. Use the concat() methods to merge the animals array from Task 2 with a non-array element called “Task 3 example.” After that, log the results to a console:

function combineArray(array1, array2) {
  return [].concat(array1, array2);
}

const animals = ['elephants', ['tigers'], 'zebras'];
const notArray = "Task 3 example";

console.log(combineArray(animals, notArray)); // Expected output: [ 'elephants', [ 'tigers' ], 'zebras', 'Task 3 example' ]