📚 구조 분해 할당 (Destructuring Assignment) in 자바스크립트
자바스크립트의 구조 분해 할당(Destructuring Assignment) 문법은 배열이나 객체의 속성을 해체하여 각각의 값을 개별 변수에 할당하는 강력하고 유용한 기능이다. 특히 함수에 인자로 객체나 배열을 전달할 때 일부 값만 필요한 경우 매우 유용하게 사용 가능하다. 구조 분해 할당에 대해 자세히 알아보며 그 강력함을 체감해보자.
구조 분해 할당
1. 배열 분해
먼저, 구조 분해 할당을 사용하면 배열을 쉽게 분해할 수 있다. 배열의 요소를 순서대로 개별 변수에 할당하게 되며, 만약 할당할 값이 없으면 undefined가 할당된다.
이에, 배열 요소가 부족하더라도 오류는 발생하지 않으며, 필요한 경우 기본값(default value)을 설정하여 값을 할당하는 것도 가능하다.
const ranking = ["Jake", "Amy", "Terry"];
const [first, second, third, fourth] = ranking;
console.log(first, second, third, fourth); // Jake Amy Terry undefined
// cf> 기본값을 설정한 경우
const [first, second, third, fourth = "Sera"] = ranking;
console.log(first, second, third, fourth); // Jake Amy Terry Sera
더 나아가, 스프레드 문법을 사용하면 배열에서 나머지 요소들을 쉽게 추출할 수 있다. 배열 분해 할당에서 마지막 변수를 스프레드 문법(...)으로 선언하면, 나머지 모든 요소들이 해당 변수에 배열 형태로 할당된다.
예를 들어, 아래 코드에서는 첫 번째, 두 번째, 세 번째 요소는 각각 first, second, third 변수에 할당되고, 나머지 요소들은 rest 배열에 저장되게 된다.
const ranking = ["Jake", "Amy", "Terry", "Rosa", "Sera"];
const [first, second, third, ...rest] = ranking;
console.log(first, second, third, rest); // Jake Amy Terry [ 'Rosa', 'Sera' ]스프레드 문법 사용시 주의점
스프레드 문법은 나머지 요소들을 모두 가져오는 역할을 하기 때문에 항상 마지막 변수에만 사용할 수 있다는 점을 꼭 명심하자.
cf> 구조 분해 할당을 응용하여 두 변수의 값을 간단하게 교환하기
배열에서 구조 분해 할당을 응용할 수 있는 방법은 매우 많은데, 그 중 가장 대표적으로 많이 활용되는 두 변수의 값을 교환하는 방법과 원리에 대해 알아보자.
앞서 구조 분해 할당은 배열의 각 요소를 변수에 할당하는 기능을 제공한다 했다. 이를 응용하면 두 변수의 값을 손쉽게 교환할 수 있다. 아래 코드가 그 예이다.
let a = 5;
let b = 10;
// 기존 a <-> b 값 교환 방법
let temp = a;
a = b;
b = temp;
// 구조 분해 할당을 이용한 a <-> b 값 교환 방법
[a, b] = [b, a];
// 결과
console.log(a, b); // 10 5동작 원리는 다음과 같다.
1. 오른쪽의 배열 [b, a]는 현재 b와 a의 값을 각각 순서대로 담고 있다.
2. 구조 분해 할당이 실행되면서 [a, b]의 각 자리에 오른쪽 배열 [b, a]의 값을 순차적으로 할당하게 된다.
3. 결과적으로, a는 원래의 b 값을, b는 원래의 a 값을 가지게 되어 두 값이 서로 교환되게 된다.
이러한 원리로 인해, 구조 분해 할당을 사용하면 임시 변수를 사용하지 않고 두 변수의 값을 교환함으로써, 간단한 값 교환 작업을 한 줄로 처리할 수 있게 되는 것이다.
2. 객체 분해
배열과 달리, 객체는 프로퍼티 네임을 통해서 분해가 되기 때문에 할당 연산자 오른편의 객체에서 할당 연산자 왼편에 선언된 변수의 이름과 똑같은 프로퍼티 네임이 있으면 해당 변수 이름에 그 값이 할당되는 방식으로 동작한다.
따라서, 객체 분해 시 객체의 속성 이름을 기준으로 변수가 할당되며, 순서는 상관없다. 추가적으로, 만일 객체에 존재하지 않는 프로퍼티 네임으로 변수가 선언이 되어있다면, undefined값이 할당된다.
const car = {
brand: "Hyundai",
model: "EV6",
year: 2022,
color: "white",
};
// 기존 방식
const brand = car.brand;
const model = car.model;
// 구조 분해 할당
const { brand, model, size } = car;
// 결과
console.log(brand, model); // Hyundai EV6 undefined이 때, 다른 변수명으로 속성을 할당하고 싶을 때는 콜론(:)을 사용하여 새로운 이름을 지정할 수도 있다.
const { brand: carBrand, model: carModel } = car;
console.log(carBrand, carModel); // Hyundai EV6배열과 마찬가지로, 객체에서도 스프레드 문법을 사용할 수 있다. 이때, 스프레드 문법으로 선언한 변수에는 남은 프로퍼티들의 정보가 하나의 객체로 묶여 저장된다.
const { brand, ...rest } = car;
console.log(brand, rest); // Hyundai { model: 'EV6', year: 2022, color: 'white' }3. 중첩 구조 분해 (Nested Destructuring)
객체나 배열이 다른 객체나 배열을 포함하는 경우, 구조 분해 할당을 중첩해서 사용할 수 있습니다. 이를 통해 다차원 배열이나 복잡한 객체에서 원하는 값을 추출할 수 있다.
const user = {
name: "Alice",
address: {
city: "New York",
zip: "10001"
}
};
const {
name,
address: { city, zip }
} = user;
console.log(name); // "Alice"
console.log(city); // "New York"
console.log(zip); // "10001"위 예시에서 살펴볼 수 있듯이 중첩 구조 분해를 활용하면 객체나 배열이 중첩된 구조일 때도 필요한 값을 간결하게 추출할 수 있으며, 특히 JSON 데이터나 API 응답 등에서 복잡한 데이터 구조를 처리할 때 유용하게 활용 가능하다.
Outro
구조 분해 할당은 JavaScript에서 필수적으로 알아야 할 문법으로, 복잡한 데이터 구조를 간결하게 처리 가능하는 점에서 매우 유용하다. 또한, 실제 개발에서도 자주 사용되며, 코드의 효율성을 크게 향상시킬 수 있으니, 구조 분해 할당을 정확히 이해하고 다양한 상황에서 유연하게 활용할 수 있도록 노력해보자.
