[JS] 구조 분해 할당 파헤치기

구조 분해 할당이란?

자바스크립트에서 많이 쓰이는 자료구조인 배열이나 객체의 값을 분해하여서 각각의 값을 개별적인 변수로 담을 수 있게 해주는 자바스크립트 표현식이다. 개인 프로젝트를 진행하며 구조 분해 할당을 이용한 덕분에 한층 간결한 코드를 만들 수 있었다고 생각하여 내용을 정리해보았다.

배열을 분해하기

할당식(=)의 왼쪽에서 어떤 변수에 값을 할당할지를 정의하고 오른쪽에 분해할 값(배열)을 넣어 사용한다. 왼쪽에서 정의한 변수는 오른쪽에 주어진 배열의 값을 순서대로 할당받는다.

const array = [1, 2, 3];
const [a, b] = array;

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

기본값 지정하기

왼쪽에서 정의한 변수의 개수가 오른쪽에 주어진 배열의 길이보다 짧을 경우, 앞에서부터 차례로 매칭하고 모자란 값은 undefined로 할당된다.

const array = [1, 2];
const [a, b, c] = array;

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

기본값을 지정하여 할당하면 값이 undefined일 경우 지정한 값이 대신 사용된다.

const array = [1, 2];
const [a = 10, b = 20, c = 30] = array;

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

변수의 값을 교환하기

구조 분해 할당을 이용하면 두 변수의 값을 교환할 수 있다. 구조 분해 할당 없이 임시 변수를 사용한 예시는 아래와 같다.

let a = 1;
let b = 2;
const temp = a;
a = b;
b = temp;

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

구조 분해 할당을 사용하면 훨씬 간단하게 값을 교환할 수 있다.

let a = 1;
let b = 2;
[a,b] = [b,a];

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

함수가 반환한 값을 분해하기

function func(){
	return [1, 2, 3];
}

const [a, b, c] = func();

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

필요하지 않은 반환 값은 제외하고 할당할 수 있다.

const [a, , b] = func();

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

스프레드 연산자로 배열의 나머지를 할당하기

배열에서 필요한 만큼의 값을 각각의 변수에 할당하고 나머지는 나머지 값을 모은 배열로 할당할 수 있다. 이때 스프레드 연산자로 할당한 나머지 요소는 맨 마지막에만 올 수 있으며, 이 뒤로 쉼표가 있다면 SyntaxError가 발생한다.

const [a, b, ...c] = [1, 2, 3, 4, 5];

console.log(a); // 1
console.log(b); // 2
console.log(c); // [3, 4, 5]

객체를 분해하기

구조분해할당을 이용하면 객체의 키 값을 꺼내서 단독으로 사용할 수 있다. 배열을 분해할 때와는 다르게 객체 안에 이미 있는 키 값을 꺼내서 변수로 사용한다.

const obj = {a: 1, b: 2};
const {a, b} = obj;

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

기본값 지정하기

배열 구조 분해 할당에서 기본값을 지정한 것과 동일하게 기본값을 설정하여 해당 키 값에 따른 밸류 값이 undefined인 경우에 지정한 값으로 대체할 수 있다.

const obj = {a: 1};
const {a = 10, b = 20} = obj;

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

키 값 대신 새로운 변수 이름으로 할당하기

배열을 분해할 때 처럼 원하는 변수 이름으로 값을 할당할 수도 있다. 객체를 반환하는 함수를 여러번 사용할 때, 반환되는 객체의 키 값은 동일하므로 각자 다른 이름을 변수 이름으로 할당해서 유용하게 사용할 수 있었다.

const obj = {a: 1, b: 2};
const {a: one, b: two} = obj;

console.log(one); // 1
console.log(two); // 2

기본값을 지정하는 것과 새로운 변수 이름으로 할당하는 것을 한번에 할 수도 있다.

const obj = {a: 1};
const {a: one = 10, b: two = 20} = obj;

console.log(one); // 1
console.log(two); // 20

함수의 파라미터 분해하기

함수의 매개변수로 객체를 전달했다면 객체를 해체해서 사용할 수 있다.

const juice = {
	menuName: "orange juice",
	ingredient: "orange",
	recipe: "squeeze"
}

function getMenuName({menuName}){
	return menuName;
}

console.log(getMenuName(juice) + " 주문이 들어왔습니다.");
//orange juice 주문이 들어왔습니다.


function alertJuiceInfo({menuName, ingredient, recipe}){
	console.log(`${menuName}의 재료는 ${ingredient}입니다. ${recipe}의 방식으로 만들어집니다.`);
}

alertJuiceInfo(juice);
//orange juice의 재료는 orange입니다. squeeze의 방식으로 만들어집니다.

스프레드 연산자로 객체의 나머지를 할당하기

배열과 달리 객체에서는 키와 일치하는 변수에 값을 할당하기 때문에 각 키에 맞는 값을 제외하고 나머지가 rest에 포함된다.

const {a, c, ...rest} = {a:1, b:2, c:3, d:4, e:5};

console.log(a); 	// 1
console.log(c); 	// 3
console.log(rest); 	// {b:2, d:4, e:5}

참고문서

구조 분해 할당 - MDN
구조 분해 할당 - 코어 자바스크립트