ES6 - 구조 분해 할당

1. 구조 분해 할당이란?

 

  객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조다.

  개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 있다.

  가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다.

  이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment) 을 사용할 수 있다.

  이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘한다.

 

 

2. 배열 분해하기

  

let arr = ["Bora", "Lee"]
 
// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;
console.log(firstName) // "Bora"

 

  구조 분해 할당이란 명칭은 어떤 것을 복사한 이후에 변수로 '분해(destructurize)'해준다는 의미 때문에 붙여졌다.

  이 과정에서 분해 대상은 수정 또는 파괴되지 않는다.

 

  또한 아래의 예와 같이 쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있다

 

let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
//두 번째 요소는 생략되었지만, 세 번째 요소는 title이라는 변수에 할당된 것을 확인할 수 있습니다. 
//할당할 변수가 없기 때문에 네 번째 요소 역시 생략되었습니다

 

  할당 연산자 좌측엔 ‘할당할 수 있는(assignables)’ 것이라면 어떤 것이든 올 수 있다.

  아래와 같이 객체 프로퍼티도 가능하다.

 

let user = {};
[user.name, user.surname] = "Bora Lee".split(' ');

 

  배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있다.

  이럴 때는 점 세 개 ...를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져올 수 있다.

 

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
 
alert(name1); // Julius
alert(name2); // Caesar
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

 

  rest는 나머지 배열 요소들이 저장된 새로운 배열이 된다. 

  rest 대신에 다른 이름을 사용해도 되는데, 변수 앞의 점 세 개(...)와 변수가 가장 마지막에 위치해야 한다는 점은 잊지말자.

 

 

 

3. 객체 분해하기

 

  프로퍼티 options.title과 options.width, options.height에 저장된 값이 상응하는 변수에 할당된 것을 확인할 수 있다.

  참고로 순서는 중요하지 않습니다. 아래와 같이 작성해도 위 예시와 동일하게 동작한다.

 

let options = {
  title: "Menu",
  width: 100,
  height: 200
};
 
let {title, width, height} = options;
 
alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
 
// let {...} 안의 순서가 바뀌어도 동일하게 동작함
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

 

  프로퍼티가 없는 경우를 대비하여 =을 사용해 기본값을 설정하는 것도 가능하다.

 

let options = {
  title: "Menu"
};
 
let {width = 100, height = 200, title} = options;
 
alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

 

  나머지 패턴(rest pattern)을 사용하면 배열에서 했던 것처럼 나머지 프로퍼티를 어딘가에 할당하는 게 가능하다.

  참고로 IE를 비롯한 몇몇 구식 브라우저는 나머지 패턴을 지원하지 않으므로 주의해서 사용해야 한다.

  물론 바벨(Babel)을 이용하면 되지만요.

 

let options = {
  title: "Menu",
  height: 200,
  width: 100
};
 
// title = 이름이 title인 프로퍼티
// rest = 나머지 프로퍼티들
let {title, ...rest} = options;
 
// title엔 "Menu", rest엔 {height: 200, width: 100}이 할당됩니다.
alert(rest.height);  // 200
alert(rest.width);   // 100

 

 

 

4. 중첩 구조 분해

 

  객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출할 수 있다.

  이를 중첩 구조 분해(nested destructuring)라고 부른다.

  아래 예시에서 객체 options의 size 프로퍼티 값은 또 다른 객체다. 

  items 프로퍼티는 배열을 값으로 가지고 있다.

  대입 연산자 좌측의 패턴은 정보를 추출하려는 객체 options와 같은 구조를 갖추고 있다.

 

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};
 
// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
  size: { // size는 여기,
    width,
    height
  },
  items: [item1, item2], // items는 여기에 할당함
  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options;
 
alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

 

  그런데 위 예시에서 size와 items 전용 변수는 없다는 점에 유의하자.

  전용 변수 대신 우리는 size와 items 안의 정보를 변수에 할당했다.

 

 

*출처 : ko.javascript.info/destructuring-assignment#ref-729