[JavaScript_study] 구조 분해 할당 (Destructuring assignment)

* Destructuring assignment

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

 

// 배열 구조 분해

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

console.log(x); // 1
console.log(y); // 2

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"

let str = "Mike-Tom-Jane";

let [user1, user2, user3] = str.split('-');

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

> 배열 구조 분해 : 기본값

> 배열로 받은값이 undefined일 때만 기본값이 적용된다.

 

// 값이 없을경우 undefined가 출력된다.
let [a, b, c] = [1, 2]; // c : undefined

// 기본값을 설정해둔다면 error를 방지할 수 있다.
let [a=3, b=4, c=5] = [1, 2]

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

* 배열 구조 분해 : 일부 반환값 무시

 

let [user1, ,user2] = ["Mike", "Tom", "Jane", "Tony"]

console.log(user1) // 'Mike'
console.log(user2) // 'Jane' // 두번째값이 공백으로 반한값이 무시 되었다.

 

* 배열 구조 분해 : 바꿔치기

 

let a = 1;
let b = 2;

[a, b] = [b, a]; // a에 b값을 b에 a값을 넣어준다.

 

* 객체 구조 분해

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

* 객체 구조 분해 : 새로운 변수 이름으로 할당

 

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

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

console.log(userName); // "Mike"
console.log(userAge); // 30

* 객체 구조 분해 : 기본값

  > 객체로 받은값이 undefined일 때만 기본값이 적용된다.

 

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

let { name, age, gender } = user; // gender은 값이 없으므로 undefined가 반환된다.

let { name, age, gender = "male" } = user; // gender : "male"로 출력