.flat()

flat 메서드란?

모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다.
쉽게 말해 배열 내부의 하위 배열을 간단하게 합칠 수 있는 메서드이다. 그리고 빈 요소가 있으면 무시되기 때문에 빈 요소를 제거할 때 사용 할 수도 있다.

	const arr = ["a", , ["b"], ["c"]];
	const newArr = arr.flat(); // newArr = ["a", "b", "c"];

depth에 따라 합치는 정도를 나눌 수 도 있고, 기본 depth값은 1 이다.

	const arr = ["a", ["b"], ["c"]];
	const newArr = arr.flat(); // newArr => ['a','b',['c']];
	const flat1 = arr.flat(1); //newArr => ['a','b',['c']];
	const flat2 = arr.flat(2); //newArr => ['a','b','c'];

만약에 depth를 모를 경우라면

	const arr = ["a", ["b", ["C", ["D"]]]];
	const newArr = arr.flat(infinity); // newArr => ['a', 'b', 'c', 'd']; 

를 이용해 병합이 가능하다.

주의🔥

유용해 보이지만 주의해야 할 점이 있다. 재귀 함수 라서 성능이 좋지 않다. 그리고 ES10(es2019)에서 도입된 개념이기 때문에 IE에선 지원이 불가능하다. 그러면 .flat()을 대체할 만한 게 있을까?

01. concat()

.concat() 메서드는 인자로 주어진 배열을 기존의 배열에 합쳐서 새 배열을 반환한다.

	const arr = ["a", "b", "c"];
	const newArr = ["1", "2"];
    const resultArr = arr.concat(...newArr); // resultArr => ["a", "b", "c", "1", "2"];

하지만 이것도 단점이 있다. depth를 지정할 수 없고, 1 depth까지만 병합이 가능하다.

참고