12. 오늘날의 ES6 솔루션

주요 내용

앞의 단원들의 내용을 토대로 ES6에서 솔루션 소개인데... 별 도움은 되는 것 같지가 않다.... 뭐이런게 있다 정도??

타입스크립트

타입선언을 안하는 자바스크립트를 확장. 2012년 마소가 발표. 마소제품군 중 온라인 프론트 쪽은 거의다 타입스크립트

클래스구문

• TypeScript

  ```typescript

  class BaseStructure {

  constructor() {

  console.log(" Structure");

  }

  }

class Castle extends BaseStructure { constructor(public name) { super(); }

pubic build() { console.log("Castle! built") } }

- JavaScript
```javascript

var _extends = this._extends || function (d, b) {
  for (var p in b)
    if (b.hasOwnProperty(p))
      d[p] = b[p];

  function __() {
    this.constructor = d;
  }

  __.prototype = b.prototype;

  d.prototype = new __();
};

var BaseStructure = (function () {
  function BaseStructure() {
    console.log("Structure");
  }

  return BaseStructure;

})();

var Castle = (function (_super) {
  _extends(Castle, _super);

  function Castle(name) {
    _super.call(this);
    this.name = name;
  }

  Castle.prototype.build = function () {
    console.log("Castle built" + this.name);
  };

  return Castle;
})(BaseStructure);

모듈구문

타입스크립트 문법 기준 모듈 모듈화, 패키징

ES6

• import, export ?

module Westeros.buildings{
  classBaseStructure{
    // ...
  }

}

화살표 함수

first class : 일급 시민 ..? 응 개소리번역 first class 란, 변수로 할당되어 사용이 될 수 있는 것. 즉 데이터 타입으로 인정 받는 것 화살표 함수, 에로우펑션, 람다 -> 변수에 할당 및 전달, 파라미터로 전달이 가능

• 클래스 기반 (람다)

  class LoginPage {
  constructor(container) {
    container.on("click", "login-link", (item) => {
      this.login();
    });
  
    container.on("click", "login-link", function (item) {
      this.login();
    });
  }
  login() {
    console.log("login!");
  }
  }

• 컴파일 후 (람다주목)

  ```javascript var LoginPage = (function () { function LoginPage(container) { var _this = this; // 외부 this

  // 람다 컴파일 후 container.on("click", "login-link", function (item) { _this.login(); // 외부 this를 사용함 });

  // 컴파일 후 -> 그대로 container.on("click", "login-link", function (item) { this.login(); }); }

  LoginPage.prototype.login = function () { console.log("login"); }; return LoginPage; })();

즉, 람다에서 `this`사용은 유의 해야한다. 저번에 this 바인딩 공부할 때  
람다 같은 경우 불완전 함수라고 우리끼리 명시한 바 있다.  
this의 바인딩 문제였는데 여기서 한번더 거론 중.  

즉 여기서 알 수 있는 것은, `람다에서 this는 한단계 위를 지칭`함을 알 수 있다

**가급적 화살표 함수 사용 권장 -> 깔끔, 유연, function 키워드의 대체 가능**


### 타이핑

- 변수에 타입 할당
```typescript
var numbers: Array<number> = [];
numbers.push(7);
numbers.push(8);
var unknown = numbers.pop();

컴파일에만 확인하는 작업 용도 저자는 타입스크립트 찬양론자

트레이서

타입스크립트와 같은 컴파일러 구글 후원. ES6 -> ES5로 변환 해주는 컴파일러

트레이서가 지원하는 ES6 함수목록 ... 많아서 생략.. 그중에서 5개 소개 중

• 클래스

• 기본매개변수

• 템플릿 리터럴

• let으로 블록 바인딩하기

• 비동기

트레이서 설치

# nodejs, npm 설치된 경우
$npm install -g traceur

# 컴파일 할 수 있는 traceur 바이너리 생성
$traceur --script input.js --out output.js

클래스

ES6 -> ES5 -> use strict 모드에서 실행되야 함

// es6
class BaseStructure {
  constructor() {
    console.log(" Structure");
  }
}

class Castle extends BaseStructure {
  constructor(name) {
    this.name = name;
    super();
  }

  build() {
    console.log("Castle! built" + this.name);  
  }
}

// es5
var BaseStructure = funtion BaseStructure() {
  "use strict";
  console.log("Structure");
}
($traceurRuntime.createClass) (BaseStructure, {}, {});
var Castle = function Castle(name) {
  "use strict";
  this.name = name;
  $traceurRuntime.superCall(this, $Castle.prototype, "constructor", []);
}

var $Castle = Castle;
($traceurRuntime.createClass) (Castle, {build: funtion(){
  "use strict";
  console.log("Castle! built" + this.name);
}},{},BaseStructure);

기본 매개변수

ES6 부터, 매개변수 설정 후 데이터가 안들어오면 undefined로 설정 됨 undefined는 알다시피 예약어가 아님. 값 할당이 가능 -> 하지않는게 좋다

function abc (var1, var2, var3){
  console.log(var1);
  console.log(var2);
  console.log(var3);
}

템플릿 리터럴

백틱 (``)을 사용하여 변수 매핑이 가능 JSP 같은 템플릿 도구 일부를 대체 가능 할 것으로 보임

  var name = "aaa";
  var s = `this is aa ${name}`;
  console.log(s);

let으로 블록바인딩하기

ES6부터 함수기반의 스코프 -> 블록기반의 스코프로 변경 하는 키워드 let

비동기

await/async -> 비동기코드를 명확하게(동기처럼) 해준다

  function timeout(ms) {
    return new Promise((resolve => {
      setTimeout(resolve, ms);
    }));
  }

  async function asyncValue(value) {
    await timeout(1500);
    return value;
  }

  (async function () {
    console.log("Start");
    var valuePromise = asyncValue(42).catch(console.error.bind(console));
    console.log("Task is running in the background");
    console.log("Awaiting the promise");
    var value = await valuePromise;
    console.log("Promise resolved");
    console.log(value);
  })();

  /*
    Start
    Task is running in the background
    Awaiting the promise  -> 딜레이 후 1500ms
    Promise resolved      -> 반환 후 실행
    42
   */