[JS] 구조 분해 할당

목차

1. 구조 분해 할당

2. 배열 분해

3. 객체 분해

4. 나머지 패턴

 

1. 구조 분해 할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우를 위해서 객체나 배열을 변수로

분해할 수 있게 해주는 특별한 문법

 

 

2. 배열 분해

// 배열 만들기
  let arr = ["사과", "바나나", "포도"]

  // 구조분해 할당을 이용해
  // apple엔 arr[0]
  // banana arr[1]
  // grape arr[2]을 할당
  let [apple, banana, grape] = arr;
  
  console.log(apple); // 사과
  console.log(banana); // 바나나
  console.log(grape); // 포도

 

3. 객체 분해

 let myInfo = {
    name : "Jaka",
    age : 30,
    tel : 12345678
  };

  let {name, age, tel} = myInfo;
  console.log(name); // Jaka
  console.log(age); // 30
  console.log(tel); // 12345678

 

4. 나머지 

프로퍼티 개수가 할당하려는 변수의 개수보다 많을 때

나머지를 할당할 때 사용합니다.

  let desk = {
    material: "tree",
    color: "red",
    weight : 80
  };

  // rest = 나머지 프로퍼티
  let{material, ...rest} = desk
  console.log(rest.color); // red
  console.log(rest.weight); // 80