[Javascript] ES6 문법 6.2 - 구조 분해 할당

ES6 문법 6.2 - 구조 분해 할당

기존 자바스크립트의 구조 분해 사용 방법

//배열 구조 분해
var list = [0,1];
var item1 = list[0];  //배열의 인덱스를 이용해서 변수에 값 할당
var item2 = list[1];
var item3 = list[2] || -1;  //배열에 값이 없다면 초깃값(default) 저장 ⭐
var temp = item2;  //값 치환
item2 = item1;
item1 = temp;

//객체 구조 분해
var obj ={ key1 : 'one', key2 : 'two' };
var key1 = obj.key1;  //객체의 키값을 변수에 할당
var key2 = obj.key2;
var key3 = obj.key3 || 'default key3 value'; //객체에 키값이 없다면 초깃값(default) 저장 ⭐
var newKey1 = obj.key1;  //이미 할당된 객체의 키값을 다른 변수에 할당

기존 자바스크립트에서 구조 분해하는 방법은 각 변수에 배열의 인덱스나 속성명을 입력하여 값을 하나하나 할당하였다. 또한 할당 중 값이 없다면 " || "를 이용하여 초기값을 저장하였다.

ES6의 구조분해와 구조 할당 사용 방법 ⭐

//배열 구조 분해
var list = [0,1];
//배열의 인덱스 위치에 따라 변수에 값 할당 (만약 배열에 값이 없다면 초깃값 저장 ⭐)
var [ item1, item2, item3 = -1 ] = list;
[item2, item1] = [item1, item2];  //두 변수의 내용 치환

//객체 구조 분해
var obj ={ key1 : 'one', key2 : 'two' };
//변수명이 같은 키에 (속성의) 값 할당
var {
    key1 : newKey1,  //콜론(:) 부호로 새 변수명을 선언하여 추출된 키값을 다른 변수명으로 할당 ⭐
    key2,
    key3 = 'default key3 value',  //만약 객체에 동일한 속성명과 값이 없다면 초깃값 저장 ⭐
} = obj;

배열의 구조 분해 할당은 대괄호 사이에 추출할 값의 인덱스 위치에 변수를 배치한다. 즉, 인덱스의 위치가 중요하다. 또한 배열의 구조 분해 할당을 통해서 위치만 바꿈으로써 간결하게 두 변수를 치환할 수 있다. 

객체의 구조 분해 할당은 중괄호 사이에 추출할 속성명과 같은 변수를 배치한다. 즉, 속성의 이름이 중요하다. 또한 콜론(:) 부호와 함께 새 변수명을 선언하여 새로운 변수 이름으로 할당할 수 있다. 

배열과 객체의 구조 분해 할당 모두 등호( = ) 를 이용해서 값이 없을 때의 초깃값을 저장할 수 있다.

구조 할당과 전개 연산자 활용 ⭐

var [ item1, ...otherItems ] = [0, 1, 2];
var { key1, ...others } = { key1 : 'one', key2 : 'two', key3 : 'three' };
// item1 = 0, otherItems = [1, 2]
// key1 = {key1 : 'one' }, others = { key2 : 'two', key3 : 'three' }

배열 구조 할당을 이용해서 item1에는 첫 번째 인덱스 값인 0을 할당하고 전개 연산자를 이용해서 otherItems에는 나머지 인덱스 값들을 할당한다. 두 번째 줄에선 key1과 동일한 속성명을 가진 { key1 : 'one' } 을 key1에 할당하고 전개 연산자를 이용해서 그외의 속성값들을 others에 할당한다.

 

* 더 많은 정보는 여기서 확인할 수 있다.

배열 구조 분해 할당 : https://wiken.io/ken/6962

위캔 | Ken 6962

객체 구조 분해 할당 : https://wiken.io/ken/6963

위캔 | Ken 6963