[JavaScript] 성능 안 좋은 Array.flat()

코드리뷰 하면서 또 하나를 배웠다.
정리를 해보겠다!
언니가 추천해준 아티클을 참조하였습니당
Array.flat()은 느리다?

Array.flat() 사용법

• 중첩 배열 평탄화(flattening) 작업
• 깊이(depth) 인자 받아 몇 단계의 중첩을 평탄화할지 지정 가능
• 기본적으로 한 단계의 중첩만 평탄화

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

• 깊이 지정

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

• 무한 평탄화

  const veryDeepArr = [1, [2, [3, [4, [5]]]]];
  const completelyFlatArr = veryDeepArr.flat(Infinity);
  // [1, 2, 3, 4, 5]

• 빈 요소 제거

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

Array.flat() 단점

• 성능
  • 메모리, CPU 자원 많이 사용
  • 큰 데이터셋에 대해 사용하는 것은 성능 저하
• 브라우저 호환성
  • ES2019에서 도입
  • 구버전 브라우저에서 지원X, 크로스 브라우징 이슈 발생 가능
• 빈 슬롯 처리
  • 빈 슬롯이 중요한 정보일 경우, flat() 의 특성이 문제가 될 수 있음

대안 방안

1. 재귀함수 사용

   • 성능 최적화
   • 빈 슬롯 보존하는 등의 추가적인 제어 가능

   function customFlat(arr, depth = 1) {
   	let result = [];
   	arr.forEach(item => {
   		if (Array.isArray(item) && depth > 0) {
   			result = result.concat(customFlat(item, depth - 1));
   		} else {
   			result.push(item);
   		}
   	});
   	return result;
   }
   
   const arr = [1, [2, [3, [4, [5]]]];
   console.log(customFlat(arr, Infinity));
   // [1, 2, 3, 4, 5]

2. 라이브러리 사용

   • lodash 의 _.flattenDeep() 함수는 깊이에 상관없이 배열을 평탄화
   • _.flattenDepth() 지정된 깊이만큼 배열을 평탄화
   • 일반적으로 잘 최적화되어있음
   • 광범위한 환경에서 호환성 제공

   const _ = require('lodash');
   const arr = [1, [2, [3, [4, [5]]]];
   console.log(_.flattenDeep(arr));
   // [1, 2, 3, 4, 5]