1. 구조 분해 할당

---

• 구조 분해 할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

1) 배열 구조 분해

1. 기본 변수 할당

let users = ['Mike', 'Tom', 'Jane'];

let [user1, user2, user3] = users;
 -> let user1 = users[0]
 -> let user2 = users[1]
 -> let user3 = users[2]

console.log(user1)  // 'Mike'
console.log(user2)  // 'Tom'
console.log(user3)  // 'Jane'

2. 기본값 할당

• 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 할당해둔 기본값을 undefined 대신 사용한다.

let [a, b, c] = [1, 2]  // c는 undefined가 들어감
let [a=3, b=4, c=5] = [1, 2]

console.log(a)  // 1
console.log(b)  // 2
console.log(c)  // 5

3. 일부 반환 값을 무시

• 필요하지 않은 반환 값을 무시할 수 있다.

let [user1, ,user2] = ['Mike', 'Tom', 'Jane', 'Tony'];

console.log(user1)  // 'Mike'
console.log(user2)  // 'Jane'

4. 변수 값 교환하기(이미 할당된 변수를 재할당)

let a = 1;
let b = 2;

[a, b] = [b, a]

console.log(a)  // 2
console.log(b)  // 1

5. spread 문법 이용

const [a, b, ...rest] = [10, 20, 30, 40, 50];

// a = 10
// b = 20
// rest = [30, 40, 50]

2) 객체 구조 분해

• 할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴'을 넣는다.

• 기본 문법

let {var1, var2} = {var1:..., var2:...}

1. 기본 변수 할당

let user = {name : 'Mike', age : 30};

let {name, age} = user;  // let {age, name} = user; 이렇게 순서가 바뀌어도 정상 동작한다.
 -> let name = user.name;
 -> let age = user.age;

console.log(name)  // 'Mike'
console.log(age)  // 30

2. 기본값 할당

• 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 할당해둔 기본값을 undefined 대신 사용한다.

let user = {name : 'Mike', age : 30};
let {name, age, gender} = user;  // gender는 undefined가 들어감
let {name = 'Jane', age = 30, gender = 'male'} = user;

console.log(name)  // 'Jane'
console.log(gender)  // 30
console.log(gender)  // 'male'

3. 새로운 변수 이름으로 할당

let user = {name : 'Mike', age : 30};

let {name, age} = user;
let {name : userName, age : userAge} = user; // 변수 이름 변경

console.log(userName)  // 'Mike'
console.log(userAge)  // 30

4. spread 문법 이용

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}

// a = 10
// b = 20
// rest = {c: 30, d: 40}

3) 함수에서 객체 분해

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

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

whois(user)  // jdoe is John