JavaScript에서 배열을 객체로 변환하기
실무에서는 중첩된 배열(배열의 배열)을 키가 있는 객체 형태로 변환해야 하는 경우가 자주 발생합니다. 예를 들어 다음과 같은 2차원 배열이 있다고 가정해 보겠습니다.
const data = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];여기서 목표는 각 하위 배열을 a, b, c, d와 같은 영문 알파벳 키를 가진 객체로 바꾸는 것입니다.
이 작업은 map()으로 외부 배열을 순회하고, 각 하위 배열에 reduce()를 적용해 객체를 생성하는 방식으로 깔끔하게 해결할 수 있습니다.
예제 코드
const data = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];
const dataArr = data.map(arr => {
return arr.reduce((acc, cur, index) => ({
...acc,
[String.fromCharCode(97 + index)]: cur
}), Object.create({}))
});
console.log(dataArr);코드 동작 원리
- map(): 원본 배열의 각 하위 배열을 하나씩 순회하며 새로운 결과를 반환합니다.
- reduce(): 하위 배열의 요소들을 누적 처리하여 하나의 객체로 만듭니다. 초기값으로 빈 객체를 전달합니다.
- String.fromCharCode(97 + index): 아스키 코드 97은 소문자 'a'에 해당하므로, 인덱스 값에 따라 'a', 'b', 'c', 'd'처럼 순차적인 키가 자동으로 생성됩니다.
- 전개 연산자(...): 이전 단계까지 누적된 객체의 속성을 그대로 유지하면서 새로운 키-값 쌍을 추가합니다.
실행 결과
위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.
[
{ a: 1, b: 2, c: 3, d: 4 },
{ a: 5, b: 6, c: 7, d: 8 },
{ a: 9, b: 10, c: 11, d: 12 }
]이처럼 map()과 reduce()를 조합하면 반복문 없이도 선언적인 코드로 배열 구조를 손쉽게 객체 구조로 변환할 수 있으며, 데이터 가공이나 API 응답 처리 시 매우 유용하게 활용됩니다.