JavaScript 스프레드 연산자로 배열 중첩 해제하기

JavaScript 개발에서 배열 중첩은 자주 발생하는 상황입니다. 여러 단계로 중첩된 배열은 데이터를 처리하기 어려울 수 있습니다. 이 문제를 해결하기 위해 JavaScript의 스프레드 연산자를 사용하여 중첩된 배열을 간단히 해제할 수 있습니다. 이 문서에서는 이 과정을 자세히 설명합니다.

스프레드 연산자란?

JavaScript에서의 스프레드 연산자는 배열이나 객체의 요소를 개별 요소로 확산시키는 기능을 합니다. 스프레드 연산자는 세 개의 연속된 점(...)으로 표기됩니다. 주로 함수 호출 시 인수로 전달하거나, 배열 및 객체의 복사 및 병합에 사용됩니다.

스프레드 연산자는 다음과 같은 방식으로 사용할 수 있습니다:

javascript
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

위의 예시에서 arr1의 요소가 arr2에 확산되었고, 추가 요소(4, 5, 6)가 뒤이어 붙었습니다. 그러나 이러한 기본 사용 예제로는 중첩된 배열을 해제하는 데 부족합니다. 다음 섹션에서는 중첩 배열을 실제로 해제하는 방법을 다룹니다.

배열 중첩이란?

배열 중첩은 배열이 또 다른 배열을 요소로 포함하고 있는 상황을 말합니다. 이는 데이터 구조의 중첩을 나타내며, 여러 단계로 중첩될 수 있습니다. 예를 들어 다음과 같은 중첩 배열이 있습니다:

javascript
const nestedArray = [1, [2, 3], [4, [5, 6]], 7];

이 예제에서 nestedArray는 여러 단계로 중첩된 배열을 포함하고 있습니다. 이 배열을 평탄화(flatten)하여 단일 레벨로 만들려면 어떻게 해야 할까요?

스프레드 연산자를 사용한 배열 중첩 해제

스프레드 연산자를 사용하여 배열 중첩을 해제하려면 재귀 함수를 만들어야 합니다. 이 함수는 배열의 요소를 반복하며, 요소가 배열인지 여부를 확인하고, 배열이면 다시 함수 자신을 호출하여 중첩을 해제합니다.

다음은 이를 구현한 예제 코드입니다:

javascript
function flattenArray(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = [...result, ...flattenArray(arr[i])];
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

const nestedArray = [1, [2, 3], [4, [5, 6]], 7];
const flatArray = flattenArray(nestedArray);
console.log(flatArray); // [1, 2, 3, 4, 5, 6, 7]

이 코드에서 flattenArray 함수는 입력 배열 arr을 순회하면서 각 요소가 배열인지 확인합니다. 배열이라면 재귀 호출을 통해 중첩 배열을 해제하고, 배열이 아니라면 결과 배열에 추가합니다. 최종 결과는 단일 레벨의 평탄화된 배열입니다.

실전 예제

실제로 어떤 상황에서 이러한 기능이 유용할까요? 예를 들어, 웹 애플리케이션에서 API로부터 데이터를 가져오는 경우를 생각해보겠습니다. API의 응답 데이터가 중첩된 배열 구조로 되어 있을 경우가 있습니다. 이러한 데이터를 평탄하게 처리하여 특정 필드를 이용한 검색이나 정렬 등의 작업을 효율적으로 수행할 수 있습니다.

javascript
const apiResponse = [
  { id: 1, data: [10, 20] },
  { id: 2, data: [30, [40, 50]] },
  { id: 3, data: [60, 70] }
];

function flattenApiData(response) {
  return response.reduce((acc, item) => {
    return [...acc, ...flattenArray(item.data)];
  }, []);
}

const flatData = flattenApiData(apiResponse);
console.log(flatData); // [10, 20, 30, 40, 50, 60, 70]

이 예제에서는 apiResponse 배열의 각 객체의 data 필드를 대상으로 평탄화 작업을 수행합니다. flattenApiData 함수는 각 data 필드를 평탄화하여 단일 배열로 결합합니다. 이를 통해 데이터 처리가 훨씬 간단해졌습니다.

결론

JavaScript의 스프레드 연산자를 이용하여 중첩된 배열을 해제하는 방법을 알아보았습니다. 스프레드 연산자의 강력함을 활용하면 복잡한 중첩 배열을 쉽게 평탄화할 수 있으며, 이는 데이터 처리의 효율성을 크게 향상시킵니다. 재귀 함수를 사용한 스프레드 연산자 활용 방법을 익히고 실전에서 이를 효과적으로 적용해보세요.