구조 분해 할당(Destructuring Assignment)

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

위 내용은 MDN에서 정의하는 구조 분해 할당 내용입니다.

위의 정의된 내용만으로 저는 어느정도 이해는 되지만 간단한 예시를 통해서 좀 더 알아보려고 합니다.

배열 구조 분해 할당

let [a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

위의 예시 코드를 보면 알 수 있듯이 우측의 피연산자를 좌측에 선언된 각 변수에 순서대로 할당 하는 것이라고 보면 됩니다.

const numbers = [10, 20, 30, 40, 50];
const [a, b, c, d, e] = numbers;

console.log(a, b, c, d, e); // 10 20 30 40 50

선언되어 있는 배열자체를 구조 분해 할당도 가능합니다.

rest elements를 사용하면 아래처럼도 사용이 가능합니다.

const numbers = [10, 20, 30, 40, 50];
const [a, b, ...rest] = numbers;

console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

또, 배열 안에 있는 n번째 요소를 따로 각 변수에 담아야 하는 경우에도 기존의 방법보다 간소화해서 표현이 가능합니다.

const numbers = [10, 20, 30, 40, 50];

// 기존 방법
const first = numbers[0];
const second = numbers[1];

console.log(first, second); // 10 20

// 배열 구조 분해 할당 방법
const [first, second] = numbers;

console.log(first, second); // 10 20

이처럼 구조 분해 할당을 사용하면 코드를 좀 더 간편하게 사용이 가능합니다.

객체 구조 분해 할당

객체 구조 분해 할당은 위의 배열에서의 구조 분해 할당과 거의 동일하게 사용되지만 객체에서는 프로퍼티로 분해된다는 차이점이 있습니다.

const user = {
	name: "Kim",
  	age: 28,
  	city: "서울"
}

// 기존 방법
const name = user.name; // "Kim"
const age = user.age; // 28
const city = user.city; // "서울"

// 객체 구조 분해 할당 방법
const { name, age, city } = user;

console.log(name); // "Kim"
console.log(age); // 28
console.log(city); // "서울"

위의 예시 코드를 보면 알듯이 기존의 방법을 사용해도 되지만 구조 분해 할당을 사용하게되면 코드를 훨씬 간소화해서 사용할 수 있습니다.

구조 분해 할당을 사용할 때 기존의 프로퍼티명을 변경해서 변수에 담아줄 수도 있습니다.

const user = {
	name: "Kim",
  	age: 28,
  	city: "서울"
}

const { city: changeCity, name, age } = user;

console.log(changeCity); // "서울"

위 코드처럼 기존의 프로퍼티 명으로만 변수에 담지 않고 새로운 변수명에다가 할당할 수 있으며 객체에서의 구조 분해 할당은 배열에서와는 다르게 프로퍼티명으로 할당되기 때문에 순서에 구애 받지 않습니다.

배열에서 rest elements를 사용 했듯이 객체에서도 활용이 가능합니다.

const user = {
	name: "Kim",
  	age: 28,
  	city: "서울"
}

const { name, ...rest } = user;

console.log(name); // "Kim"
console.log(rest); // { age: 28, city: "서울" }

객체에서도 마찬가지로 구조 분해 할당을 활용하면 코드를 훨씬 간편하게 사용이 가능합니다.