[JS ES6] Destructuring 문법

Destructuring 문법은 배열이나 객체 안의 중요한 데이터들을 손쉽게 추출하여 변수에 할당할 수 있도록 도와줍니다. 한두 개의 데이터라면 기존 방식도 괜찮지만, 여러 데이터를 뽑아야 한다면 코드가 길어지게 되는데, 이때 유용하게 사용됩니다.

---

1️⃣ 배열 Destructuring

1-1. 기본 배열 추출

전통적인 방식은 배열 인덱스로 하나씩 추출합니다.

var array = [2, 3, 4];
var a = array[0];
var b = array[1];
var c = array[2];

Destructuring을 사용하면:

var [a, b, c] = [2, 3, 4];
// a = 2, b = 3, c = 4

1-2. 디폴트 값 지정

배열의 요소 개수가 부족할 경우, 기본값(default value)을 설정할 수 있습니다.

var [a, b, c = 5] = [2, 3];
// a = 2, b = 3, c = 5 (배열에 세 번째 값이 없으므로 5가 기본값으로 할당)

---

2️⃣ 객체 Destructuring

2-1. 객체의 키-값 추출

객체의 key와 value를 변수에 쉽게 할당할 수 있습니다.

var { name: a, age: b } = { name: 'Kim', age: 30 };
// a = 'Kim', b = 30

• 참고: 좌측의 name: a는 객체의 key인 name을 변수 a에 할당한다는 뜻입니다.

2-2. key 이름과 변수명이 같다면 생략 가능

객체의 key와 변수명이 동일하다면, 한 번만 작성해도 됩니다.

var { name, age } = { name: 'Kim', age: 30 };
// name = 'Kim', age = 30

2-3. 객체를 변수로 묶어 넣기

변수를 객체에 집어넣을 때도 Destructuring과 비슷한 개념이 적용됩니다.

var name = 'Kim';
var age = 30;
var obj = { name, age };
// key와 변수명이 같으면 { name: name, age: age }를 { name, age }로 축약 가능

---

3️⃣ 함수 파라미터에서의 Destructuring

3-1. 객체를 함수 파라미터로 추출하기

함수의 파라미터에 직접 객체의 key를 구조 분해하여 변수로 사용할 수 있습니다.

function 함수({ name, age }) {
  console.log(name);
  console.log(age);
}

var obj = { name: 'Kim', age: 20 };
함수(obj); // name: 'Kim', age: 20

• 설명: 객체 전체를 전달하면 함수 내부에서 key 이름과 동일한 변수로 바로 추출됩니다.

3-2. 배열을 함수 파라미터로 추출하기

배열도 같은 방식으로 구조 분해할 수 있습니다.

function 함수([name, age]) {
  console.log(name);
  console.log(age);
}

var array = ['Kim', 30];
함수(array); // name: 'Kim', age: 30

---

4️⃣ 실전 예제 및 Q&A

Q1. 변수 재할당과 디폴트 값

var [number, address] = [30, 'seoul'];
var { address: a, number = 20 } = { address, number };

• 첫 번째 줄:
  • number = 30, address = 'seoul'
• 두 번째 줄:
  • 객체는 { address: 'seoul', number: 30 }과 동일합니다.
  • a에 'seoul'이 할당되고, number는 이미 30이므로 그대로 30이 유지됩니다.
• 최종 결과:
  • a = 'seoul'
  • address = 'seoul' (첫 번째 줄의 변수는 그대로 유지)
  • number = 30

Q2. 중첩 객체와 배열에서 데이터 추출

주어진 객체:

let 신체정보 = {
  body: {
    height: 190,
    weight: 70
  },
  size: ["상의 Large", "바지 30인치"],
};

목표: 키, 몸무게, 상의 사이즈, 하의 사이즈를 각각 변수로 추출

Destructuring을 사용한 해결 방법:

let {
  body: { height, weight },
  size: [상의, 하의]
} = 신체정보;

• 결과:
  • height = 190
  • weight = 70
  • 상의 = "상의 Large"
  • 하의 = "바지 30인치"

---

📌 정리

• 배열 Destructuring:
  배열의 요소를 간결하게 변수로 추출하고, 기본값을 지정할 수 있습니다.
• 객체 Destructuring:
  객체의 key를 이용해 변수로 할당하거나, key와 변수명이 같으면 축약하여 사용 가능합니다.
• 함수 파라미터 활용:
  함수의 매개변수로 전달된 객체나 배열을 구조 분해하여 바로 변수로 사용할 수 있으므로, 코드가 더욱 깔끔해집니다.
• 실제 코딩에서 유용:
  복잡한 자료구조에서 필요한 데이터만 뽑아내어 효율적으로 활용할 수 있습니다.