JS의 핵심! : 구조 분해 할당

YouTube Link
	자바스크립트 중급 강좌 #9 구조 분해 할당 (Destructuring assignment)
	https://youtu.be/lV7ulA7R5Nk

구조 분해 할당은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식이다. 

먼저 배열 구조 분해를 살펴 보자 코드는 아래와 같다.

 

let [x, y] = [1, 2]

console.log(x);  //1

console.log(y);  //2

 

 

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

let [user1, user2, user3] = users;

console.log(user1)  //Mike

console.log(user2)  //Tom

console.log(user3)  //Jane

 

위의 코드는 아래와 코드와 같은 원리이다.

 

let user1 = user[0];

let user2 = user[1];

let user3 = user[2];

 

---

객체 구조 분해는 아래와 같다.

 

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

let { name, age } = user;

console.log(name);  //Mike

console.log(age);   //30

 

굳이 user.name을 사용하지 않고 새로운 변수 이름으로 할당하는 방법은 아래와 같다.

 

l

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

let { name: userName, age: userAge } = user;

userName = "tom";

console.log(userName);  //tom

console.log(userAge);   //30

 

---

마지막으로 기본값은 아래와 같다.

 

let user = {

  name: "Mike",

  age: 30,

  gender: "female"

};

let { name, age, gender = 'male' } = user;

a

console.log(gender);  //female

 

기본값의 변동은 undefined일 때만 적용이 된다. user라는 객체안에는 이미 값이 할당 되어 있어서 새로 구조 분해 할당을 사용해서 값을 변동하고 싶어도 변동 되지 않는다. 이럴땐 직접 user.gender를 사용해서 값을 변경하거나 새로운 변수 이름으로 할당해서 변동을 해야한다.