10. 비구조화 할당, destructuring assignment

죠>안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 비구조화 할당, destructuring assignment에 대해서 알아보겠습니다.

비구조화 할당 이라는 말이 쉽게 이해되는 말은 아니라고 생각합니다.

간단히 말하자면 배열이나 객체의 요소를 해체하여 별개의 변수로 추출할 수 있도록 하는 것입니다.

이 말도 와닿지 않으신가요? 괜찮습니다. 코드를 통해서 살펴보도록 하죠.

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

위의 코드의 첫 줄에서 변수 a, b, rest를 선언했습니다. 

(선언만 하고 아직 할당하지 않은 상태)

그리고 두 번째 줄에서 이름 없는 배열 두 개가 같다고 표현했습니다.

왼쪽 항에 있는 배열은 a, b의 원소를 가지고 있는 배열이고, 오른쪽 항의 배열은 10과 20을 원소로 가지고 있는 배열입니다.

따라서 a는 10이 되고, b는 20 이 됩니다.

이처럼 변수에 직접 할당하는 것이 아닌 배열의 원소로서 값을 할당하는 것을 비구조화 할당이라고 합니다.

코드를 좀 더 살펴보겠습니다.

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

위의 코드의 첫 줄에서 비구조화 할당을 하고 있습니다.

왼쪽 항의 배열은 원소를 a, b 그리고 전개연산자를 활용한 rest 원소를 가지고 있습니다.

오른쪽 항은 10, 20, 30, 40, 50 을 원소로 가진 배열입니다.

따라서 a는 10이 되고, b는 20이 됩니다.

그리고 오른쪽 항의 나머지 원소들은 rest 배열이 됩니다.

*전개연산자에 익숙하지 않으신 분들은 아래의 링크를 참조해 주세요

<ES6 - 3) spread operator>

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

비구조화 할당은 위의 코드와 같이 배열 뿐아니라 객체에서도 가능한 표현법입니다.

*(두 객체를 비교할 때는 비교식 전체를 괄호로 감싸야 합니다)

두 객체가 같을 때, 왼쪽 항의 a는 할당되지 않았지만 오른쪽 항 객체의 속성값을 할당받습니다.

// Stage 3 proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); //{c: 30, d: 40}

배열에서와 마찬가지로 전개연산자를 활용한 객체에서의 비구조화 할당 역시 나머지 배열을 할당합니다.

(오른쪽 항의 첫 번째, 두 번째 속성은 각각 변수 a, b에 할당되고, 나머지 c, d 속성은 rest변수에 객체로서 할당된다)

*객체에서의 전개연산자를 이용한 비구조화 할당은 Stage 3 plug in 이 필요할 수 있습니다.

비구조화 할당을 할 때, 원소의 자리를 비워두면 값을 무시할 수도 있습니다.

function returnArr(){
    return [1, 2, 3]
}
 
var [a, ,b] = returnArr();
 
console.log(a); // 1
console.log(b); // 3

retuenArr 함수는 배열 [1, 2, 3]을 리턴하는 함수입니다.

[a, ,b] 를 선언과 동시에 할당할 때, returnArr를 호출합니다.

즉, [a, ,b] = [1, 2, 3]이 됩니다.

a와 b사이에 있는 공백까지 포함하여 1대1 할당을 하여 a는 1이 되고, b는 3이 됐습니다.

즉, 공백(비워둔 원소)과 매치되는 원소를 무시하는 것입니다.

여기까지 변수에 값을 직접 할당하는 것이 아닌 배열이나 객체를 활용해 분해 할당하는 비구조화 할당, destructuring assignment에 대해서 알아보았습니다.

다음 포스팅에서는 property shorthand에 대해서 알아보도록 하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)