객체 분해 할당(Destructuring assignment)

객체 분해 할당에 대해서 공부하던 중에 Gemini 에게 물어보고 받은 답변입니다.

 

객체 분해 할당(Destructuring assignment)은 객체나 배열의 속성을 개별 변수에 쉽게 할당할 수 있도록 하는 JavaScript의 강력한 기능입니다. 복잡한 객체에서 필요한 값만 추출하여 사용하는 코드를 간결하고 가독성 좋게 만들어줍니다.

 

1. 객체 분해 할당 기본 사용법

const person = {
  name: '홍길동',
  age: 30,
  job: '개발자',
};

// 객체 분해 할당
const { name, age, job } = person;

console.log(name); // 출력: 홍길동
console.log(age); // 출력: 30
console.log(job); // 출력: 개발자

• const { name, age, job } = person; 이 부분이 객체 분해 할당입니다.
• person 객체의 name, age, job 속성 값을 각각 name, age, job 변수에 할당합니다.

 

2. 변수 이름 변경

객체 속성 이름과 다른 변수 이름을 사용하고 싶을 때는 다음과 같이 합니다.

const person = {
  name: '홍길동',
  age: 30,
};

const { name: userName, age: userAge } = person;

console.log(userName); // 출력: 홍길동
console.log(userAge); // 출력: 30

• name: userName은 person 객체의 name 속성 값을 userName 변수에 할당합니다

 

3. 기본값 설정

객체에 해당 속성이 없을 경우 기본값을 설정할 수 있습니다.

const person = {
  name: '홍길동',
  age: 30,
};

const { name, age, job = '학생' } = person;

console.log(job); // 출력: 학생

• person 객체에 job 속성이 없으므로 job 변수에 기본값 '학생'이 할당됩니다.

 

4. 중첩된 객체 분해 할당

중첩된 객체에서도 분해 할당을 사용할 수 있습니다.

const person = {
  name: '홍길동',
  age: 30,
  address: {
    city: '서울',
    country: '한국',
  },
};

const { name, address: { city, country } } = person;

console.log(name); // 출력: 홍길동
console.log(city); // 출력: 서울
console.log(country); // 출력: 한국

• address: { city, country }는 person 객체의 address 속성 내부의 city와 country 속성을 분해하여 변수에 할당합니다.

 

5. 배열 분해 할당

배열에서도 객체 분해 할당과 유사하게 사용할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];

const [first, second, , fourth] = numbers;

console.log(first); // 출력: 1
console.log(second); // 출력: 2
console.log(fourth); // 출력: 4

• 쉼표를 사용하여 필요하지 않은 배열 요소는 건너뛸 수 있습니다.

 

6. 객체 분해 할당의 장점

• 코드 간결성: 객체 속성을 변수에 할당하는 코드를 간결하게 작성할 수 있습니다.
• 가독성 향상: 코드의 의도를 명확하게 드러내어 가독성을 높입니다.
• 유지보수성 향상: 코드 변경 시 필요한 부분만 수정하면 되므로 유지보수성이 향상됩니다.

객체 분해 할당은 JavaScript 개발에서 매우 유용한 기능이므로 적극적으로 활용하는 것을 추천합니다.