모던 자바스크립트 - Destructuring(구조 분해) With 객체

일반적으로 객체의 프로퍼티 값에 접근할 때, 점 표기법으로 매번 작성하지 않고 프로퍼티네임 자체를 변수처럼 사용한다.

const macbook = {
  title: '맥북 프로 16형',
  price: 3690000,
  memory: '16GB',
  storage: '1TB SSD 저장 장치',
  display: '16형 Retina 디스플레이'
}

const title = macbook.title;
const price = macbook.price;

이런 상황에서 Destructuring을 활용할 수 있다.

 

const macbook = {
  title: '맥북 프로 16형',
  price: 3690000,
  memory: '16GB',
  storage: '1TB SSD 저장 장치',
  display: '16형 Retina 디스플레이'
}

const { title, price } = macbook;

객체는 프로퍼티 네임을 통해 분해되기 때문에 객체의 프로퍼티 네임과 동일한 변수이름이 있다면 그 값이 할당된다. 그 외에는 배열의 Destructuring과 비슷하게 동작한다.

 

비슷한 동작

1. 객체에 없는 프로퍼티 네임으로 변수가 선언되어 있으면 undefined값이 할당됨

 

2. 할당 연산자로 기본값을 지정할 수 있다.

const { title, color = 'silver' } = macbook;

 

3. …을 통해서 변수를 선언할 때, 프로퍼티가 유효한 부분들을 먼저 할당하고, 남은 프로퍼티들을 하나의 객체로 모아서 변수에 할당한다.

const { title, display, ...rest } = macbook;

console.log(rest);

---

더 알아보기

프로퍼티를 다른 변수 이름으로 할당받고 싶다면 프로퍼티이름 뒤에 콜론을 붙이고, 새로운 변수명을 쓰면 된다.

const macbook = {
  title: '맥북 프로 16형',
  price: 3690000,
  memory: '16GB',
  storage: '1TB SSD 저장 장치',
  display: '16형 Retina 디스플레이'
}

const { title: product, ...rest } = mackbook;

console.log(product); //맥북 프로 16형

 

새로운 변수 이름이 필요한 경우 - 객체 내부에서 변수 이름으로 사용할 수 없는 프로퍼티 이름이 있는 경우

const macbook = {
  title: '맥북 프로 16형',
  price: 3690000,
  memory: '16GB',
  storage: '1TB SSD 저장 장치',
  display: '16형 Retina 디스플레이',
  'serial-num': 'ABCD'
}

const { 'serial-num':seriaNum, ...rest } = macbook;

 

새로운 방식으로 변수를 선언하는 방식은 계산된 속성명(computed property name)을 활용할 수 있다.

계산된 속성명 - 대괄호로 표현식을 감싸면 표현식의 값을 프로퍼티 네임으로 쓸 수 있음

const propertName = 'title';
const {[propertName]: product} = macbook;

console.log(product); //맥북 프로 16형