객체의 value를 이용해서 새로운 객체 만들기

예시

const data = [
  { name: 'apple', data: 'red' }, 
  { name: 'banana', data: 'yellow' },
  { name: 'grape', data: 'purple' },
  { name: 'lettuce', data: 'green' },
];

name의 값이 key가 되고, data의 값이 value가 되는 새로운 객체로 어떻게 만들까❓

🔹 원하는 결과

{
  apple: 'red',
  banana: 'yellow',
  grape: 'purple',
  lettuce: 'green',
}

🔹 코드

const result = data.reduce((acc, item) => {
  acc[item.name] = item.data;
  return acc;
}, {});

🔹 동작 흐름

1. 첫 번째 반복

• acc 는 {} (초기값)
• item 은 { name: 'apple', data: 'red' }
• acc['apple'] = 'red' -> acc 는 { apple: 'red' }

2. 두 번째 반복

• acc 는 { apple: 'red' }
• item 은 { name: 'banana', data: 'yellow' }
• acc['banana'] = 'yellow' -> acc 는 { apple: 'red', banana: 'yellow' }

3. 세 번째 반복

• acc 는 { apple: 'red', banana: 'yellow' }
• item 은 { name: 'grape', data: 'purple' }
• acc['grape'] = 'purple' -> acc 는 { apple: 'red', banana: 'yellow', grape: 'purple' }

4. 네 번째 반복

• acc 는 { apple: 'red', banana: 'yellow', grape: 'purple' }
• item 은 { name: 'lettuce', data: 'green' }
• acc['lettuce'] = 'green' -> acc 는 { apple: 'red', banana: 'yellow', grape: 'purple', lettuce: 'green' }

name의 값이 key가 되고, data의 값이 value가 되는 새로운 객체 '배열' 로 어떻게 만들까❓

🔹 원하는 결과

[
  { apple: 'red' },
  { banana: 'yellow' },
  { grape: 'purple' },
  { lettuce: 'green' },
]

🔹 코드

const result = data.map(item => ({ [item.name]: item.data }));

{ [item.name]: item.data } 부분은 동적 객체 키 (동적 키) 를 사용하여 새로운 객체를 만드는 방식이다

◾ 동적 키란❓
자바스크립트에서는 객체를 정의할 때, 속성 이름 (key) 을 변수로 사용할 수 있다

const obj = {
  [key]: 'red'
};

[key] 는 동적 키를 의미한다
대괄호 안에 변수나 표현식을 넣으면, 해당 값이 속성 이름으로 사용할 수 있다

◾ 일반적인 객체 정의 방식
일반적으로 객체를 정의할 때는 고정된 키를 사용한다

const obj = {
  apple: 'red'
};

apple 이라는 키가 고정되어 있다

◾ 동적 키를 왜 사용해야 할까❓
만약 동적 키로 선언하지 않으면, 자바스크립트는 문자 그대로를 속성 이름으로 간주한다

const obj = {
  item.name: 'red',  // 문법 오류 😥
};

따라서 동적 속성명을 사용하려면 대괄호( [] )로 감싸야한다 😊
그러면 item.name 의 값을 계산하여 객체의 키로 사용할 수 있다❗