ES6 ) 비구조화 할당

비구조화 할당

비구조화 할당이란 ??

비구조화 할당은 배열, 객체, 반복 가능 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장입니다.

---

배열에서의 비구조화 할당

기본적인 사용법

let [a,b] = [1,2];

이 코드는 변수 a와 b를 선언한 뒤 우변의 배열에서 요소를 하나씩 꺼내어 인덱스 순서대로 a, b 에 대입합니다.
우변의 배열을 분할해 좌변의 변수에 할당하므로 분할 할당이라고도 합니다.

이미 선언된 변수를 비구조화 할당하기

[a,b] = [2*a, 3*b];  // a = 2a, b= 3b 와 같음
[c,d] = [d,c];  // c 값과 d 값을 교환

반드시 우변과 좌변의 개수가 같을 필요는 없습니다.
만약 좌변의 변수 개수가 우변의 값 개수보다 많다면 좌변의 남는 변수에는 undefined 가 자동으로 할당됩니다.
반대로 우변의 값 개수가 더 많으면 남는 값은 무시됩니다.

let array, first, second;
array = [first, second]  = [1,2,3,4];
// first = 1, second = 2, array = [1,2,3,4] 와 같습니다.

배열 비구조화 할당 표현식의 값은 우변 값이 됩니다.

나머지 요소

배열의 비구조화 할당을 할 때는 전개 연산자인 ... 을 사용해 나머지 요소를 이용할 수 있습니다.

[a,b, ...rest] = [1,2,3,4];
// a = 2, b = 2, rest = [3,4] 와 같습니다.

좌변의 ...rest 부분이 나머지 요소이며, 변수 rest 에는 할당되지 않은 우변의 남은 요소들이 배열로 할당됩니다.

요소의 기본값

배열의 비구조화 할당을 할 때는 함수의 인수와 마찬가지로 기본값을 설정할 수 있습니다. 비구조화 할당하는 좌변의 변수에 undefined 가 할당되면 undefined 대신에 기본값을 할당합니다.

[a=0, b=1, c=2] = [1, 2]; // a=1, b=2, c=2 와 같습니다.

함수가 배열로 반환한 값을 비구조화 할당받기

함수가 여러 개의 값을 반환해야 하면 그 값을 배열로 반환하도록 만들 수 있습니다.

// 2차원 좌표점 (x, y) 를 원점 기준으로 각도 theta 만큼 회전하기
function rotation(x, y, theta) {
  let s = Math.sin(theta), c = Math.cos(theta);
  return [c*x = s*y, s*x + c*y];
}

---

객체의 비구조화 할당

기본적인 사용법

객체도 비구조화 할당이 가능하며, 이때 좌변에는 객체 리터럴과 비슷한 문법을 사용합니다.
프로퍼티를 쉼표로 구분하고 중괄호로 묶어 줍니다. 이 프로퍼티 이름은 우변의 프로퍼티 이름이며 프로퍼티 값으로는 임의의 변수를 사용할 수 있습니다.

let {a:x, b:y} = {a:1, b:2}; // x=1, y=2 와 같습니다.

위 코드를 살펴보면, 좌변에 변수 x와 y가 선언되며, 이 변수에는 각각 우변의 a 프로퍼티 값과 b 프로퍼티 값이 할당됩니다.

아래와 같이 좌변의 변수에 대응하는 프로퍼티 이름이 오른쪽에 없으면 그 변수에는 undefined 가 할당됩니다.

{a:x, b:y} = {a:1, c:2}; // x = 1, y = undefined 와 같습니다.

우변에 값이 있지만 그에 대응하는 이름의 변수가 좌변에 없으면 그냥 무시됩니다.

{a:x, b:y} = {a:1, b:2, c:3}; // x=1, y=2 와 같고 3은 무시됩니다.

프로퍼티의 기본값

배열의 비구조화 할당을 할 때는 함수의 인수와 마찬가지로 기본값을 설정할 수 있습니다.
비구조화 할당하는 좌변의 변수에 undefined 가 할당되면 그 대신에 기본값을 할당합니다.

{a: x=1, b: y=2, c:z=3} = {a:2, b:4}; // x=2, y=4, z=3 과 같습니다.

프로퍼티 이름 생략하기

좌변에는 변수 이름만 쉼표로 구분해서 작성할 수 있습니다. 이때는 프로퍼티 이름이 변수의 이름이 됩니다.

반복가능한 객체의 비구조화 할당

우변에 반복 가능한 객체가 있을 때도 비구조화 할당을 할 수 있습니다. 이때 좌변에는 배열 리터럴과 비슷한 문법을 사용합니다.

let [a,b,c] = "ABC"; // var a = "A", b = "B", c = "C" 와 같습니다.
function* createNumbers(from,to) {
  while( from<=to ) yield from++;
}
let [a,b,c,d,e] = createNumbers(10,15);
// a=10, b=11, c=12, d=13, e=14 와 같습니다.

중첩된 자료 구조의 비구조화 할당

중첩된 객체나 배열에도 비구조화 할당을 적용할 수 있습니다.

let [a,[b,c]] = [1,[2,3]];
let {a:x, b: {c:y, d:z}} = {a:1, b: {c:2, d:3}};