JavaScript에서 객체 배열을 키-값 쌍의 객체로 변환하기

문제 소개

실무에서는 객체 배열을 하나의 객체(맵) 형태로 바꿔야 할 때가 자주 있습니다. 예를 들어 다음과 같이 이름과 점수가 담긴 객체 배열이 있다고 가정해 보겠습니다.

const arr = [
  { 'name': 'Rahul', 'score': 89 },
  { 'name': 'Vivek', 'score': 88 },
  { 'name': 'Rakesh', 'score': 75 },
  { 'name': 'Sourav', 'score': 82 },
  { 'name': 'Gautam', 'score': 91 },
  { 'name': 'Sunil', 'score': 79 }
];

우리가 만들 함수는 이 배열을 입력받아 name 속성을 키(key)로, score 속성을 그에 대응하는 값(value)으로 가지는 하나의 객체를 반환해야 합니다.

방법 1: for 반복문 활용

가장 직관적인 방법은 배열을 순회하면서 빈 객체에 키와 값을 하나씩 추가하는 것입니다.

const buildObject = arr => {
  const obj = {};
  for (let i = 0; i < arr.length; i++) {
    const { name, score } = arr[i]; // 구조 분해 할당으로 값 추출
    obj[name] = score;
  }
  return obj;
};
console.log(buildObject(arr));

실행 결과

{ Rahul: 89, Vivek: 88, Rakesh: 75, Sourav: 82, Gautam: 91, Sunil: 79 }

구조 분해 할당(destructuring)을 사용하면 각 요소에서 name과 score를 깔끔하게 꺼낼 수 있어 코드의 가독성이 크게 향상됩니다.

방법 2: reduce() 메서드 활용

Array.prototype.reduce()를 사용하면 같은 로직을 더 선언적으로 표현할 수 있습니다. reduce()는 누적값(accumulator)을 활용해 배열 전체를 하나의 결과값으로 축약하는 메서드입니다.

const buildObject = arr =>
  arr.reduce((obj, { name, score }) => {
    obj[name] = score;
    return obj;
  }, {}); // 초기값으로 빈 객체 전달

console.log(buildObject(arr));

동작 원리

• 두 번째 인자인 {}는 누적 객체의 초기값입니다.
• 콜백 함수는 배열의 각 요소를 순회하며 누적 객체에 현재 요소의 name을 키로, score를 값으로 저장합니다.
• 모든 순회가 끝나면 완성된 객체가 최종 결과로 반환됩니다.

더 간결한 대안: Object.fromEntries()

ES2019부터 지원되는 Object.fromEntries()를 사용하면 [키, 값] 쌍 배열로부터 객체를 만들 수 있어, 이런 변환 작업을 한 줄로 처리할 수 있습니다.

const buildObject = arr =>
  Object.fromEntries(arr.map(({ name, score }) => [name, score]));

마치며

배열을 키-값 쌍의 객체로 변환할 때는 반복문, reduce(), Object.fromEntries() 중 상황에 맞는 방식을 선택하면 됩니다. 변환 과정에 추가 로직이 필요하다면 reduce()가 유연하고, 단순한 매핑이라면 Object.fromEntries()가 가장 간결합니다.