flatten, unflatten

flatten이란 단어 그대로 번역하면 평평하게 하다라는 의미이다.
자바스크립트에서는 flatten은 중첩된 배열구조를 하나의 배열로 만드는 것을 의미한다.

unflatten

unflatten은 의미 그대로 flatten의 반대의 말로 해석하면 된다.
즉 중첩된 배열 구조를 의미한다.

const arr = [1 , 2, [3, 4]]

위와 같은 배열안에 배열이 중첩되어 있는 구조를 unflatten이라고 생각하면 된다.

flatten

flatten은 위에서 말한 unflatten을 즉 중첩 배열을 평탄화 하는 것을 의미한다.
평탄화 한다는 것은 중첩 배열을 하나의 배열로 만드는 것을 의미한다.
자바스크립트의 flatten에는 몇가지 방법이 있다.

Array.prototype.flat()

자바스크립트에는 flat이라는 메서드가 존재한다.
flat메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다.

const arr1 = [1, 2, [3, 4]]
arr1.flat() // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]]
arr2.flat() // [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]]
arr3.flat(2) // [1, 2, 3, 4, 5, 6]

const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]]
arr.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8]

위와 같이 사용하면 된다.
사용할 때는 평탄화 할 깊이를 지정을 해주어야 한다.
기본값으로는 1이 들어가게 된다.
Infinity를 깊이 값으로 지정해주면 모든 중첩배열을 평탄화 해준다.

const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

또 flat메서드는 배열안에 비어있는 곳도 제거해준다.

reduce와 concat

reduce 메서드와 concat 메서드를 사용하면 flat과 같은 효과를 적용할 수 있다.

const arr = [1, 2, [3, 4]];


arr.flat(); // [1, 2, 3, 4]

arr.reduce((acc, val) => acc.concat(val), []); // [1, 2, 3, 4]

위와 같이 reduce와 concat을 사용하여 배열안에 요소를 concat으로 합쳐준 후에 새로운 배열을 리턴한다.

const arr = [1, 2, [3, 4]];

const flattened = arr => [].concat(...arr);

flattened(arr)

위와 같이 reduce와 concat으로 배열을 평탄화 해줄 수 있다.
하지만 이 방법은 배열의 깊이 값을 조절 할 수 는 없게 된다.

reduce, concat, isArray, 재귀

const arr = [1, 2, [3, 4, [5, 6]]];

function flatDeep(arr, d = 1) {
  return d > 0
    ? arr.reduce(
        (acc, val) =>
          acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val),
        []
      )
    : arr.slice();
}

flatDeep(arr, Infinity);

재귀 함수를 사용하여 깊이 값을 설정할 수 있게 된다.