[2019.03.27] 구조분해할당 개념

ES6로 넘어오면서, 배열과 object를 조금 더 쉽게 다루는 방식이 있다.

구조분해 연산자, 전개연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한번에 처리할 수 있도록 해준다.

# 구조분해할당 - 배열 구조 분해

var a, b, rest;
[a, b] = [10, 20];
 
console.log(a); // 10
console.log(b); // 20

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
 
console.log(y); // 1
console.log(z); // 2

위와 같이 변수 초기화 선언할 때 표현하면, 배열을 분해하여 순서대로 각 자리에 들어가게 된다.

var a, b;
[a = 5, b = 7] = [1];
 
console.log(a) // 1
console.log(b) // 7

위 처럼 배열 분해하여 할당할 때 직접 초기화를 할 수 도 있다.

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

이건 진짜 꿀팁!!! 원래 sort 같은거 해서 자리변경 할 때, temp라는 변수 하나 만들어줘서 하나씩 값 넣어주는 형식으로 해야했는데, 위 코드와 같이 한번에 두 자리를 변경할 수 있다.

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

...키워드를 이용하여 a값을 할당해주고, 나머지를 b값에 배열 형식으로 넣어준다.

# 구조분해할당 - 객체 구조 분해

var o = {a: 10, b: 20};
 
var{a, b} = o;
 
console.log(a); // 10
console.log(b); // 20

배열과 같이 객체도 key값을 기준으로 분해하여 할당할 수 있다. 내가 리액트 공부하면서, this.state에서 값을 {name} 이런식으로 가져와서 변수처럼 사용하던데, 이게 바로 이것이였다.!

 객체 구조 분해 할당 방식은 사실 몇개 더 있는데, 잘 안 쓸 것 같다. 향후에 사용해야 할 일이 있으면 그때 다시 봐바야겠다.