[JavaScript] 구조 분해 Destructuring (객체)

[Desturcturing 문법]

 

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

보통 객체를 다룰때 점 표기법을 이용하여 이처럼 변수에 값을 할당함.

 

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

중괄호를 이용한 표기법으로, 객체에 변수의 이름과 똑같은 프로퍼티 네임이 있으면 변수에 값이 할당되어 점 표기법과 같은 결과를 나타냄.

 

  const macbook = {
    title: '맥북 프로 16형',
    price: 3690000,
    memory: '16GB',
    storage: '1TB SSD 저장 장치',
    display: '16형 Retina 디스플레이',
  };
  
  const { title, color } = macbook;
  
  console.log(title); // 맥북 프로 16형
  console.log(color); // undefined

객체에 존재하지 않는 프로퍼티 네임으로 변수가 선언되면, undefined 값이 선언됨.

 

  const macbook = {
    title: '맥북 프로 16형',
    price: 3690000,
    memory: '16GB',
    storage: '1TB SSD 저장 장치',
    display: '16형 Retina 디스플레이',
  };
  
  const { title, color = 'silver' } = macbook;
  
  console.log(title); // 맥북 프로 16형
  console.log(color); // silver

이처럼 프로퍼티 네임이 없을 때, 기본값을 지정해 줄 수 있음.

 

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

마침표 세개로 변수를 선언하면, 앞쪽에 프로퍼티가 유효한 부분은 할당하고 남은 프로퍼티는 하나의 객체로 모아 rest 변수에 담김.

const macbook = {
    title: '맥북 프로 16형',
    price: 3690000,
    memory: '16GB',
    storage: '1TB SSD 저장 장치',
    display: '16형 Retina 디스플레이',
  };
  
  const { title: product, ...rest } = macbook;
  
  console.log(product); // 맥북 프로 16형
  console.log(rest); // { price: 3690000, memory: '16GB', storage: '1TB SSD 저장 장치', display: '16형 Retina 디스플레이' }

새로운 이름의 변수에 할당하고 싶으면 : 변수이름 을 이용해서 할당할 변수를 지정할 수 있음.