# JS Tip of the Day: Flattening Arrays

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-flattening-arrays/643113>\
**Category:** web dev\
**Created:** [April 23, 2020, 3:38pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-flattening-arrays/643113 "2020-04-23T15:38:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 23, 2020, 3:38pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-flattening-arrays/643113/1 "2020-04-23T15:38:20Z")

</div>

**Flattening Arrays**  
Version: ES2019  
Level: Beginner

Sometimes when you have an array of arrays, you may want to condense them into a single array, putting all of the values of the inner arrays into the single outer array. You can do that easily with the Array `flat()` method. `flat()` is called on any array and will return a new array that is a flattened version of the original.

```javascript
let nested = [[1,2],[3],[4,5]];
let flattened = nested.flat();
console.log(flattened); // [1,2,3,4,5]

```

`flat()` also accepts a depth argument which lets you specify how many nested arrays should be flattened. By default this is 1.

```javascript
let nested = [1,[2,[3,[4,[5]]]]];
let flatOne = nested.flat(); // [1,2,[3,[4,[5]]]]
console.log(flatOne);
let flatTwo = nested.flat(2); // [1,2,3,[4,[5]]]
console.log(flatTwo);
let flatFour = nested.flat(4); // [1,2,3,[4,[5]]]
console.log(flatFour); // [1,2,3,4,5]

```

Note that `flat()` only works with other arrays. It does not flatten iterables or array-likes in the original array.

One thing `flat()` can be useful for is converting a multi-dimensional array into a single dimension array to make it easier go through all the elements without having to worry about nested loops.

```javascript
let ticTacToeBoard = [
    ['X', 'O', ' '],
    ['O', 'X', ' '],
    ['X', 'O', 'X'],
];

let allMarks = ticTacToeBoard.flat();
console.log(allMarks); // [X, O, , O, X, , X, O, X]

let numXs = allMarks.filter(mark => mark === 'X').length;
console.log(numXs); // 4

```

There’s also a version of `map()` with built-ing flattening called `flatMap()`. This would be similar to calling both `flat()` and `map()` but does them as a single operation. We’ll look at an example that uses this in a future tip.

More info:

- [flat() on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)
- [flatMap() on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)

---

<div class="post-metadata">

**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\
**Post date:** [April 24, 2020, 2:32pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-flattening-arrays/643113/2 "2020-04-24T14:32:23Z")

</div>

Interesting article but I have a few questions. First, in your ticTacToeBoard example, will the original array reflect any changes that are made to the flattened array? Second I assume this it just a one way operation in that once the array is flattened there is no way to go back to the original array. That is correct right?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 24, 2020, 3:00pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-flattening-arrays/643113/3 "2020-04-24T15:00:32Z")

</div>

> First, in your ticTacToeBoard example, will the original array reflect any changes that are made to the flattened array?

Not changes to the array itself. The array created is a brand new array, but its also a shallow copy. So while the array and its immediate elements are “copies”, anything deeper such as objects in the arrays are not copied. For `ticTacToeBoard`, because its just a collection of strings, changes to the flattened array would not affect the original. But if you had an array of objects that you flattened, changes to the objects in the flattened array would be reflected in the original array because they’re all the same objects.

```javascript
let array2d = [
  [{ value: 'X' }, { value: 'O' }],
  [{ value: 'O' }, { value: 'X' }],
];
let arrayFlat = array2d.flat();
arrayFlat[0].value = 'O';
console.log(array2d);
/* [
  [{ value: 'O' }, { value: 'O' }],
  [{ value: 'O' }, { value: 'X' }],
] */

```

If you have simple values in a structure of nested arrays, having them wrapped in values like this could be a way to make them editable in flattened versions of that structure.

> Second I assume this it just a one way operation in that once the array is flattened there is no way to go back to the original array. That is correct right?

That’s right. You could write something up yourself to do this, but there’s no built-in `unflatten()` or something similar that handles this automatically. If you wanted to convert the flattened `ticTacToeBoard` back to its original, you could do something like…

```javascript
let ticTacToeBoard = [
    ['X', 'O', ' '],
    ['O', 'X', ' '],
    ['X', 'O', 'X'],
];

let allMarks = ticTacToeBoard.flat();
allMarks[4] = 'O';

```

```javascript
function toArray2d (array, colCount) {
    let array2d = [];
    for (let i = 0; i < array.length; i += colCount) {
        array2d.push(array.slice(i, i + colCount));
    }
    return array2d;
}

ticTacToeBoard = toArray2d(allMarks, 3);
console.log(ticTacToeBoard);
/* [
    ['X', 'O', ' '],
    ['O', 'O', ' '],
    ['X', 'O', 'X'],
] */

```