[JS] 배열과 객체의 구조 분해 할당

 

 

: 배열이나 객체의 속성을 분해해서 분해된 값을 변수에 담은 표현식

 

💡 배열 구조 분해

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

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

let users = ["aoto", "yae", "haru"];
let [user1, user2, user3] = users;

console.log(user1); // "aoto"
console.log(user2); // "yae"
console.log(user3); // "haru"

let str = "aoto-yae";
let [man1, man2] = str.split("-");

console.log(man1); // "aoto"
console.log(man2); // "yae"

 

❗️ 해당하는 값이 없다면? : 기본값을 미리 넣어둔다!

let [a, b, c] = [1, 2];
console.log(c); // undefined

let [a = 3, b = 4, c = 5] = [1, 2];

 

❗️ 필요없는 값 무시하기 : 공백으로 비워둔다!

let [user1, , user2] = ["aoto", "yae", "haru"];

console.log(user1); // "aoto"
console.log(user2); // "haru"

 

❗️ 값을 서로 바꾸고 싶을 때! : a는 b의 값으로, b는 a의 값으로

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

 

💡 객체 구조 분해

let { first, second } = {
  first: 1,
  second: 2,
};

console.log(first); // 1
console.log(second); // 2

let user = { name: "aoto", age: 30 };
let { name, age } = user;
// let { age, name } = user; 순서를 바꿔도 결과는 같다.

console.log(name); // "aoto"
console.log(age); // 30

let { name: userName, age: userAge } = user; // 변수명을 바꿀 수도 있다.
console.log(userName); // "aoto"
console.log(userAge); // 30

 

❗️ 새로운 이름으로 할당하려면?

let user = {
  name: "aoto",
  age: 20,
};

let { name: newName, age: newAge } = user;
console.log(newName); // "aoto"
console.log(newAge); // 20

 

❗️ 기본값

let user = { name: "aoto", age: 30 };
let { name, age, gender = "female" } = user;

// 만약 원래 user에 gender 값이 있다면 그 값이 사용되고,
// 비어있을 때만(undefined) female 이 사용된다.

 

 

 

🔗 https://youtu.be/lV7ulA7R5Nk?si=Isbt9i2-QuFVk4my