[1일1js] 구조 분해 할당 2

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%EA%B0%9D%EC%B2%B4_%EA%B5%AC%EC%A1%B0_%EB%B6%84%ED%95%B4

객체 구조 분해

기본 할당

선언 없는 할당

새로운 변수 이름으로 할당하기

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

=> p, q를 특정지어 새롭게 할당하면 새로운 변수에 저장이 됨

기본값

var {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

=> 이렇게가 되면 데이터들을 오브젝트로 정의하면서도 함수에 default값을 넣듯이 데이터의 활용들이 다채로워질듯

기본값 갖는 새로운 이름의 변수에 할당하기

var {a: aa = 10, b: bb = 5} = {a: 3};

console.log(aa); // 3
console.log(bb); // 5

=> 앞에 있는 새로운 변수에 저장하기를 이용해서 한단계 업그레이드 시킬 수 있음
=> 뭔가 헤깔림 근데 변수를 정의할 때, 들어가는 친구를 기본값이라는 걸 기억하기

함수 매개변수의 기본값 설정하기 (이전 버전들)

중첩된 객체 및 배열의 구조 분해

for of 반복문과 구조 분해

=> for of 안에 넣어서도 구조분해할당을 할 수 있음 쌉 가능

함수 매개변수로 전달된 객체에서 필드 해체하기

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

=> 구조분해할당을 함수 안에 넣어서 오브젝트를 인자로 넣고 원하는 특정 데이터를 리턴해낼 수 있다.

계산된 속성 이름과 구조 분해

=> 특정 칼럼을 변수로 저장해 이용하는 것도 가능

객체 구조 분해에서 Rest

Rest/Spread Properties for ECMAScript 제안(stage 3)에서는 구조 분해에 rest 구문을 추가하고 있습니다. rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모읍니다.

=> Reset이라는 있기는 한데, 그냥 ... 하면 되지 않나 해볼까.

=> 안되네~

속성 이름이 유효한 JavaScript 식별자명이 아닌 경우