In this tutorial, I will explain how to flatten an array of arrays in TypeScript. As a TypeScript developer, if you are working with nested data structures, then you will work with flattening an array. Let me explain various ways to do this with some examples.
What Is Array Flattening in TypeScript?
Array flattening in TypeScript is the process of converting a multi-dimensional array into a single-dimensional array. In other words, it takes an array of arrays and combines all the elements into a single array in TypeScript.
For example, let’s say we have an array of arrays representing the sales data for different states in the USA:
const salesData = [
["California", 10000, 20000, 15000],
["New York", 8000, 12000, 9000],
["Texas", 12000, 18000, 14000]
];
Flattening this array would result in a single array containing all the elements:
const flattenedData = [
"California", 10000, 20000, 15000,
"New York", 8000, 12000, 9000,
"Texas", 12000, 18000, 14000
];
There are various methods to flatten an array of arrays in TypeScript. Here are a few methods with examples.
Check out How to Use TypeScript For Loops with Arrays?
Method 1: Using Array.prototype.flat()
TypeScript’s built-in Array.prototype.flat()
method is the simplest way to flatten an array of arrays. It creates a new array with all the sub-array elements concatenated into it recursively up to a specified depth.
Here’s an example:
const usaStates = [
["California", "Sacramento"],
["New York", "Albany"],
["Texas", "Austin"]
];
const flattenedStates = usaStates.flat();
console.log(flattenedStates);
// Output: ["California", "Sacramento", "New York", "Albany", "Texas", "Austin"]
Here is the exact output in the screenshot below:

By default, flat()
flattens the array by one level. You can specify the depth of flattening by passing a parameter:
const nestedArray = [
[1, 2],
[3, [4, 5]],
[6, [7, [8, 9]]]
];
const flattened1 = nestedArray.flat(1);
console.log(flattened1); // Output: [1, 2, 3, [4, 5], 6, [7, [8, 9]]]
const flattened2 = nestedArray.flat(2);
console.log(flattened2); // Output: [1, 2, 3, 4, 5, 6, 7, [8, 9]]
const flattened3 = nestedArray.flat(Infinity);
console.log(flattened3); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]
Check out 2D Arrays in TypeScript
Method 2: Using Array.prototype.reduce()
Another approach to flattening an array of arrays in TypeScript is by using the Array.prototype.reduce()
method. This method allows you to apply a reducer function to each element of the array and accumulate the result into a single value.
Here’s an example:
const usaCities = [
["New York", "Los Angeles", "Chicago"],
["Houston", "Phoenix", "Philadelphia"],
["San Antonio", "San Diego", "Dallas"]
];
const flattenedCities = usaCities.reduce((acc, curr) => acc.concat(curr), []);
console.log(flattenedCities);
// Output: ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "San Diego", "Dallas"]
In this example, the reduce()
method iterates over each sub-array of usaCities
. The reducer function concatenates the current sub-array (curr
) with the accumulator array (acc
), effectively flattening the array.
Here is the exact output in the screenshot below:

Check out How to Find an Object in a TypeScript Array?
Method 3: Using the Spread Operator
The spread operator (...
) in TypeScript allows you to spread the elements of an array into another array. You can leverage this feature to flatten an array of arrays.
Here’s an example:
const usaProducts = [
["iPhone", "iPad", "MacBook"],
["PlayStation", "Xbox", "Nintendo Switch"],
["Coca-Cola", "Pepsi", "Dr Pepper"]
];
const flattenedProducts = [].concat(...usaProducts);
console.log(flattenedProducts);
// Output: ["iPhone", "iPad", "MacBook", "PlayStation", "Xbox", "Nintendo Switch", "Coca-Cola", "Pepsi", "Dr Pepper"]
In this approach, we create a new empty array ([]
) and use the concat()
method to concatenate the spread elements of each sub-array into it.
Check out How to Reverse an Array in TypeScript?
Method 4: Using Array.prototype.flatMap()
The Array.prototype.flatMap()
method is another convenient way to flatten an array of arrays in TypeScript. It combines the functionality of map()
and flat()
into a single method.
Here’s an example:
const usaCompanies = [
["Apple", "Google", "Microsoft"],
["Amazon", "Facebook", "Netflix"],
["Tesla", "Uber", "Airbnb"]
];
const flattenedCompanies = usaCompanies.flatMap(company => company);
console.log(flattenedCompanies);
// Output: ["Apple", "Google", "Microsoft", "Amazon", "Facebook", "Netflix", "Tesla", "Uber", "Airbnb"]
In this case, flatMap()
maps each sub-array to itself and then flattens the result by one level.
Conclusion
In this tutorial, I explained how to flatten an array of arrays in TypeScript using several methods. The flat()
method is the simplest and most straightforward approach. Alternatively, you can use reduce()
, the spread operator, or flatMap()
to flatten arrays based on your specific requirements.
I hope now you can efficiently flatten arrays of arrays in your TypeScript projects.
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.