[JS] 배열을 객체로 변환 (Array to Object)

Object.fromEntries() 메서드

const entries = [
  ['first', 'apple'],
  ['second', 7],
];

const object = Object.fromEntries(entries);

console.log(object);
// {'first': 'apple', 'second': 7}

다음과 같이 key-value 형식으로 갖추어진 배열은 Object.fromEntries() 메서드를 사용하면 객체로 변환하여 반환해 줍니다.

 

forEach(), reduce() 메서드

const array = ['apple', 'banana', 'mango'];

// 1.
const object = {};

array.forEach((value, index) => {
  object[index] = value;
});

console.log(object);
// {'0': 'apple', '1': 'banana', '2': 'mango'}

위와 같이 key-value 형식이 아닌 value 값만 존재한다면 임시의 객체를 하나 선언해 주고, 반복문을 통해서 객체를 채워나가는 식으로 변환해 줄 수 있습니다.

 

// 2.
const object = array.reduce((acc, value, index) =>
  ({ ...acc, [index]: value })
, {});

console.log(object);
// {'0': 'apple', '1': 'banana', '2': 'mango'}

Array.reduce() 메서드를 사용하면, 동일한 위 기능 코드를 축약할 수 있습니다.

 

응용 코드

const array = ['apple', 'banana', 'mango'];

const object = Object.fromEntries(
  array.map((value, index) => [index, value])
);

console.log(object);
// {'0': 'apple', '1': 'banana', '2': 'mango'}

위에서 소개한 방식인 map() 메서드로 key-value 형식으로 만들어주고 Object.fromEntries()로 변환시켜 줍니다.

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

Object.fromEntries() - JavaScript | MDN