JS Array.flat 알아보기


const arr = [1, 2, 3, [4, 5, [6, 7, [8, 9, [10]]]]];

위와 같은 형식의 데이터를 자주 볼 일은 없겠지만 위와 같은 데이터를 탐색해서 짝수의 데이터만을 찾아내야 한다는 상황이라 가정해보자.


function searchArr(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result.push(...searchArr(arr[i]));
    } else if (arr[i] % 2 === 0) {
      result.push(arr[i]);
    }
  }
  return result;
}

물론 위와 같이 재귀 함수를 생성하여 배열 안의 요소에 접근할 수 있겠지만 구현이 번거롭다.

생각을 조금 바꿔보면 굳이 깊은 곳까지 탐색하지 않고 모든 배열 요소를 1차원 배열로 정리한 다음 그 배열을 순회하며 값을 찾으면 된다.

이럴 때는 javascript의 Array.flat 메소드를 사용하면 편리하다.


const arr = [1, 2, [3]];
const flatArray = arr.flat(1);

console.log(flatArray); // [1, 2, 3]

Array의 flat(n) 메소드를 사용하면 배열을 n번 만큼 더 얕게 만들 수 있다.


const arr = [1, 2, 3, [4, 5, [6, 7, [8, 9, [10]]]]];
const flatArray = arr.flat(Infinity);

console.log(flatArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

응용하여 Infinity 를 사용하면 완전히 flat한 배열을 반환 받을 수 있다.

다람쥐 헌 쳇바퀴에 타고파

JS Array.flat 알아보기