> 구조분해할당이란?

• 구조 분해 할당(Destructuring Assignment)은 배열과 객체에서 값을 추출하여 변수에 쉽게 할당할 수 있는 편리한 문법

1. 배열의 구조 분해 할당

let arr = [1, 2, 3];

let [one, two, three, four = 4] = arr;
// four = 4 는 값이 할당되지 않을 경우 초기값을 4로 할당하겠다는 뜻

console.log(one);   // 출력: 1
console.log(two);   // 출력: 2
console.log(three); // 출력: 3
console.log(four);  // 출력: 4 (기본값)

2. 객체의 구조 분해 할당

let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
};

let { age: myAge, hobby, name, extra = "hello" } = person;

console.log(myAge); // 출력: 27
console.log(hobby); // 출력: 테니스
console.log(name);  // 출력: 이정환
console.log(extra); // 출력: hello (기본값)

객체 person에서 age, hobby, name 속성을 각각 myAge, hobby, name 변수에 할당한다.

extra 속성은 person에 없으므로 기본값 "hello"가 할당된다.

age: myAge처럼 속성명을 변경할 수도 있다.

3. 함수 매개변수에서 객체 구조 분해 할당 사용

const func = ({ name, age, hobby, extra }) => {
  console.log(name, age, hobby, extra);
};

let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
};

func(person);
// 출력: 이정환 27 테니스 undefined

함수 매개변수에 구조 분해 할당을 해놓은 채 함수에 객체를 매개변수로 넣어주면 구조 분해를 통해 함수 내부 실행문에서 사용하여 log를 찍는 것을 확인할 수 있음 이때, extra는 존재하지 않기 때문에 falsy한 값인 undefined 가 출력됨.

이를 활용하여

배열 요소 스왑

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

console.log(a); // 출력: 2
console.log(b); // 출력: 1

기본값 설정

let options = { timeout: 100 };
let { timeout, retries = 3 } = options;

console.log(timeout); // 출력: 100
console.log(retries); // 출력: 3 (기본값)

함수의 리턴값 처리

function getUser() {
  return ["이정환", 27];
}

let [name, age] = getUser();
console.log(name); // 출력: 이정환
console.log(age);  // 출력: 27

다양한 상황에서 유용하게 활용될 수 있다.