[ECMAScript6] Template Strings, Enhanced Object Literals

ECMAScript 6가 나왔네요. 테스트해보니 크롬이랑 파이어폭스에서 잘 동작하네요.(최신버전)

새로 나온 feature 에 대해서 공부도 할겸 하나씩 정리해볼 생각입니다.

참고사이트 :

http://es6-features.org/

https://github.com/lukehoban/es6features

Template Strings (템플릿)

자바스크립트 자체적으로 템플릿을 지원합니다. 작업하기 훨씬 쉬워졌네요. 대박.

변수 할당도 쉬워졌고 원래 \n 으로 처리했던 멀티라인도 지원합니다. 

다만 따옴표(')가 아닌 ` 표시를 써야합니다.(키보드 1번 옆에 ~ 쉬프트 누르고)

 
var name = '이브라', time = '오늘';
 
var str = `안녕하세요 ${name}입니다. 
${time} 날씨 좋죠?`; 
 
console.log(str) // "안녕하세요 이브라입니다. 
                //    오늘 날씨 좋죠?"
 
// Construct an HTTP request prefix is used to interpret the replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);
 

Enhanced Object Literals (객체 리터럴)

강력한(?) 객체 리터럴 지원입니다.

강력하기 보다는 간단하게 선언할 수 있게 되었고 유동적인 네이밍 선언이 가능하게 되었습니다.

 
var name = '이브라';
var Ibra = {
    name, //name : name과 동일합니다!
    getName() {
        return this.name;
    }, // getName : function(){ ... } 형태로 선언하지 않아도 됩니다. 그냥 함수만 딱 선언.
    sayHello() {
        console.log(`안녕하세요 ${this.name}입니다.
        오늘 날씨 좋죠?`);
    },
    ['prop_' + (()=>42)()] : 42 // prop_42 : 42 화살표 함수 참고하세요.
};
 
console.log(Ibra.name); //이브라
console.log(Ibra['prop_42']); //42
Ibra.getName(); //이브라
Ibra.sayHello(); // 안녕하세요 이브라입니다.
                // 오늘 날씨 좋죠?