JavaScript 중첩 배열의 거짓값(falsy)을 0으로 바꾸는 재귀 함수 구현하기

JavaScript에서 중첩 배열(nested array)은 배열 안에 또 다른 배열이 포함된 구조를 말합니다. 이런 구조를 다룰 때는 일반적인 반복문만으로는 부족하기 때문에 재귀 함수(recursive function)를 활용하는 것이 효과적입니다.

문제 상황

예를 들어, 다음과 같이 배열 안에 배열이 여러 겹으로 중첩되어 있는 데이터가 있다고 가정해 보겠습니다.

const arr = [3, 5, 7, 2, [4, NaN, null, 4, 8, [3, undefined, 24, null], null, 5, 1], NaN, 45, 2, 1];

우리가 해야 할 작업은 이 중첩 배열의 모든 깊이를 탐색하면서, NaN, undefined, null 같은 거짓값(falsy value)을 전부 0으로 바꾸는 것입니다.

재귀 함수로 해결하기

핵심 아이디어는 간단합니다. 배열의 각 요소를 순회하면서 해당 요소가 배열인지 확인하고, 배열이라면 그 배열에 대해 자기 자신(재귀 호출)을 실행하는 방식입니다. 요소가 배열이 아니라면 falsy 값인지 검사한 후 0으로 치환합니다.

예제 코드

const arr = [3, 5, 7, 2, [4, NaN, null, 4, 8, [3, undefined, 24, null], null, 5, 1], NaN, 45, 2, 1];

const recursiveSimplify = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      // 요소가 배열이면 재귀적으로 처리
      recursiveSimplify(arr[i]);
    } else if (!arr[i]) {
      // falsy 값(NaN, undefined, null 등)을 0으로 변환
      arr[i] = 0;
    }
  }
};

recursiveSimplify(arr);
console.log(arr);

실행 결과

코드를 실행하면 콘솔에 다음과 같이 출력됩니다. 중첩된 내부 배열까지 포함하여 모든 falsy 값이 0으로 변경된 것을 확인할 수 있습니다.

[
  3,
  5,
  7,
  2,
  [ 4, 0, 0, 4, 8, [ 3, 0, 24, 0 ], 0, 5, 1 ],
  0,
  45,
  2,
  1
]

코드 설명

• Array.isArray(): 현재 요소가 배열인지 판별하는 메서드입니다. 배열이라면 더 깊은 탐색이 필요하므로 재귀 호출을 진행합니다.
• !arr[i]: JavaScript에서 NaN, undefined, null, 0, 빈 문자열 등은 모두 falsy 값으로 취급됩니다. 따라서 논리 부정 연산자로 간단히 검사할 수 있습니다.
• 원본 배열 직접 수정: 이 함수는 새로운 배열을 만들지 않고 기존 배열을 그대로 변경(mutate)합니다. 원본을 유지해야 한다면 복사본을 만들어 사용하는 것이 좋습니다.

마무리

이처럼 재귀 함수를 사용하면 깊이가 정해지지 않은 중첩 배열도 손쉽게 순회하고 처리할 수 있습니다. 데이터 정규화, API 응답 클렌징 등 실무에서도 자주 활용되는 패턴이니 꼭 익혀두시길 권장합니다.