Destructuring Assignment

Destructuring Assignment은 배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담는 자바스크립트 표현식이다. 쉽게 말하면 배열이나 객체를 dot notation이나 bracket notation로 쓰지 않고, 그 구조를 풀어서 안에 있는 키 혹은 값을 그대로 쓸 수 있게 한다. 한국말로 구조 분해 할당이라 부른다. 

사용 조건

용어 그대로 구조를 분해하는 것이기에 구조가 있는 배열과 객체에서 사용할 수 있다. 

 

사용 방법

1. 객체

const {key1, key2, ...key} = 객체;

기본 표현은 위와 같다. 구조 분해하고 싶은 객체를 할당값으로 주고 앞에 해당 객체에서 가져올 키 값을 중괄호 안에 적는 것. 위와 같이 적을 경우 key1을 출력하는 것만으로도 해당 객체 안에 있는 값을 사용할 수 있다.

const o = {first: true, twice: "what is love"};
const {first, twice} = o;

console.log(first); // true
console.log(twice); // what is love

예시를 보면 조금 더 쉽게 와닿는다. 구조 분해 할당이 아니라면 o객체의 first라는 키값을 불러오려면 o.first 혹은 o[first]로 호출해야 한다. 구조 분해 할당했다면 해당 단순히 키만으로도 해당 값을 불러 올 수 있다.

 

이렇게 사용하다보면 객체 이름은 다르나 키값이 동일한 경우나 있을 수 있다. 이때는 중복으로 인해 오류가 발생한다. 구조 분해 할당에서는 이를 방지하기 위해 기존 키에 새로운 이름을 할당하는 옵션을 제공한다.

const o = {first: true, twice: "what is love"};
const {first : one, twice : two} = o;

console.log(one); // true
console.log(two); // what is love

또한, 구조 분해 할당 시 기본값을 넣을 수 있다.

const o = {first: true, twice: "what is love"};
const {first : one, twice : two, third : three="기본값입니다."} = o;

console.log(one); // true
console.log(two); // what is love
console.log(three); // 기본값입니다.

 

2. 배열

const [value1, value2, ...value] = 배열;

기본 사용 방법은 객체와 같다. 다만 키값으로 선언하는게 아닌, 구조 분해 한 순서에 따른 이름이 키가 된다.

const Array_one= ["one", "two", "three"];

const [red, green, blue] = Array_one;
console.log(red); // "one"
console.log(green); // "two"
console.log(blue); // "three"

배열에서도 객체와 동일하게 기본값을 부여할 수 있다. 원본 배열에서 alpha값이 없지만 alpha값이 출력되는 이유는 구조 분해 할당시 alpha값을 넣었기 때문이다.

const Array_one= ["one", "two", "three"];

const [red, green, blue, alpha="four"] = Array_one;
console.log(red); // "one"
console.log(green); // "two"
console.log(blue); // "three"
console.log(alpha); // "four"

배열 구조분해 할당은 조금 더 유용하게 쓸 곳이 조금 더 있다. 그중 하나가 변수 값을 변환할 때다. 보통 두 변수 값을 바꿀 때 필요한 임시 변수가 필요하다. 구조 분해 할당을 사용하면 임시 변수 없이 값을 바꾸었음을 아래 코드로 확인할 수 있다.

var a = 1;
var b = 3;

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

일부 값을 무시하고 구조 분해 할당할 수도 있다. 아래 코드는 함수를 통해 배열 값을 반환했다(함수 반환 값이 배열이라면 구조 분해 할당할 수 있다). 구조 분해시 해당 자리에 있는 값을 빈 칸으로 두면 해당 값은 패스할 수 있다(객체에서는 해당하는 키를 적지 않으면 무시된다). 

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

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

배열과 객체 모두 구조 분해 할당하고 남은 나머지를 한 번에 할당할 수 있다. 전개 연산자를 활용한다. 다만, 전개 연산자를 이용한 나머지는 구조 분해 할당 제일 마지막에 있어야 한다. 중간에 위치할 경우 오류 발생한다.

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

const [c, ...d, f] = [1, 2, 3, 4]; //Rest element must be last element.
console.log(c); 
console.log(d); 
console.log(f); 

const {g, ...rest} = {g:1, h:2, i:3};
console.log(g); // 1
console.log(rest); // { h: 2, i: 3 }
// 전개 연산자를 활용할 경우 이름은 아무 상관 없다.

결론

구조 분해 할당은 코딩 시 불필요한 타이핑을 줄여주거나, 혹은 보기가 복잡하거나 난잡해질 수 있는 코드를 보다 읽기 쉽게 만들어 주는 효과가 있는 듯하다. 자바스크립트 뿐만 아니라 리액트에서 props를 통해 객체를 드릴링할 경우에도 꽤나 유용했다. 아무데서나 사용할 필요는 없지만, 코딩 시 구조 분해 할당을 사용할만한 곳인가 한번쯤 생각하는 것도 좋은 생각이다.

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)