[JS] 구조 분해 할당

구조 분해 할당 ( Destructuring assignment )

• 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

🖍️ 배열 구조 분해

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

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

--------------------------------------

let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3] = users;  → 아래 코드랑 동일한 내용

let user1 = users[0];
let user2 = users[1];
let user2 = users[2];

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

💟 배열 구조 분해 : 기본값

let [a, b, c] = [1, 2];

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

// 기본값을 주면 에러를 방지할 수 있음
let [a=3, b=4, c=5] = [1, 2];

// 값이 undefined이면 기본 값을 사용 
// a, b는 배열에서 얻어온 값 | c는 기본값
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(user1);  // 'Jane'

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

let a = 1;
let b = 2;

[a, b] = [b, a];

🖍️ 객체 구조 분해

let user = {name: 'Mike', age: 30};
let {name, age} = user;  → 아래 코드랑 동일한 내용

let name = user.name;
let age = user.age;

// 배열 구조 분해와 비슷하지만 다른점은 순서를 신경쓰지 않아도 됨 ❗️
let {age, name} = user;  // 동일하게 동작

console.log(name);  // 'Mike'

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

• 프로퍼티 키 값 사용 안하고 변수의 이름 변경 가능

let user = {name: 'Mike', age: 30};
let {name, age} = user; → 변수 이름 변경 

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

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

💟 객체 구조 분해 : 기본값

// user 객체 gender가 없어 undefined 반환
let user = {name: 'Mike', age: 30};
let {name, age, gender} = user;

console.log(gender);  // undefined

// user 객체 gender에 기본값을 넣음
let {name, age, gender = 'male'} = user;

console.log(gender);  // 'male'

----------------------------------------

// user 객체에 gender가 있으면 그 값이 사용됨
let user = {
  name: 'Jane',
  age: 18,
  gender: 'female',
};

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

console.log(gender);  // 'female'