JavaScript에서 중첩(다차원) 배열을 문자열로 변환하는 방법

JavaScript에서는 깊이 중첩된 배열 안의 모든 값을 하나의 문자열로 합쳐야 하는 경우가 종종 있습니다. 예를 들어, 여러 겹으로 감싸인 배열의 요소들을 공백으로 구분된 하나의 문장처럼 만들고 싶다면 재귀 함수를 활용하면 간단하게 해결할 수 있습니다.

이번 글에서는 중첩 배열을 순회하면서 모든 리터럴 값을 이어 붙여 문자열로 변환하는 함수를 작성해 보겠습니다. 조건은 다음과 같습니다.

• 배열 내부에 배열이 또 있다면 그 배열도 끝까지 탐색해야 한다.
• 각 문자열 요소 뒤에는 공백 한 칸을 추가한다.

재귀 함수를 이용한 구현

핵심 아이디어는 Array.isArray() 메서드를 사용해 현재 요소가 배열인지 판별하고, 배열이라면 자기 자신(함수)을 다시 호출하여 내부 값을 처리하는 것입니다.

const arr = [
  'this', [
    'is', 'an', [
      'example', 'of', [
        'nested', 'array'
      ]
    ]
  ]
];

const arrayToString = (arr) => {
  let str = '';
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      // 요소가 배열이면 재귀 호출로 내부 값 처리
      str += `${arrayToString(arr[i])} `;
    } else {
      // 일반 값이라면 그대로 이어 붙임
      str += `${arr[i]} `;
    }
  }
  return str;
};

console.log(arrayToString(arr));

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

this is an example of nested array

코드 동작 원리

1. 빈 문자열 str을 초기화합니다.
2. for 반복문으로 배열의 각 요소를 순서대로 확인합니다.
3. 요소가 배열이라면 Array.isArray()가 true를 반환하므로, 해당 하위 배열에 대해 함수를 재귀적으로 호출합니다.
4. 요소가 일반 값이라면 템플릿 리터럴을 사용해 문자열 뒤에 공백과 함께 붙입니다.
5. 모든 순회가 끝나면 완성된 문자열을 반환합니다.

대안: flat()과 join() 활용하기

ES2019부터 제공되는 Array.prototype.flat()을 사용하면 재귀 없이도 같은 결과를 얻을 수 있습니다. Infinity를 인자로 넘기면 어떤 깊이의 중첩 배열이든 완전히 평탄화됩니다.

const result = arr.flat(Infinity).join(' ');
console.log(result); // "this is an example of nested array"

다만 join(' ') 방식은 마지막 요소 뒤에 공백이 붙지 않는다는 점이 위의 재귀 구현과 약간 다릅니다. 상황에 따라 더 적합한 방식을 선택하시면 됩니다.