[ES6] 3. Object shorthand, destructuring, assign

Chapter 3. Object

Shorthand

ES6에서는 객체를 반환하는데 있어서 불필요한 반복을 없앴다. key, value 형식으로 object의 프로퍼티를 추가했다면, shorthand 방식으로도 가능해졌다. 함수에서 반환하는 형식에서 뿐만 아니라 객체 그 자체를 정의하는데에도 사용할 수 있다. 물론, 객체의 프로퍼티 명과 지역변수의 명이 같아야 한다.

ES5>>

function buildUser(first, last){
     let fullName = first + “ “ + last;
     return { first : first, last : last, fullName : fullName };
}
let user = bulidUser(“Sam”, “Williams”);
 
console.log(user.first); // Sam
console.log(user.last); // Williams
console.log(user.fullName); // Sam Williams

ES6>>

function buildUser(first, last){
     let fullName = first + “ “ + last;
     return {first, last, fullName};
}
let user = bulidUser(“Sam”, “Williams”);
 
console.log(user.first); // Sam
console.log(user.last); // Williams
console.log(user.fullName); // Sam Williams

ES6>>

let name = “Sam”;
let age = 45;
let friends = [“Brook”, “Tyler”];
 
let user = { name, age, friends };

Object Destructuring ( 분해 )

shorthand 방식을 이용하여 함수의 반환값을 바로 객체에 할당할 수 있다. 이 때 함수에서 반환되는 프로퍼티 값과 지역 변수의 이름이 같아야 가능하다. 이렇게 하면 함수의 반환 값을 임시 객체에 저장하고 그 객체의 프로퍼티를 통해 접근하여 지역변수에 할당하는 과정을 축소할 수 있다. 굳이 전체를 객체에 할당하지 않고 부분적으로만 할당도 가능하다. 즉, 리턴되는 값이 객체일 경우, 그 객체를 분해하여 바로 지역변수로 접근이 가능하다는 것이다.

code>

function buildUser(first, last){
     let fullName = first + “ “ + last;
     return {first, last, fullName};
}
let { first, last, fullName } = buildUser(“Sam”, “Williams”);
 
console.log(first); // Sam
console.log(last); // Williams
console.log(fullName); // Sam Williams
 
//굳이 전체를 객체에 할당하지 않고 부분적으로만 할당도 가능하다.
let { fullName } = buildUser(“Sam”, “Williams”);
console.log( fullName ); // Sam Williams

Method Initializer Shorthand

객체에 함수를 추가할 때, 객체의 프로퍼티에 익명 함수를 추가하는 방식을 사용했다. ES6에서는 메소드를 활용한다.

ES5>>

function buildUser(first, last, postCount){
     return {
          first,
          last,
          isActive : function( ){
               ...
          }
     }
}

ES6>>

function buildUser(first, last, postCount){
     return {
          first,
          last,
          isActive( ){
               ...
          }
     }
}

http://hacks.mozilla.or.kr/2015/09/es6-in-depth-destructuring/

Object.assign

수많은 애플리케이션에서 공동으로 사용되기 위해서는 재사용성이 높은 함수를 만들어 둬야 한다. 

option이라는 객체를 통해 parameter로 전달한다.

ES5>>

function countdownTimer(target, timeleft, { container, timeUnit, clonedDataAttribute, timeoutClass, timeoutSoonClass, timeoutSoonSeconds} = { }) {
     //do something
}

ES6>>

function countdownTimer(target, timeleft, option = {}) {
     //do something
}

|| 를 사용하지 말자

ES5>>

function countdownTimer( target, timeleft, options = { }){
     let container = options.container || ‘.timer-display’;
     let timeUnit = options.timeUnit || “seconds”;
     ...
}

ES6>>

function countdownTimer( target, timeleft, options = { }){
     let defaults = {
          container : “timer-display”,
          timeUnit : “seconds”,
          ...
     };
}

Mergin Values into a Combined Variable

우리는 assign 메소드를 통해 default 객체와 option 객체를 merge 하여 최종 setting 객체를 만든다.

이 때, option의 요소들과 default의 요소들을 비교하여 같은 프로퍼티일 경우에는 option 객체의 것이 default 객체의 것을 오버라이드한다. 즉, default로 setting되어 있는 값보다 인자로 넘어오는 값을 우선적으로 할당한다는 것이다.

assign 메소드를 살펴보자.

.assign(returnObj, default object, option object)

이렇게 세 개의 인자가 넘어가게 되고 맨 앞에 있는 returnObj는 default object 와 option object가 merge 된 결과값을 담을 객체이고, assign에 의해 반환될 객체인 것이다. option object는 여러개일 수 있다.

code>

function countdownTimer(target, timeLeft, option = { }){
     let defaults = {
          //...
     }
     let settings = Object.assign({ }, defaults, options);
     //...
}

in practice>

function countdownTimer(target, timeLeft, options = { }){
     let default = {
          container: “.timer-display”,
          timeUnit: “seconds”,
          //...
     };
     let settings = Object.assign({ }, defaults, options);
 
     console.log(settings.container);
     console.log(settings.timeUnit);
}

Chapter 3. end