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

📌 배열 구조 분해

🔷 예시 코드

// [예제 1]
let [x, y] = [1, 2]

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

---

// [예제 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'

---

// [예제 3] split 활용
let str = "Mike-Tom-Jane";
let [user1, user2, user3] = str.split('-'); // ['Mike', 'Tom', 'Jane']

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

🔷 기본 값

• 해당하는 값이 없다면?

  → undefined 가 들어감
  

• 기본 값을 통해 error 사전 방지 가능

  만약 값이 undefined 이면 주어진 기본 값을 사용
  

• 예시 코드
  

    let [a=3, b=4, c=5] = [1,2]
    console.log(a) // 1 (배열에서 얻은 값)
    console.log(b) // 2 (배열에서 얻은 값)
    console.log(c) // 5 (기본 값 (undefined라서))

🔷 일부 반환값 무시

, (공백 & 쉼표) 활용, 할당 안하기

• 예시 코드
  

    let [user1, , user2] = ['Mike', 'Tom', 'Jane', 'Tony']
    
    console.log(user1) // 'Mike'
    console.log(user2) // 'Jane'
    
    // 무시된 것들: Tom(빈 공백), Tony(사용되는 곳 없음)

🔷 바꿔치기

◾ 다른 방식

임시로 쓰이는 변수 → 1개 이상 만들기

• 예시 코드

  • a와 b 값을 바꿔라

    let a = 1;
    let b = 2;
    
    // [잘못된 예] 기존의 a 값이 사라짐
    a = b;
    console.log(a) // 2
    console.log(b) // 2
    
    // [올바른 예] 임시 변수 활용
    let c = a; // 임시 변수(c)에 잠시 기존 a를 저장
    a = b; // b를 a로 옮김
    b = c; // c(임시로 저장했던)의 값을 b로 옮김
    
    console.log(a) // 2
    console.log(b) // 1
    console.log(c) // 1

◾ 배열 구조 분해

let a = 1;
let b = 2;

[a, b] = [b, a]

console.log(a) // 2
console.log(b) // 1

📌 객체 구조 분해

🔷 예시 코드

• 배열 구조 분해와 다른 점

  순서 상관 x
  

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: userName, age: userAge} = user;
    
    console.log(userName) // 'Mike'
    console.log(userAge) // 30

🔷 기본 값

객체로부터 받은 값이 undefined 일 때 (지정된 기본 값 없으면 undefined), 지정된 기본 값 할당. (지정된 기본 값 없으면 undefined)

• 예시 코드

// [ 객체에 속성이 없다면 ]
    let user = {name: 'Mike', age: 30};
    
    let {name, age, gender} = user;
    console.log(gender) // undefined (아무것도 해당되는 것이 없음)
    
    // 기본값 활용
    let {name, age, gender = 'male'} = user;
    console.log(gender) // 'male' (user객체에 gender가 없으면 'male'이 기본으로 할당됨)

// [ 객체에 속성이 있다면 ]
    let user = {name: 'Jane', age: 18, gender: 'female'};
    
    // 객체에 있는 값이 사용됨
    let {name, age, gender = 'male'} = user;
    console.log(gender) // 'female'

---

참고

• 코딩앙마_자바스크립트 중급