Frontend/javaScript

객체 분해 할당(Object Destructuring Assignment)

dddzr 2023. 4. 28. 09:47

객체 분해 할당(Object Destructuring Assignment)은 ES6에서 추가된 기능으로, 객체의 속성들을 변수로 분해해서 할당하는 방법입니다.

객체 분해 할당은 객체의 속성에 접근해서 변수로 할당하는 것과 유사합니다. 다만, 객체 분해 할당을 사용하면 코드가 간결해지고 가독성이 좋아지는 장점이 있습니다.

객체 분해 할당은 중괄호({})를 사용하여 객체를 선언하고, 변수 이름을 할당할 속성 이름으로 지정합니다. 이 때, 할당할 변수 이름은 객체의 속성 이름과 일치해야 합니다. 

예를 들어, 다음과 같은 객체가 있다고 가정해보겠습니다.

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

 

이 객체를 분해해서 name, age, city 변수에 할당하려면 다음과 같이 작성할 수 있습니다.

const { name, age, city } = person;

위의 코드에서 중괄호 안에는 person 객체의 속성 이름인 name, age, city가 포함되어 있습니다. 이것들은 할당할 변수의 이름으로 사용됩니다.
이렇게 분해된 변수를 사용하면 다음과 같은 결과가 나타납니다.

console.log(name); // 'John'
console.log(age); // 30
console.log(city); // 'New York'

 

또한, 객체 분해 할당은 변수 이름과 다른 이름을 가진 속성을 할당할 때 유용합니다. 이 경우, 다음과 같이 콜론(:)을 사용하여 변수 이름과 속성 이름을 구분하고, 새로운 변수 이름을 할당할 수 있습니다.

const { name: fullName, age: yearsOld, city: homeTown } = person;

console.log(fullName); // 'John'
console.log(yearsOld); // 30
console.log(homeTown); // 'New York'

위의 코드에서는 name, age, city 대신에 fullName, yearsOld, homeTown 변수 이름을 사용하여 객체의 속성을 할당합니다. 이렇게 객체 분해 할당을 사용하면 객체의 속성을 간단하게 추출하여 변수로 할당할 수 있습니다.