구조 분해 할당

자바스크립트의 구조분해할당을 활용하면 배열이나 객체의 값을 쉽게 추출해 변수에 할당할 수 있다.

 

 

1. 구조 분해 할당

1-1. 배열 구조 분해 할당

배열의 각 요소를 변수에 할당한다.

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

 

배열의 특정 위치의 값만 필요한 경우 필요없는 부분을 생략하고 변수에 할당할 수 도 있다.

const arr = [1, 2, 3, 4];
const [first, , third] = arr; // 1번 인덱스를 비우고 3번 인덱스를 생략함

console.log(first); // 1
console.log(third); // 3

 

 

1-2. 객체 구조 분해 할당

객체의 경우에는 key를 기준으로 해당 key의 value를 변수에 할당할 수 있다.

const obj = { name: 'Alice', age: 25 };
const { name, age } = obj;

console.log(name); // 'Alice'
console.log(age);  // 25

 

배열과 마찬가지로 필요한 키만 골라서 할당할 수 있으며 새로운 이름으로 할당하는것도 가능하다.

const obj = { name: 'Alice', age: 25 };
const { name: userName, age } = obj; // name 대신 userName이라는 새로운 이름으로 할당됨

console.log(userName); // 'Alice'
console.log(age);      // 25

 

 

 

 

 

2. 구조 분해 할당 활용법

구조 분해 할당은 여러가지 상황에 유용하게 사용이 가능하다. 이 글에서 다루지 않는 여러가지 활용법은 아래 MDN 구조분해할당 글을 통해 확인할 수 있다.

 

구조 분해 할당 - JavaScript | MDN

구조 분해 할당 - JavaScript | MDN

 

 

2-1. 기본값 설정

구조 분해 할당에서 변수를 지정할때 비어있는 경우를 대비하여 기본값을 설정해줄 수 있다.

// 배열의 기본값 설정
const [a=5, b = 2] = [1];
console.log(a); // 1
console.log(b); // 2

// 객체의 기본값 설정
const { a = 10, b = 5 } = { a: 3 };
console.log(a); // 3
console.log(b); // 5

할당 할 값이 있을경우 그 값을 기본으로 사용하고 없는경우에 기본값을 사용한다.

 

2-2. 변수 값 교환하기

변수 값 교환에는 비어있는 변수 하나를 추가로 만들어 교환을 위한 공간으로 활용하는것이 보통이지만 구조 분해 할당을 활용하면 보다 쉽게 변수값 교환이 가능하다.

const a = 1;
const b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

 

 

2-3. 배열, 객체의 남은 값 일괄 할당하기

아주 긴 배열이나 객체 등에서 원하는 값만 할당하여 사용하고 나머지는 다시 배열이나 객체로 묶어 사용하는것도 가능하다.

// 배열의 나머지값 할당
const arr = [1, 2, 3];
const [a, ...b] = arr;
console.log(a); // 1
console.log(b); //[2, 3]

// 객체의 나머지값 할당
const obj = { x: 1, y: 2, z: 3 };
const { x, ...rest } = obj;
console.log(x); // 1
console.log(rest); // { y: 2, z: 3 }