💡 구조분해 할당이란?

구조분해 할당은 하나로 구조화 된 배열, 객체를 파괴하여 1개이상의 변수에 개별적으로 할당하는 것을 말한다.

배열이나, 객체에서 필요한 값만 추출하여 변수에 할당할 때 유리하다.

const arr = [1, 2, 3];

// 구조분해 할당
const [one, two, three] = arr;
console.log(one, two, three);  // 결과: 1 2 3

✅ 배열 구조분해할당

1. 기본 사용법

// 요소갯수는 반드시 일치할 필요없다!
const [one, two] = [1, 2, 3];
console.log(one, two);  // 결과: 1 2 

const [one, ,three] = [1, 2, 3];
console.log(one, three);  // 결과: 1 3

2. 기본값 설정

// 기본값 설정(할당 값 우선 적용)
const [one, two, three, four = 4] = [1, 2, 3];
console.log(one, two, three, four);  // 결과: 1 2 3 4 

const [one, two, three = 100, four = 4] = [1, 2, 3];
console.log(one, two, three, four);  // 결과: 1 2 3 4 

3. 스프레드(...) 활용

// ... 활용
const [one, ...rest] = [1, 2, 3];
console.log(one, rest);  // 결과: 1 [2, 3]

✅ 객체 구조분해할당

객체의 구조 분해할당은 객체의 각 프로퍼티를 객체로부터 추출하여 변수에 할당한다.
이때 할당 기준은 프로퍼티 키다.

1. 기본 사용법

// 프로퍼티 키 기준이므로 순서는 바뀌어도 상관없다!
const user = {firstName: 'Hong', lastName: 'DongKeun'}

const {lastName, firstName} = user;

console.log(firstName, lastName);  // 결과: Hong DongKeun 

2. 프로퍼티 키 값 변경

const user = {firstName: 'Hong', lastName: 'DongKeun'}

// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당
const {lastName: ln, firstName: fn} = user;

console.log(fn, ln);  // 결과: Hong DongKeun 

🔥객체 구조분해 활용

(1) 함수의 매개변수

// 구조분해 적용전
function printTodo(todo){
  console.log(`내 성은 ${todo.firstName}, 이름은 ${todo.lastName}입니다.`)
}

printTodo({firstName: 'Hong', lastName: 'DongKeun'});  // 내 성은 홍, 이름은 동근입니다.

// 구조분해 적용후
function printTodo({fn, ln}){
  console.log(`내 성은 ${fn}, 이름은 ${ln}입니다.`)
}

printTodo({firstName: 'Hong', lastName: 'DongKeun'}); // 내 성은 홍, 이름은 동근입니다.

(2) 배열 요소가 객체

const data = [
  {id: 1, name: 'Lebron', position: 'SG'},
  {id: 2, name: 'Curry', position: 'PG'}
  {id: 3, name: 'Durant', position: 'PF'}
]

// data의 두번째 요소의 id값만 추출
const [, { id }] = data;

console.log(id);  // 결과값: 2

(3) 중첩 객체

const data = {
  id: 1, 
  name: 'Lebron',
  backNumber: {
  	lakers: 23,
    olympic: 8,
  }      
}

// backNumber 키로 추출한 후 olympic키로 한번 더 추출한다.
const [backNumber: { olympic }] = data;

console.log(olympic);  // 결과값: 8

(4) 스프레드(...)

const { x, ...rest } = { x: 1, y: 2, z: 3 }

console.log(x, rest);  // 결과값: 1 { y: 2, z: 3 }