ES6에서 새롭게 추가된 비구조화 할당(Destructuring Assignment)에 대해 알아보자.
비구조화 할당이란?
배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식이다.
각 배열과 객체의 비구조화 할당에 대해 하나씩 알아가보자.
1. 배열 비구조화 (Array Destructuring)
1-1. 기본 사용법
// 기본 문법(비구조화 할당 x)
const colorList = ['red', 'yellow', 'green'];
const red = colorList[0];
const yellow = colorList[1];
const green = colorList[2];
// 비구조화 할당 문법
const [red, yellow, green] = ['red', 'yellow', 'green'];우선 비구조화 할당을 사용하지 않으면 배열에서 하나씩 뽑아서 변수에 할당해줘야 하는데,
비구조화 할당을 사용할 경우 좌측에는 변수명 집합 우측에는 해당 변수에 할당할 배열만 넣어주면 알아서 할당된다.
각 순서에 맞게 할당되는것을 확인할 수 있다.
1-2. 선언에서 분리한 할당 및 변수 값 교환
// 선언에서 분리한 할당
const colorList = ['red', 'yellow', 'green'];
let red, yellow, green;
[red, yellow, green] = colorList;
// 변수 값 교환
let a = 1;
let b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 11-1. 예제를 통해 기본 사용법에 대해 알아봤었는데,
이번 예제처럼 미리 선언되어있는 변수를 통해서도 비구조화 할당이 가능하다.
그리고 비구조화 할당을 활용한 변수값의 교환이 가능한데,
이는 두 변수의 값을 서로 교환하기 위해서는 기존에는 임시 변수가 필요했었으나 비구조화 할당을 통해 그 임시변수가 필요하지 않고 위 예제처럼 서로 교환이 가능하다.
1-3. 기본값 할당
// 기본값 할당 x
const [a, b, c] = [1, 2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // undefined
//기본값 할당 o
const [a = 4, b = 5, c = 6] = [1, 2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 6변수 집합의 길이보다 우측의 할당하려는 배열의 길이가 길면 상관은 없지만 그 반대로 변수 집합의 길이보다 우측의 할당하려는 배열의 길이가 짧을 경우 문제가 생긴다.
그러면 당연히 변수에 아무값도 할당되지 않았기 때문에 undefined가 출력되는데,
이를 방지하기 위해 기본값을 할당할 수 있다.
기본값을 할당할 경우 비구조화 할당을 하려는 값이 undefined일 때 기본값을 대신 사용하여 할당한다.
그래서 위 예제에서 기본값을 할당했을 경우 c변수만 기본값이 주입된것을 볼 수 있다.
1-4. 일부 반환 값 무시하기
// 변수를 이용한 할당
const [a, , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3
const [a, , b = 4] = [1, 2];
console.log(a); // 1
console.log(b); // 4
// 함수를 이용한 할당
function f() {
return [1, 2, 3];
}
const [a, , b] = f();
console.log(a); // 1
console.log(b); // 3예제에서 이것저것 많이 써놨는데, 일단 비구조화 할당은 각 위치에 맞는 index값에 따라 할당되기 때문에 비워두기만 하면 반환 값을 무시할 수 있다.
하지만 일부 반환값을 무시하였을때 undefined가 발생할 수 있을 경우 1-3예제처럼 기본값을 할당해서 사용하면 된다.
마지막 함수를 이용한 할당은 사실 별 의미없지만,
함수를 통해서도 비구조화 할당에 사용할 배열값만 반환해주면 사용할 수 있다는 것을 보여주는 것이다.
1-5. 변수에 배열의 나머지 값들 할당하기 (ft. 배열 결합/합치기/깊은 복사)
- 나머지 매개 변수 및 확산 연산자 (Rest parameter and Spread operator) 라고도 한다.
// 배열의 나머지 값 할당
const [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
// 배열의 결합
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); [1, 2, 3, 4, 5, 6];
// 배열의 복사
const arr1 = [1, 2, 3];
const arr2 = arr1;
const arr3 = [...arr1];
const [...arr4] = arr1;
arr1[0] = 7;
console.log(arr1); // [7, 2 ,3]
console.log(arr2); // [7, 2 ,3]
console.log(arr3); // [1, 2 ,3]
console.log(arr4); // [1, 2 ,3]위 예제처럼 비구조화 할당할 때 변수에 하나씩 담을 필요없이 그냥 나머지 구문(...)을 이용해 할당하고 남은 값들을 하나의 변수에 전부 할당할 수 있다.
이 나머지 구문(...)을 통해 배열의 결합과 배열의 복사 역시 가능하다.
2. 객체 비구조화 (Object Destructuring)
1-1. 기본 사용법
// 기본 문법(비구조화 할당 x)
const colors = {
red : 'RED',
yellow : 'YELLOW',
green : 'GREEN'
};
const red = colors.red;
const yellow = colors.yellow;
const green = colors.green;
// 비구조화 할당 문법
const { red, yellow, green } = {
red : 'RED',
yellow : 'YELLOW',
green : 'GREEN'
};배열에서 객체로만 바뀌었을뿐이지 사실상 사용법은 비슷하다.
단지 배열 비구조화와 다른점이 있다면,
배열 비구조화의 경우 index에 따라 값이 할당되지만 객체 비구조화의 경우에는 동일한 key값에 할당된다.
1-2. 선언에서 분리한 할당
const colors = {
red : 'RED',
yellow : 'YELLOW',
green : 'GREEN'
};
let red, yellow, green;
({red, yellow, green} = colors);객체 비구조화 역시 선언에서 분리한 할당이 가능한데, 한가지 주의할 점은 괄호()를 사용해 주어야한다는 점이다.
스크립트에서는 블록{} 으로 간주하기 때문에 위 예제처럼 사용해 주어야 한다.
(괄호 역시 주의해야하는게 꼭 세미콜론을 넣어주어 끝났다는 표시를 해주도록 하자.)
1-3. 기본값 할당
// 기본값 할당 x
const {a, b, c} = {a : 1, b : 2};
console.log(a); // 1
console.log(b); // 2
console.log(c); // undefined
//기본값 할당 o
const {a = 4, b = 5, c = 6} = {a : 1, b : 2};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 6객체 비구조화 역시 배열 비구조화 처럼 키값이 매칭되지 않아 아무값도 할당되지 않았기 때문에 undefined가 출력되는데,
이를 방지하기 위해 기본값을 할당할 수 있다.
기본값을 할당할 경우 비구조화 할당을 하려는 값이 undefined일 때 기본값을 대신 사용하여 할당한다.
그래서 위 예제에서 기본값을 할당했을 경우 c변수만 기본값이 주입된것을 볼 수 있다.
1-4. 원래의 key 대신 다른 변수명 사용하기(ft. 기본값 할당)
// 새로운 변수명 할당과 기본값 할당의 동시 사용
const {a:aa = 4, b:bb = 5, c:cc = 6} = {a : 1, b : 2};
console.log(aa); // 1
console.log(bb); // 2
console.log(cc); // 6객체 비구조화는 동일한 key값을 통해 할당된다고 설명을 하였는데,
할당을 받고나서 새롭게 사용할 변수명을 콜론(:)을 통해 변경이 가능하다.
그리고 동시에 기본값 할당 역시 사용할 수 있다.
1-5. 변수에 객체의 나머지 값들 할당하기 (ft. 객체 결합/합치기/깊은 복사)
- 나머지 매개 변수 및 확산 연산자 (Rest parameter and Spread operator) 라고도 한다.
// 객체의 나머지 값 할당
const {a, ...b} = {a : 1, b : 2, c : 3};
console.log(a); // 1
console.log(b); // {b : 2, c : 3}
// 객체의 결합
const obj1 = {a : 1, b : 2, c : 3};
const obj2 = {c : 4, d : 5, e : 6};
const obj3 = {...obj1, ...obj2};
console.log(obj3); // {a : 1, b : 2, c : 4, d : 5, e : 6};
// 객체의 복사
const obj1 = {a : 1, b : 2, c : 3};
const obj2 = {
...obj1,
c : 4,
d : 5
}
console.log(obj3); // {a : 1, b : 2, c : 4, d : 5};객체의 나머지 값 할당에 대해서는 객체 비구조화 할당의 원리가 아무리 key값 매칭이라고 하여도 나머지 값을 뜻하는 구문 전개연산자(...)은 우항의 key에 영향을 받지 않으므로 b라는 키값에 나머지 값들이 할당되는것을 볼 수 있다.
그 다음 객체의 결합에 있어서는 아무래도 객체다 보니까중복되는 key 값에 대해서는 마지막으로 결합된 key값을 따르게 된다. 위 예제에서 c 값이 4로 할당된 것을 볼 수 있다.
마지막으로 객체의 복사에 대해서는 배열과 마찬가지로 깊은 복사가 이루어지며 객체의 복사에서 매우 좋은 점은 기존값에 새로운 값을 할당 할 수 있다는 점이다.
객체의 결합 부분과 마찬가지로 복사를 먼저 진행하고 c 값을 새롭게 할당하다 보니 c값이 4로 할당된것을 볼 수 있다.
배열과 객체의 비구조화 할당에 대해 알아봤는데,
위 예제들은 비구조화 할당에 대한 특징과 기본 사용법에 대한 예제이므로 좀 더 다양한 응용과 사용방법에 대해서는 직접 사용해가며 익히는것을 추천한다.
그래도 좀 더 보고 싶다면 아래 링크나 구글을 통해 많이 접할 수 있을것이다.
참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
구조 분해 할당 - JavaScript | MDN
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
developer.mozilla.org
댓글