12. 구조분해할당

📌 12-1 구조분해할당이란?

이터러블(배열) 및 객체를 분해하여 변수에 할당하는 것

💡 분해대상은 수정 및 삭제되지 않는다.
💡 직접 변수에 각각 할당하지 않기 때문에 가독성이 좋아진다.
💡 2가지의 형태로 나눠진다. 배열도 이터러블이기 때문에 이터러블과 객체로 나눈다.

📌 12-2 배열 및 객체 구조분해할당 공통점 및 차이점

📃 공통점
1. 변수에 기본값을 설정가능하다.
2. 함수의 매개변수에 사용가능하다.
3. Rest(...) 요소를 할당가능하다.

📃 차이점
배열 구조분해할당은 할당기준이 배열의 인덱스이다.
객체 구조분해할당은 할당기준이 객체의 실존하는 키값이다.

📌 12-3 배열 구조분해할당

배열의 인덱스 순서대로 할당된다.

1. 사용법

const user = ['HGD', 20, 'seoul'];
const [name, age, address] = user; // 변수에 배열을 구조분해할당한다.
console.log(name); // HGD 출력
console.log(age); // 20 출력
console.log(address); // seoul 출력

배열의 구조분해할당을 하는 변수의 이름은 상관없으며 자리가 중요하다.

const user = ['HGD', 20, 'seoul'];
const [kkk, age, address] = user;
console.log(kkk); // HGD 출력 (kkk란 변수에 user[0]이 할당되는 형식)
// ex) const kkk = user[0]이랑 같은 표현이다.

자리는 ','를 통해서 생략이 가능하며 인덱스가 존재하지 않으면 undefined를 반환한다.

const user = ['HGD', 20, 'seoul'];
const [, age, address, phone] = user;
console.log(age, address, phone); // 20, seoul, undefined 출력

구조분해할당을 통해서 코드의 가독성이 좋아진다.

// 변수에 직접 할당
const user = ['HGD', 20, 'seoul'];
const name = user[0];
const age = user[1];
const address = user[2];
/* 직접 변수마다 할당하지 않아 코드가 간결하다.
const user = ['HGD', 20, 'seoul'];
const [name, age, address] = user;
console.log(name, age, address);
*/

2. 변수에 기본값 할당

const user = ['HGD', 20, 'seoul'];
const [name, age, address, phone = '01011111111'] = user; // 4번째 인덱스에 기본값 할당
console.log(phone); // 01011111111 출력
/* 기본값을 지정한 변수에 값이 실존하면 그 값으로 대체한다.
const user = ['HGD', 20, 'seoul'];
const [name = 'KIM', age, address, phone = '01011111111'] = user;
console.log(name); // HGD 출력
*/

3. 함수의 매개변수로 사용

const user = ['HGD', 20, 'seoul'];
function info([name, age, address]) {
    console.log(name, age, address);
}
info(user); // HGD, 20, seoul 출력

4. Rest 요소 사용

const user = ['HGD', 20, 'seoul'];
// (...변수명)형식으로 할당되지 않은 나머지 값을 가져온다. 마지막에 선언해야 한다.
const [name, ...rest] = user;
console.log(name, rest); // HGD, [ 20, 'seoul' ] 출력

📌 12-4 객체 구조분해할당

순서는 상관없으며 객체에 실제 존재하는 키값을 가져온다.

1. 사용법

const user = {
    name: "HGD",
    age: 20,
    address: 'seoul'
}
const { name, age, address } = user; // 변수에 객체를 구조분해할당한다.
console.log(name, age, address); // HGD, 20, seoul 출력

객체의 구조분해할당은 순서와 개수는 상관없으며 객체의 실존하는 키값이 존재해야한다.
존재하지 않으면 undefined를 반환한다.

const user = {
    name: "HGD",
    age: 20,
    address: 'seoul'
}
const { age, phone } = user;
console.log(age, phone); // 20, undefined 출력

2. 변수에 기본값 할당

const user = {
    name: "HGD",
    age: 20,
    address: 'seoul'
}
// phone에 기본값 할당
const { age, phone = '01011112222' } = user;
console.log(age, phone); // 20, 01011112222 출력

3. 함수의 매개변수로 사용

const user = {
    name: "HGD",
    age: 20,
    address: 'seoul'
}
function info({name, age}) {
    console.log(name, age);
}
info(user); // HGD, 20 출력

4. Rest 요소 사용

const user = {
    name: "HGD",
    age: 20,
    address: 'seoul'
}
const { age, ...rest } = user;
// (...변수명)형식으로 할당되지 않은 나머지 값을 가져온다. 마지막에 선언해야 한다.
console.log(age, rest); // 20 { name: 'HGD', address: 'seoul' } 출력

📌 12-5 구조분해할당의 활용

1. 배열 구조분해할당 활용(변수 값 바꾸기)

let str1 = "str1";
let str2 = "str2";
// str1의 값을 str2로 바꿔준다.
[str1, str2] = [str2, str1];
console.log(str1); // str2 출력

2. 객체 구조분해할당 활용(함수의 return값이 여러개일때)

function arithmetic(a, b) {
    const add = a + b;
    const sub = a - b;
    const times = a * b;
    const div = a / b;
    // return 값을 객체로 넘겨줌
    return { add, sub, times, div };
}
const { add } = arithmetic(1, 4); // 사칙연산중 더하기만 뽑아서 사용
console.log(add); // 5 출력

📌 12-6 중첩객체 및 배열 할당

Depth가 있는 배열과 객체 및 배열의 요소가 객체이거나 객체의 요소가 배열인 중첩배열 및 객체의 사용법

1. 배열

// 중첩배열 생성
const users = [["KIM", 18],["LEE", 21],["SON", 30],["PARK", 27]];
// 배열의 0번 인덱스가 ["KIM", 18]이므로 그것을 구조분해할당한다.
const [[kimname, kimage]] = users;
console.log(kimname, kimage); // KIM, 18 출력
// for - of문을 통해서 배열의 요소를 구조분해할당하여 모두 출력한다.
for(let [name, age] of users) {
    console.log(name, age);
}

2. 객체

const users = {
    user1: {name: "KIM", age: 18},
    user2: {name: "LEE", age: 21},
    user3: {name: "SON", age: 30},
    user4: {name: "PARK", age: 27}
}
const {user1 : {name, age}} = users;
console.log(age); // 18 출력
// for - in문을 통해서 객체의 요소를 구조분해할당하여 모두 출력한다.
for(let user in users) {
   const {name, age} = users[user];
   console.log(name, age);
}

객체를 Object.entries() 함수를 사용하여 이터러블 프로토콜로 바꾼뒤 for - of문으로 실행

// Object.entries(users)를 사용하여 이터러블로 생성 
const users = {
    user1: {name: "KIM", age: 18},
    user2: {name: "LEE", age: 21},
    user3: {name: "SON", age: 30},
    user4: {name: "PARK", age: 27}
}
// 첫번째 요소 예시['user1', { name: 'KIM', age: 18 }] (key, value)형태의 배열이 완성
for(let [key, value] of Object.entries(users)) {
    const {name, age} = value;
    console.log(name, age);
}

3. 배열객체

const users = [
{name: "KIM", age: 18}, 
{name: "LEE", age: 21}, 
{name: "SON", age: 30}, 
{name: "PARK", age: 27}
];
const [{name, age}] = users;
console.log(age); // 18 출력
// for - of 문을 통해서 저장된 객체를 뽑아낸뒤 객체를 구조분해할당하여 출력한다.
for(let user of users) {
    const { name, age } = user;
    console.log(name, age);
}

4. 객체배열

const users = {
    user1: ["KIM", 18],
    user2: ["LEE", 21],   
    user3: ["SON", 30],
    user4: ["PARK", 27]
}
const {user1: [name, age]} = users;
console.log(name); // KIM 출력
// for - in 문을 통해서 객체에 저장된 배열을 뽑아낸뒤 배열을 구조분해할당하여 출력한다.
for(let user in users) {
    const [name, age] = users[user];
    console.log(name, age);
}