[ES6] 6. Class sugar syntax and Template Strings

Chapter 6. Class sugar syntax and Template Strings

기존의 자바스크립트에서는 캡슐화를 하기 위해 constructor function을 사용하였다. 이를 보완하기 위해 class 문법이 등장하였다. class라는 키워드로 말 그대로 클래스를 생성할 수 있게 된 것이다. 이것은 새로운 객체 모델이 아니라 기존에 사용했던 프로토타입 객체 지향의 문법을 class 기반인 것처럼 wrapping 한 문법이다. sugar syntax라고도 한다.

ES5>>

function SponsorWidget(name, description, url){
     this.name = name;
     this.description = description;
     this.url = url;
}
SponsorWidget.prototype.render = function( ){
     //do something
}

ES6>>

class SponsorWidget {
 
     constructor(name, description, url){
          this.name = name;
          this.description = description;
          this.url = url; // this = instance
     }
 
     render( ){ // method initializer shorthand를 사용한다!
          let link = this._buildLink(this.url); // this = instance
     }
     
     _buildLink(url){ // _prefix는 private을 나타낸다.(나타내기만한다.)
          //do something
     }
}

Class - inheritance

class SponsorWidget extends Widget {
     constructor(name, description, url){
          super( );
          //...
     }
}

상위 클래스의 생성자에 접근할 때는 super 를 통해서 접근하는데,

이 문법은 상위 부모 클래스를 확장한 서브클래스의 constructor안에서만 유효하다.

상위 클래스의 메소드에 접근할 때는 this를 통해서 접근할 수 있다

http://hacks.mozilla.or.kr/2016/03/es6-in-depth-classes/

http://hacks.mozilla.or.kr/2016/04/es6-in-depth-subclassing/

Overriding

JS에서도 마찬가지로 overriding을 지원한다. 상위 부모 클래스에 접근하는 super라는 키워드를 통해 메소드를 재정의하는 방식으로 overriding이 이루어진다.

code>>

Class Widget{
     constructor(){
          this.baseCSS = “site-widget”;
     }
     parse(value){
          //...
     }
}
 
Class SponsorWidget extends Widget{
     constructor(name, description, url){
          super();
          //...
     }
     parse(){
          let parsedName = super.parse(this.name);
          return ${parsedName};
     }
     render(){
          //...
     }
}

Template Strings

이 방법은 interpolation을 가능하게 한다.

ES5>>

function buildUser(first, last, postCount){
     var fullName = first + “ “ + last;
}

ES6>>

function buildUser(first, last, postCount){
     let fullName = `${first} ${last}`;
}

multi-line 문자열을 작성하는데 더 편해졌다.

let longText = `Hi ${userName},
 
this is a very
 
long text
`;
 
console.log(longText);
// Hi Sam,
// 
// this is a very
//
// long text

http://hacks.mozilla.or.kr/2015/08/es6-in-depth-template-strings-2/

Chapter 6. end