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]

flat 메서드를 사용할 때는 평평하게 만들 깊이를 지정해줘야 한다.
기본값으로는 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으로 합쳐준 후에
새로운 배열을 리턴한다. 하지만 이 방법은 배열의 값이 값을 조절할 수 없다.

reduce, concat, isArray, recursive

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);

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