ES6: 할당 해제 (Destructuring)

개념
대상 은 속성의 집합 으로 대상 에서 값 을 추출 하고 ES3 / 5 는 하나씩 만 추출 할 수 있 으 며 는 대량 추출, 할당 을 실현 할 수 있다.

//     person 
var person = {
    name: 'john',
    age: 22
}

// ES5   ：
var name = person.name,
    age = person.age;
    
// ES6      
var {name, age} = person;

2. 대상 구조 할당
2.1 문법

//   1：     
var {sourceObjKey1: targetValName1=defaultVal1, sourceObjKey2: targetValName2=defaultVal2, ..., sourceObjKeyN: targetValNameN=defaultValN} = sourceObj;

//   2,    ，   。                 
var targetValName1,targetValName2, ..., targetValNameN;
({sourceObjKey1: targetValName1=defaultVal1, sourceObjKey2: targetValName2 = defaultVal2, ...,sourceObjKeyN: targetValNameN=defaultValN} = sourceObj);

sourceObj: 데이터 원본 대상

sourceObjKey: 데이터 원본 대상 에서 값 을 추출 해 야 하 는 속성 이름 을 표시 합 니 다. valName 1 과 같은 이름 이면 생략 하고 쓰 지 않 을 수 있 습 니 다.

targetValName: 가 져 온 속성 값 을 템 플 릿 변수, 즉 targetValName=obj[sourceObjKey] 에 할당 해 야 한 다 는 뜻 입 니 다.

defaultVal: sourceObj 대상 이 속성 sourceObjKey (또는 undefined) 를 포함 하지 않 을 때 지정 한 기본 값 을 선택 할 수 있 습 니 다.

그래서 ES5 의 표현 방식 은 다음 과 같다.

var targetValName1 = sourceObj[sourceObjKey1],
    targetValName2 = sourceObj[sourceObjKey2],
    targetValNameN = sourceObj[sourceObjKeyN];

key 와 valName 이 같다 면 다음 과 같이 간략하게 쓸 수 있 습 니 다.

//   1：     
var {targetValName1=defaultVal1, targetValName2=defaultVal2, ..., targetValNameN=defaultValN} = sourceObj;

//   2,    ，   。        
var targetValName1,targetValName2, ..., targetValNameN;
({targetValName1=defaultVal1, targetValName2=defaultVal2, ..., targetValNameN=defaultValN} = sourceObj);

대부분의 장면 은 약자 로 쓰 인 다.
대상 이 있다 고 가정 하기 dad:

// Object
var dad = {
    name: 'john',
    age: 30,
    children: [
        {
            name: 'Tom',
            age: 2
        },
        {
            name: 'Jim',
            age: 1
        }
    ]
}

변수 name, age, children 에 dad 속성 을 각각 저장 합 니 다.

//   1:      
var {name:name, age:age, children:children} = dad;
console.log(name); // john
console.log(age); // 30
console.log(children.length); // 2

//   2,    ，   。        ，       
var name, age, children;
({name:name, age:age, children:children} = dad)

대응 하 는 약자 형식:

//   1
var {name, age, children} = dad;
//   2
var name, age, children;
({name, age, children} = dad)

2.2 기본 값
일치 하거나 일치 하지 않 는 속성 값 이 undefined 인 변 수 는 기본 값 을 지정 할 수 있 습 니 다.

dad.name = void 0; // dad     ，
var { weight = '66kg', name='new name'} = dad; // dad    weight  
console.log(weight, name); // weight='66kg', name='new name'

2.3 동적 속성 이름
위의 문법 구조 에서

var {key1: valName1, key2: valName2, ..., keyN: valNameN} = obj;

그 중에서 키 1, 키 2... 키 N 은 변수 일 수도 있 습 니 다. 글자 의 양 이 아니 라 변 수 를 표시 하기 위해 서 는 괄호 로 감 싸 야 합 니 다.

var key = 'name';
var {[key]:val } = dad;
console.log(val); // 'john'
key = 'age';
({[key]:val } = dad);
console.log(val); // 30

소결

할당 을 재 구성 하 는 전 제 는 같은 구조 이다. 즉, 좌우 양쪽 의 대상 재 구성 이 일치 해 야 한다.

대상 의 구조 할당 값 은 바 인 딩 값 에 있 을 때 속성 key (key 의 이름과 구조 위치) 에 따라 일치 합 니 다.할당 연산 자 (등호) 양쪽 의 재 구성 이 일치 해 야 정확 한 할당 이 가능 합 니 다.

할당 표현 식 은 할당 표현 식 의 문법 설탕 입 니 다.

3. 배열 재 구성 할당
배열 의 속성 이름 은 색인 이 라 고 하 는데 위 치 를 표시 합 니 다.그래서 대상 의 구조 적 할당 에 비해 문법 적 으로 약간 다르다.
3.1 문법

//     1：      
var arr = [1, 2, 3, 4, 5, 6];
var [f, s, t] = arr;
//     2：    ，   
var a, b, c;
[a, b, c] = arr;

console.log([f, s, t]) // [1, 2, 3]
console.log([a, b, c]) // [1, 2, 3]

배열 재 구성 할당 값 은 바 인 딩 값 일 때 속성 에 따라 표 시 된 것 과 일치 합 니 다.할당 연산 자 (등호) 양쪽 의 재 구성 이 일치 해 야 정확 한 할당 이 가능 합 니 다. 일치 하지 않 으 면 undefined 입 니 다.
3.2 점프 식 할당

var arr = [1, 2, 3];
var [,f,s] = arr; // f=2, s=3

3.3 배열 의 남 은 요 소 를 가 져 옵 니 다.
rest 연산 자 (...) 수식 변 수 를 통 해 배열 의 나머지 요 소 를 가 져 올 수 있 습 니 다.

var arr = [3, 4, 5, 6];
var [a, ...b] = arr;
console.log(b); // [4,5,6]

변수 b 는 배열 arr 의 남 은 요 소 를 가 져 옵 니 다. 이 때 변수 b 는 마지막 에 두 어야 합 니 다. 그렇지 않 으 면 문법 이 잘못 되 었 습 니 다.남 은 요소 가 없 으 면 빈 배열 입 니 다.

var arr = [3];
var [a, b, ...c] = arr;
console.log(a) // 3
console.log(b) // undefined
console.log(c) // []

3.4 내장

//          
var [[a00=1], [,a11]] = [[1, 2], [3, 4]];
console.log(`a00=${a00}, a11=${a11}`)

//        ，       dad    2         name,age   (        ，                )：
var {children: [,{name, age}]} = dad;
console.log([name, age])

주의: 복잡 한 끼 워 넣 기 가 가 독성 을 떨 어 뜨 렸 으 니 사용 할 지 여 부 를 따 져 봐 야 합 니 다.
3.5 배열 도 대상 입 니 다.
배열 자체 도 대상 이 고 배열 의 할당 재 구성 도 대상 을 통 해 할당 을 재 구성 하 는 방식 으로 표시 할 수 있다.

var arr = [1, 2, 3];
var {0:f, 1:s, 2:t} = arr; //    var [f, s, t] = arr;
console.log([f, s, t]) // f=1, s=2, t=3

이렇게 쓰 는 것 은 확실히 번 거 롭 습 니 다. 배열 의 재 구성 대 가 는 배열 대상 의 재 구성 대 가 를 간소화 하 는 것 입 니 다.그들의 할당 매 칭 모델 은 본질 적 으로 같다.
4. 대상 이 아 닌 변 수 를 재 구성 합 니 다.

var {a } = 1, // undefined
    {b} = true, // undefined
    {c} = 'a', // undefined
    {d} = null, //     
    {e} = undefined; //     

JS 는 이러한 기본 유형의 숫자, 문자열, boolean 에 대해 대응 하 는 대상 유형 을 정 의 했 습 니 다. 이러한 유형의 데 이 터 를 재 구성 하고 할당 작업 을 할 때 해당 하 는 대상 유형 으로 전 환 됩 니 다.그러나 null, undefined 는 대응 하 는 대상 형식 이 없습니다. 모든 것 이 실 행 될 때 형식 오 류 를 보고 합 니 다.
5. 일부 응용 장면
한 마디 로 하면 할당 작업 이 발생 하 는 장면 이 라면 할당 표현 식 을 재 구성 할 수 있 습 니 다.
5.1 함수 매개 변수 재 구성 할당

function log({title: tag = "Debug", message}) {
    console.log(`${tag}: ${message}`);
}

log({title: 'Info', message: 'This is a log message'})

ES5 를 사용 하여 위의 기능 을 실현 하려 면 대체적으로 다음 과 같다.

function log(option) {
    if(!option) option= {};
    var tag = option.title || 'Debug',
        message = option.message;
    console.log(`${tag}: ${message}`);
}
log({title: 'Info', message: 'This is a log message'})

할당 값 을 함수 의 형 삼 으로 재 구성 하여 매개 변 수 를 더욱 직관 적 이 고 명확 하 게 하 며 기본 값 을 부여 할 수 있 습 니 다.ES5 의 쓰 기 는 코드 를 읽 어야 구체 적 으로 어떤 인자 가 필요 한 지 볼 수 있다.
5.2 for - of 구문
집합 요소 에 대해 재 구성 작업 을 할 수 있 고 체 내 에서 수 치 를 순환 하 는 데 더욱 편리 하 다.

for(var {name, age} of dad.children) {
    console.log(`name: ${name}, age: ${age}`)
}

5.3 함수 반환 값 재 구성

//       
var url = 'https://developer.mozilla.org/en-US/Web/JavaScript';
var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
console.log(parsedURL); 
var [, protocol, fullhost, fullpath] = parsedURL;
console.log(protocol); // "https"

레 퍼 런 스

MDN Destructuring assignment

ES6 In Depth: Destructuring