[JavaScript] 구조 분해

(파괴 문법)

  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

개체에 존재하지 않는 속성 이름으로 변수를 선언하면 정의되지 않은 값이 선언됩니다.

  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 디스플레이' }

새 이름으로 변수를 할당하려는 경우: 할당할 변수에 변수 이름을 표시할 수 있습니다.