---

📝 2022. 11. 09

JavaScript / 구조분해 할당

---

📌 Today I Learned

• 구조분해 할당

💬 구조분해 할당

• 배열이나 객체의 속성을 분해해 그 값을 변수에 담아 사용

📂 배열 구조분해 (Destructing)

let users = ['kia', 'hundai', 'ssangyong'];
let [user1, user2, user3, user4] = users;

console.log(user1) // 'kia'
console.log(user2) // 'hundai'
console.log(user3) // 'ssangyong'
console.log(user4) // undefined (해당하는 값이 없기 때문)

• 기본값을 정해 주면 undefined로 인한 오류가 예방 가능하다

let users = ['kia', 'hundai', 'ssangyong'];
let [user1='1', user2='2', user3='3', user4='4'] = users;

console.log(user1) // 'kia'
console.log(user2) // 'hundai'
console.log(user3) // 'ssangyong'
console.log(user4) // '4' (기본값 출력)

1) 메소드 사용

let str = "Mike-Tom-Jane";

let [user1, user2, user3] = str.split('-');   // ['Mike', 'Tom', 'Jane']
										     // str.split()은 `배열`로 출력
// 아래 코드와 동일하다
let user1 = users[0];  // 'Mike'
let user2 = users[1];  // 'Tome'
let user3 = users[2];  // 'Jane'

• str.split() 메소드를 사용하여 변수의 값을 배열로 출력할 수 있다.

2) 일부 반환값 무시

let [user1, ,user2] = ['Mike', 'Tom', 'Jane', 'Tony'];
// 공백과 쉼표를 이용해 일부 반환값(불필요한 배열 요소)를 무시할 수 있다

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

3) 변수의 값 바꿔치기

let a = 1;
let b = 2;

// a값을 b값으로 만들고 싶을 때
let c = a;  // 임시 변수 c에 a 값을 저장해 두고 진행
a = b;
b = c;

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

[a, b] = [b, a];
// 구조 분해를 사용하면 임시 변수 c가 필요 없다

• 위의 방법으로 값을 바꿀 수 있지만, 아래 방법으로 더 간편히 변경할 수 있다.

📂 객체 구조 분해

let user = {name: 'Mike', age: 30};
let {name, age} = user;  // name과 age 위치가 바뀌어도 제대로 작동

// 아래 코드와 동일하다
let name = user.name; // 'Mike'
let age = user.age;  // 30

1) 새로운 변수 이름으로 할당

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

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

• 구조 분해를 사용하여 새로운 변수 이름을 할당할 수 있다.

2) 기본값

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

let {name, age, gender} = user; // 'Mike', 30, undefined
// 해당 객체 안에 값이 없을 경우 undefined가 뜬다

let {name, age, gender = 'male'} = user; // 'Mike', 30, 'male'
// 배열과 같이 기본값을 줄 수 있다 
// 객체 안에 값이 없어서 undefined일 경우 기본값을 반환

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

let user = {
		name: 'Jane'
		age: 20,
		gender: 'female'
};

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

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

const user = {
  name: "Mike",
  age: 20,
  cat: {
    name: "chue",
    age: 2,
    species: {
      name: "korean shorthair",
    },
  },
};

const changedUser = {
  ...user,
  name: "Jack",
  age: 30,
};

console.log(changedUser)
//{
//  name: 'Jack',
//  age: 30,
//  cat: {
//    name: 'chue',
//    age: 2,
//    species: { name: 'korean shorthair' }
//  }
//}

const changedCat = {
  ...user,
  cat: {
    ...user.cat,
    species: "Black Cat",
  },
};

console.log(changedCat)
//{
//  name: 'Mike',
//  age: 20,
//  cat: { name: 'chue', age: 2, species: 'Black Cat' }
//}

• …user의 위치에 따라 내용이 덮어써질 수 있다.