[Javascript] 구조 분해 할당

ES2015에서 등장한 구조 분해 할당에 대해 다룹니다. 구조 분해는 배열이나 객체의 특정한 자료를 이용할 때 사용하는 방식입니다.

---

1. 배열의 구조 분해 할당

1-1. 변수에 배열의 값 할당

기존에 배열의 요소를 변수에 할당하기 위해서 다음과 같이 이용했었습니다.

let arr = [1, 2, 3];
let num1 = arr[0];

 

구조 분해 할당을 이용하면 대괄호를 이용하여 인덱스 위치에 변수를 삽입하는 방식으로 편하고 직관적이게 변수에 배열 요소 값을 할당할 수 있습니다.

let arr = [1, 2, 3];
let [num1, num2, num3] = arr;

 

1-2. 존재하지 않는 요소의 기본값 할당

위의 경우에서 배열에 존재하지 않는 인덱스의 요소를 변수에 할당하려고 하면 오류가 발생하거나, ||연상ㄴ자를 통해 기본값을 따로 할당했었습니다.

let arr = [1];
let num1 = arr[0];
let num2 = arr[1] || 1;
//num2에 arr[1]을 할당하는데 arr[1]이 없다면 기본값 1을 할당

 

이랬던 구조를 새로운 구조 분해 할당에서는 ||연산자를 빼버리고 직관적으로 대입 연산자(=)를 이용합니다.

let arr = [1];
let [num1, num2 = 1] = arr;
//num2에 arr[1]을 할당하는데 arr[1]이 존재하지 않으면 기본값으로 1을 설정

대입 연산자를 이용하니 좀 더 직관적이고 알기 쉽게 되었습니다.

 

 

---

2. 객체의 구조 분해 할당

객체도 분해 할당이 위에서 본 배열과 크게 다르지 않습니다.

 

2-1. 변수에 객체의 값 할당

기존의 객체 값 할당은 다음과 같았습니다.

let obj = {
	key1: '가'
    	key2: '나'
};

let key1 = obj.key1;
let key2 = obj.key2;

 

ES2015의 구조 분해 할당을 이용하면 다음과 같이 코드를 변경할 수 있습니다.

let obj = {
	key1: '가',
    	key2: '나',
};	
let {
	key1,
	key2,
} = obj;

 

 

 

2-2. 할당하는 변수명의 교체

위에서 키 값을 통해 추출한 변수명을 다른 변수명으로 교체하고 싶다면 콜론(:)을 이용하여 새로운 변수명으로 할당합니다.

let obj = {
	key1: '가',
    	key2: '나',
};	
let {
	key1: newVarName, //키 값: 할당할 변수명
	key2,
} = obj;

 

 

2-3. 존재하지 않는 키 값의 기본값 할당

마찬가지로 존재하지 않는 키 값에 기본값을 할당할 수 있는데 기존에는 배열처럼 ||연산자를 이용했습니다.

let obj = {
	key1: '가',
};

let key2 = obj.key2 || '나';

 

ES2015 이후의 구조 분해 할당을 이용하면 다음과 같이 바꿀 수 있습니다.

let obj = {
	key1: '가',
};
let {
	key1,
    	key2 = '나다',
} = obj;

---

3. 두 변수 값의 치환

기존에 두 변수 값을 치환하려면 '버블 정렬'과 같은 방식을 이용했어야 했었습니다. (메소드도 있고 다른 방법도 많지만 예시는 버블 정렬로 들겠습니다.)

let num1 = 100;
let num2 = 10;

let temp = num2;
num2 = num1;
num1 = temp;

 

이랬던 치환 과정도 ES2015의 구조 분해 할당을 이용하면 다음과 같이 직관적으로 코드가 변경됩니다.

let num1 = 100;
let num2 = 10;

[num1, num2] = [num2, num1];
//[치환시킬 변수] = [치환할 변수 값];

---