개발일지

배열과 객체의 디스트럭쳐링 정리

요즘 등장하는 SPA의 예제들은 대부분 es6에 등장한 import문법을 활용하고 있고,
이 과정에서 생소한 문법이 등장하는 것을 발견했습니다.
바로 import {a,b} from './lib' 등입니다.
분명 import구문도 정리를 해야 하겠습니다만, 그 이전에 디스트럭쳐링을 반드시 정리해야겠다는 생각입니다.
역시 MDN 예제가 가장 이해하기 쉽네요. Destructuring assignment
지금 현재 es6에 대해 파악한 내용과 지금 현재 널리 사용되는 문법을 정리한 예는 아래와 같습니다.

See the Pen Destructuring assignment by cinos (@shoveller) on CodePen.

배열 디스트럭쳐링

es5에서는 배열 요소를 전개해서 변수에 대입할 때, 첨자를 사용한 조회만 가능했었지만
es6에서는
1. 요소에 이름을 붙여 취득
2. ‘…‘연산자(스프레드 연산자)를 사용해서 나머지 요소들만 취득
하는 것이 가능해졌습니다.

객체 디스트럭쳐링

es5에서는 객체를 전개할 경우에 undefined를 처리하는 과정이 매우 번거로웠습니다만,
1. 특정 객체만 취득
2. 객체에 별명을 붙여 취득
하는 것이 가능해졌습니다.

아래의 예제는 프로퍼티가 여러개 있는 객체를 파라메터를 받는 함수를 정의할 때,
코드 량이 얼마나 줄어들 수 있는지를 보여주고 있습니다.
필요한 프로퍼티만 가져오되, 별명을 붙이거나, undefined일 때의 초기값을 할당할 수 있습니다.
자바스크립트에서 null은 값으로 취급되기에 null에는 초기값이 적용되지 않는다는 것을 알 수 있습니다.

See the Pen es6의 객체 디스트럭쳐링을 활용한 인자 전달 by cinos (@shoveller) on CodePen.