Javascript - 구조분해 할당 (Destructuring Assignment)

 

 

구조분해 할당은 JavaScript의 ES6 문법 중 하나로, 객체나 배열의 값을 변수에 손쉽게 추출할 수 있도록 도와주는 문법이다.

---

1. 배열 구조분해

배열의 각 요소를 변수로 쉽게 꺼낼 수 있다.

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

사용 시 주의: 배열 순서가 중요하다.

기본값 지정

const [x, y = 100] = [10];
console.log(x); // 10
console.log(y); // 100 (undefined를 기본값으로 대체)

---

2. 객체 구조분해

객체의 프로퍼티를 변수에 바로 할당할 수 있다.

const user = { name: "John", age: 30 };
const { name, age } = user;
console.log(name); // "John"
console.log(age);  // 30

변수명 변경 (별칭 사용)

const { name: userName } = user;
console.log(userName); // "John"

기본값 지정

const { gender = "unknown" } = user;
console.log(gender); // "unknown"

---

3. 함수 매개변수에서 구조분해

React에서 흔히 사용되는 패턴이다.

객체 매개변수 구조분해

function greet({ name, age }) {
  console.log(`Hello, ${name}. You are ${age} years old.`);
}

const user = { name: "Alice", age: 25 };
greet(user); // Hello, Alice. You are 25 years old.

배열 매개변수 구조분해

function sum([a, b]) {
  return a + b;
}
console.log(sum([5, 10])); // 15

---

4. 중첩 구조분해

객체 안의 객체 또는 배열까지 한 번에 구조분해 가능하다.

const user = {
  name: "Tom",
  address: {
    city: "Seoul",
    zip: "12345"
  }
};

const {
  address: { city, zip }
} = user;

console.log(city); // "Seoul"
console.log(zip);  // "12345"

---

✅ 요약

• 배열 구조분해는 순서대로 값을 추출
• 객체 구조분해는 키를 기준으로 값을 추출
• 함수 인자에서도 활용 가능
• React에서 props, state, hook 사용 시 매우 자주 사용됨

 

 

구조분해 할당은 코드 가독성을 높이고 변수 선언을 간결하게 만드는 데 큰 도움이 된다.