구조 분해 할당이란?
구조 분해 할당은 배열이나 객체의 속성을 변수로 쉽게 추출할 수 있는 JavaScript의 표현식입니다.
// 배열 분해 할당
const numbers = [1, 2, 3];
const [one, two, three] = numbers;
// 객체 분해 할당
const person = { name: 'John', age: 30 };
const { name, age } = person;
1. 함수 매개변수에서의 구조 분해 할당
함수 매개변수로 전달되는 객체의 속성을 직접 분해 할당하면, 가독성과 코드의 간결성을 동시에 높일 수 있습니다.
function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
const user = { name: 'Alice', age: 25 };
greet(user);
2. 중첩 구조 분해 할당
객체 안에 객체가 있는 경우, 중첩 구조 분해 할당을 사용하여 깊숙한 속성도 손쉽게 추출할 수 있습니다.
const person = {
name: 'Bob',
address: {
city: 'New York',
zipCode: '10001'
}
};
const {
name,
address: { city, zipCode }
} = person;
console.log(name); // Bob
console.log(city); // New York
console.log(zipCode); // 10001
3. 기본값 설정
구조 분해 할당 시 기본값을 설정하여, 값이 없을 때의 기본 동작을 정의할 수 있습니다.
const { name = 'Guest', age = 18 } = { name: 'Charlie' };
console.log(name); // Charlie
console.log(age); // 18
4. 배열의 나머지 요소 처리
나머지 요소 연산자(Rest Operator)를 사용하여 배열의 나머지 요소들을 쉽게 추출할 수 있습니다.
const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
const [first, second, ...rest] = colors;
console.log(first); // red
console.log(second); // green
console.log(rest); // ['blue', 'yellow', 'purple']
5. 변수 이름 변경
구조 분해 할당 시 변수의 이름을 변경할 수 있어, 원하는 이름으로 변수를 사용할 수 있습니다.
const user = { n: 'David', a: 40 };
const { n: userName, a: userAge } = user;
console.log(userName); // David
console.log(userAge); // 40
구조 분해 할당은 코드의 가독성을 높이고, 간결하게 작성할 수 있는 강력한 기능입니다.