[자바스크립트 ES6+ 기본] 6. Destructuring (분할 할당)

Destructing

• Destructuring Assignment
• 작성 형태

let one, two, three;
const list = [1, 2, 3];
[one, two, three] = list;
log(one);
log(two);
log(three);
log(list);

// 1
// 2
// 3
// [1, 2, 3]

• 사전적 의미

  • ~구조를 파괴하다
  • 파괴, 해체는 있는 것이 없어지는 뉘앙스
  • 원 데이터는 변경되지 않음

• 강좌 기준

  • 이 관점에서 보면 분할/분리가 더 가까움
  • 강좌에서는 "분할 할당"으로 표기

Array 분할 할당

배열의 엘리먼트를 분할하여 할당

• 인덱스에 해당하는 변수에 할당

/*
1. 왼쪽의 인덱스에 해당하는 오른쪽 배열의 값을 변수에 할당
2. one에 1, two에 2, three에 3이 할당됨
*/
let one, two, three;
[one, two, three] = [1, 2, 3];
log(one);
log(two);
log(three);

// 1
// 2
// 3

• 할당받은 변수 수가 적은 경우

/*
1. 왼쪽에 할당 받을 변수가 2개이고 오른쪽에 분할 할당할 값이 3개
2. 왼쪽의 변수 인덱스에 맞추어 값을 할당하므로 3은 할당되지 않음
*/
let one, two;
[one, two] = [1, 2, 3];
log(one);
log(two);

// 1
// 2

• 할당받을 변수 수가 많은 경우

/*
1. 왼쪽의 할당 받을 변수가 4개, 오른쪽에 분할 할당할 값이 3개
2. 왼쪽에 값을 할당할 수 없는 변수에 undefined가 설정됨
*/
let one, two, three, four;
[one, two, three, four] = [1, 2, 3];
log(three);
log(four);

// 3
// undefined

• 배열 차원에 맞추어 분할 할당

/*
1. [three, four]와 [3, 4]가 배열
2. 배열 차원이 변환됨
*/
let one, two, three, four;
[one, two, [three, four]] = [1, 2, [3, 4]];
log([one, two, three, four]);

// [1, 2, 3, 4]

• 매치되는 인덱스에 변수가 없으면 값을 할당하지 않음

/*
1. [one. . .four] 형태에서 콤마로 구분하고 변수를 작성하지 않음
2. 인덱스를 건너 띄어 할당
3. one에 1을 할당하고 2와 3은 건너 띄고 four에 4를 할당
*/
let one, two, three, four;
[one. . .four] = [1, 2, 3, 4];
log([one, two, three, four]);

// [1, undefined, undefined, 4]

spread와 같이 사용

• 나머지를 전부 할당

/*
1. one에 1을 할당하고
2. 나머지 2, 3, 4를 rest에 할당함
[2, 3, 4]처럼 배열로 할당
3. rest 파라미터를 호출 받는 함수의 파라미터에 작성하지만, 나머지라는 시맨틱이 강해서 코드처럼 사용하기도 함 
4. 분리하지 않고 결합된 상태를 설정하므로 어긋나지 않음
*/
let one, rest;
[one, ...rest] = [1, 2, 3, 4];
log(one);
log(rest);

// 1
// [2, 3, 4]

• 인덱스를 반영한 나머지 할당

/*
1. one에 1을 할당
2. 2는 건너 뛰고 three에 3을 할당
3. 나머지 [4, 5]를 rest에 할당
*/

let one, three, rest;
[one, three, ...rest] = [1, 2, 3, 4, 5];
log(three);
log(rest);

// 3
// [4, 5]

---

Object 분할 할당

• Object의 프로퍼티를 분할하여 할당
• 프로퍼티 이름이 같은 프로퍼티에 값을 할당

/*
1. 왼쪽의 Object가 {name: value} 형태가 아니라 프로퍼티 이름만 작성함
2. 프로퍼티 이름이 같은 오른쪽 프로퍼티 값을 왼쪽의 프로퍼티 값으로 할당
3. one에 10, two에 20을 할당
{one: 10, two: 20} 형태가 됨
*/
const {one, two} = {one: 10, two: 20}
log(one);
log(two);

// 10
// 20

• 프로퍼티 이름을 별도로 작성

let one, two; // 프로퍼티 이름을 앞에 별도로 작성함
({one, two} = {one: 10, two: 20}); // 전체를 소괄호() 안에 작성해야 함
log(one);
log(two);

// 10
// 20

• 프로퍼티 값 위치에 변수 이름 작성

let five, six; 
({one: five, two: six} = {one: 5, two: 6}); // 이름을 별도로 선언했으므로 전체를 소괄호() 안에 작성
// 오른쪽 one 프로퍼티 값 5를 five에 할당
log(five);
log(six);
// log(one); ==> ReferenceError : 프로퍼티 이름으로 값을 구할 수 없음
// five와 six 변수값을 구하는 것이 목적

// 5
// 6

• Object 구조에 맞추어 값 할당

/*
1. plus:{two, three} ==> plus는 구조(경로)를 만들기 위한 것
2. 왼쪽에 plus가 있고 two가 있으면 two 프로퍼티 값에 20을 할당
3. 구조가 같지 않으면 실행할 때 에러 발생
4. 할당한 후, 이름으로 값을 구할 수 있음
*/
const {one, plus:{two, three}} = {one:10, plus:{two:20, three:30}};
log(one);
log(two);
log(three);
// log(plus); ==> plus는 구조(경로)를 만들기 위한 것으로 실제로 존재하지 않음. plus가 없으므로 ReferenceError 발생. 

// 10
// 20
// 30

• 나머지를 Object로 할당

const {one, ...rest} = {one: 10, two: 20, three: 30}; // rest에 나머지 Object 할당
log(rest);

// {two: 20, three: 30}

파라미터 분할 할당

• 호출하는 함수에서 Object 형태로 넘겨준 파라미터 값을 호출받는 함수의 파라미터에 맞추어 할당

// 호출하는 함수에서 넘겨준 one과 two를 호출받는 함수의 프로퍼티 이름에 맞추어 프로퍼티 값을 분할 할당
function add({one, two}){
  log(one + two);
};
add({one: 10, two: 20});

// 30

• Object 구조에 맞추어 값 할당

// 호출하는 함수에서 넘겨준 Object 구조와 프로퍼티에 맞추어 프로퍼티 값을 할당
function add({one, plus: {two}}){
  log(one + two);
};
add({one: 10, plus: {two: 30}});

// 30

Object 오퍼레이션

• 같은 프로퍼티 이름 사용

/*
1. {book: 10, book: 20}에서 프로퍼티 이름인 book이 같음
2. ES5 strict 모드에서 프로퍼티 이름이 같으면 에러
3. ES6에서는 strict 모드에 관계없이 에러 발생 안함 => 뒤에 작성한 프로퍼티 값으로 대체됨
*/
const value = {book: 10, book: 20};
log(value);

// {book: 20}

• Shorthand property names

/*
1. one과 two 변수에 값을 작성하였으며 {one, two} 형태로 values에 할당
2. one이 프로퍼티 이름이 되고 10이 프로퍼티 값으로 할당
3. "Shorthand property names"는 MDN에 작성된 것으로 스펙에 정의된 것은 아님
*/
const one = 10, two = 20;
const values = {one, two};
log(values);

// {one: 10, two: 20}

프로퍼티 이름 조합

• 문자열을 프로퍼티 이름으로 사용

/*
1. [] 안에 문자열로 이름을 작성
2. "one"과 "two"를 연결하여 onetwo를 프로퍼티 이름으로 사용
*/
const value = {
  ["one" + "two"]: 12
};
log(value.onetwo);

// 12

• 변수값을 프로퍼티 이름으로 사용

/*
1. 변수값을 프로퍼티 이름으로 사용
2. 변수값과 문자열을 연결
3. 프로퍼티 이름에 공백 가능(어색)
4. 함수로 호출 가능. 변수값에 따라 함수 이름을 정의 가능
*/
const item = "world";
const sports = {
  [item]: 100,
  [item + " Cup"]: "월드컵",
  [item + "Sprots"]: function(){
    return "스포츠";
  }
};
log(sports[item]);
log(sports[item + "Cup"]);
log(sports[item + "Sports"]());

// 100
// 월드컵
// 스포츠

• 분할 할당을 조합한 형태

/*
1. 변수값을 프로퍼티 이름으로 사용하고 분할 할당한 형태
2. {[item]: title}
{book: title} 형태가 됨
3. {book: "책"}
{book: title}에 "책"이 할당
*/
const item = "book";
const result = {[item]: title}
				= {book: "책"};
log(result);

// {book: 책}