JavaScript에서 디스트럭처링 할당(Destructuring Assignment)은 배열이나 객체의 속성을 분해하여 변수에 할당하는 간편한 방법을 제공합니다. 이 문법은 코드를 더 읽기 쉽고, 더 간결하게 작성할 수 있게 해줍니다. 디스트럭처링 할당은 배열과 객체 모두에서 사용할 수 있습니다.
1. 배열 디스트럭처링
배열 디스트럭처링을 사용하면 배열의 요소를 손쉽게 변수에 할당할 수 있습니다.
1.1 기본 배열 디스트럭처링
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 31.2 디폴트 값
배열의 요소가 undefined일 경우 디폴트 값을 지정할 수 있습니다.
const numbers = [1, 2];
const [a, b, c = 3] = numbers;
console.log(a, b, c); // 1 2 31.3 일부 요소 건너뛰기
배열의 일부 요소를 건너뛰고 할당할 수 있습니다.
const numbers = [1, 2, 3, 4];
const [a, , b] = numbers;
console.log(a, b); // 1 31.4 나머지 요소
나머지 요소를 배열로 받을 수 있습니다.
const numbers = [1, 2, 3, 4];
const [a, ...rest] = numbers;
console.log(a); // 1
console.log(rest); // [2, 3, 4]2. 객체 디스트럭처링
객체 디스트럭처링을 사용하면 객체의 속성을 변수에 손쉽게 할당할 수 있습니다.
2.1 기본 객체 디스트럭처링
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name, age); // Alice 252.2 디폴트 값
객체의 속성이 undefined일 경우 디폴트 값을 지정할 수 있습니다.
const person = { name: 'Alice' };
const { name, age = 30 } = person;
console.log(name, age); // Alice 302.3 속성 이름 변경
디스트럭처링 할 때 속성의 이름을 변경할 수 있습니다.
const person = { name: 'Alice', age: 25 };
const { name: firstName, age: yearsOld } = person;
console.log(firstName, yearsOld); // Alice 252.4 나머지 속성
나머지 속성을 객체로 받을 수 있습니다.
const person = { name: 'Alice', age: 25, city: 'New York' };
const { name, ...rest } = person;
console.log(name); // Alice
console.log(rest); // { age: 25, city: 'New York' }3. 중첩 구조 디스트럭처링
배열이나 객체가 중첩된 경우에도 디스트럭처링 할당을 사용할 수 있습니다.
3.1 중첩된 배열
const numbers = [1, [2, 3], 4];
const [a, [b, c], d] = numbers;
console.log(a, b, c, d); // 1 2 3 43.2 중첩된 객체
const person = {
name: 'Alice',
address: {
city: 'New York',
zip: 10001
}
};
const { name, address: { city, zip } } = person;
console.log(name, city, zip); // Alice New York 100014. 함수 매개변수에서의 디스트럭처링
함수의 매개변수로 전달되는 객체나 배열을 디스트럭처링 할당할 수 있습니다.
4.1 객체 디스트럭처링
function printPerson({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
const person = { name: 'Alice', age: 25 };
printPerson(person); // Name: Alice, Age: 254.2 배열 디스트럭처링
function sum([a, b]) {
return a + b;
}
const numbers = [1, 2];
console.log(sum(numbers)); // 35. 활용 사례
5.1 스왑 변수
디스트럭처링을 사용하여 두 변수의 값을 쉽게 스왑할 수 있습니다.
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 15.2 API 응답 처리
API로부터 받은 JSON 데이터를 디스트럭처링하여 쉽게 처리할 수 있습니다.
const response = {
status: 200,
data: {
user: {
id: 1,
name: 'Alice'
}
}
};
const {
status,
data: {
user: { id, name }
}
} = response;
console.log(status, id, name); // 200 1 Alice5.3 함수 반환 값
디스트럭처링을 사용하여 함수의 반환 값을 쉽게 분해할 수 있습니다.
function getCoordinates() {
return [50.123, 8.456];
}
const [lat, lon] = getCoordinates();
console.log(lat, lon); // 50.123 8.456결론
디스트럭처링 할당은 JavaScript에서 배열과 객체를 다루는 매우 유용한 기능입니다. 이를 통해 코드를 더 간결하고 읽기 쉽게 작성할 수 있습니다. 다양한 상황에서 디스트럭처링을 사용하여 복잡한 데이터 구조를 쉽게 처리할 수 있으며, 함수의 매개변수나 반환 값을 다룰 때 특히 유용합니다. 이 문법을 잘 활용하면 코드의 가독성과 유지보수성이 크게 향상될 수 있습니다.