As a developer working on a project, I recently encountered a situation where I needed to merge multiple arrays containing employee data. The concat()
method proved to be a handy solution for this task. In this tutorial, I will explain how to join two or more arrays in TypeScript using the concat()
method.
Understanding the TypeScript concat() Method
The concat()
method in TypeScript is used to merge two or more arrays into a new array without modifying the original arrays. It returns a new array that contains all the elements from the original arrays in the order they were provided. The concat() method does not change the existing arrays, but instead returns a new array.
The syntax for using the concat()
method is as follows:
array.concat(value1, value2, ..., valueN);
Here, array
is the original array on which the concat()
method is called, and value1
, value2
, …, valueN
are the arrays or values that you want to concatenate with the original array.
Check out How to Find an Object in a TypeScript Array?
Concatenate Arrays in TypeScript
Let me show you some examples to understand how to use the concat()
method effectively in TypeScript.
Example 1: Merging Two Arrays of Strings
Suppose we have two arrays of employee names from different departments in our US-based company:
const salesTeam: string[] = ['John', 'Emily', 'Michael'];
const engineeringTeam: string[] = ['Sarah', 'David', 'Jessica'];
To combine these arrays into a single array representing all employees, we can use the concat()
method as follows:
const allEmployees: string[] = salesTeam.concat(engineeringTeam);
console.log(allEmployees);
// Output: ['John', 'Emily', 'Michael', 'Sarah', 'David', 'Jessica']
The concat() method concatenates (joins) two or more arrays. The concat() method returns a new array, containing the joined arrays.
Here is the exact output in the screenshot below:

Read How to Convert a Map to an Array in TypeScript?
Example 2: Merging Arrays with Different Element Types
In some cases, you may need to concatenate arrays that contain elements of different types. TypeScript’s type inference helps in correctly determining the resulting array type. The recommended way to concat arrays these days is using es6 array spread. Type will be inferred correctly.
Consider the following example where we have an array of employee names and an array of their respective salaries:
const employees: string[] = ['John', 'Emily', 'Michael'];
const salaries: number[] = [5000, 6000, 5500];
To create an array that combines both names and salaries, we can use the spread operator along with concat()
:
const employeeData: (string | number)[] = [...employees, ...salaries];
console.log(employeeData);
// Output: ['John', 'Emily', 'Michael', 5000, 6000, 5500]
Here is the exact output in the screenshot below:

Read Find an Object in an Array by Property in TypeScript
Example 3: Concatenating Multiple Arrays
The concat()
method allows you to join multiple arrays at once. In TypeScript, we can join two, three, or more arrays using this method.
Let’s say we have three arrays containing employee data from different regions of the USA:
const eastCoastEmployees: string[] = ['John', 'Emily'];
const westCoastEmployees: string[] = ['Michael', 'Sarah'];
const midwestEmployees: string[] = ['David', 'Jessica'];
To combine all these arrays into a single array, we can chain multiple concat()
calls:
const allUSEmployees: string[] = eastCoastEmployees.concat(westCoastEmployees, midwestEmployees);
console.log(allUSEmployees);
// Output: ['John', 'Emily', 'Michael', 'Sarah', 'David', 'Jessica']
Read How to Check if a Value Exists in an Array in TypeScript?
concat() vs. Spread Operator
While the concat()
method is a convenient way to merge arrays, it’s worth noting that the spread operator (...
) introduced in ECMAScript 6 (ES6) provides a more concise syntax for achieving the same result. The spread operator and concat() method both are used to add elements to an array. But they are different from each other in many ways.
Using the spread operator, we can rewrite the previous example as follows:
const allUSEmployees: string[] = [...eastCoastEmployees, ...westCoastEmployees, ...midwestEmployees];
console.log(allUSEmployees);
// Output: ['John', 'Emily', 'Michael', 'Sarah', 'David', 'Jessica']
The spread operator provides a more readable and concise way to concatenate arrays, especially when dealing with multiple arrays.
Conclusion
In this tutorial, we explored how to use the concat()
method in TypeScript to join two or more arrays. We covered examples of merging arrays with the same element types, arrays with different element types, and concatenating multiple arrays at once. Additionally, we discussed the alternative approach of using the spread operator for array concatenation.
Remember, the concat()
method returns a new array without modifying the original arrays, ensuring that your original data remains intact. In this tutorial, I explained how to Concatenate Arrays in TypeScript Using concat() method.
You may also like:
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.