구조 분해 할당

구조 분해 할당 이건 정말 완전 쿨하다.

 

화살표 함수가 this를 변수에 담아두는 행동(_this, _self의 추억이여...)들을 사라지게 했다면,

 

이건 더 많은 부분들을 사라지게 해준다.

 

그렇다면 구조 분해 할당이 무엇인지 바로 검정 화면으로 알아보자.

 

(이름에 어떤 기능인지 설명이 되어 있다는 사실!)

// #1 구조 분해 사용 케이스 1
var a, b;
[a, b] = [10, 20];
 
// #1 이용 안한 케이스 1
var a, b;
a = 10, b = 20;
 
// #2 구조 분해 사용 케이스 2
var a, b, rest;
[a, b, ...rest] = [10, 20, 30, 40, 50];
 
// #2 이용 안한 케이스 2
var a, b, rest;
rest = [];
[10, 20, 30, 40, 50].forEach(function (item, index, array) {
    if (index == 0) {
        a = item
    }
    else if (index == 1) {
        b = item
    }
    else {
        rest.push(item)
    }
})

 

#1 : 변수 a, b 를 선언하고 구조 분해 할당을 이용하여, 변수 a와 b에 10, 20 의 값을 할당합니다.

[10, 20]의 배열의 구조를 분해 한다.   => (공중)분해 된 친구들을 좌측에 할당한다.

간단하죠.

 

#1 : 구조 분해 할당 사용 없이 그냥 할당해주는 경우입니다. 아직은 이것도 간단하군요.

 

#2 : 변수 a, b, rest를 선언하고 구조 분해 할당을 이용해 할당해줍니다.

[10,20,30,40,50]의 배열의 구조를 분해 한다. => 분해된 친구들 중 10은 a에 20은 b에 그리고 갈 곳 없는 나머지는 rest 변수에 다시 배열로 담습니다.

a = 10,

b = 20,

rest = [30,40,50]

 

#2 위와 같은 행동을 기존 코드로 하려면 벌써 길어지네요.

 

이게 뭐가 멋지다는 거야? 생각이 드실꺼예요. 이제 한걸음 걸었고 딱 두걸음만 더 걸으면 바로 오호 하실꺼예요.

 

두번째 검정 화면 입니다.

var a, b;
 
[a = 5, b = 7] = [1];
 
// a = 1, b = 7

 #1 우측 배열을 분해 해서 좌측의 a 변수에 분해된 1을 할당합니다.

그러면 b에는? b에는 좌측에서 할당한 7이 들어가 있습니다. 

느낌이 오신 분이 계실꺼예요. 기본값을 설정할 수 있습니다. 함수의 파라미터 부분에 사용하면 좋을것 같네요.

 

세번째 검정 화면 입니다.

var a = 1;
var b = 3;
 
[a, b] = [b, a];

function Person(options) {
    options = options === undefined ? {} : options;
    options.name === undefined ? '홍길동' : options.name;
    options.maleYn === undefined ? 1 : options.maleYn;
    options.age === undefined ? 1 : options.age;
    this.options = options;
    console.log(options);
}
 
function Person({ name = '홍길동', maleYn = 1, age = 1 } = {}) {
    var option = {
        name : name,
        maleYn : maleYn,
        age : age
    }
    console.log(option);
    // 차트 그리기 수행
}