ES5, ESNext, TS

ES5 -> ESNext -> TypeScript (화살표는 명제로 해석해도 좋다.)

ES5 = 웹 브라우저에서 동작하는 표준 자바스크립트(ECMAScript 5)
ESNext = 발전 중인 버젼
TypeScript = ESNext + Type

---

Transpiler?

ESNext + Babel(transpiler) =>(변환) ES5
TypeScript + TSC(TypeScript compiler) =>(변환) ES5

compiler vs transpiler

compiler = text to binary
transpiler = prog1 to prog2

요즘은 잘 구분하지 않는다고 한다.

---

ESNext features

1. destructuring assignment(비구조화 할당)
2. arrow function(화살표 함수)
3. class(클래스)
4. module(모듈)
5. generator(생성기)
6. promise, async / await

1. destructuring assignment

let person = {name: "Jane", age: 22}
let {name, age} = person // 객체 name = "jane", age = 22

let array = [1, 2, 3, 4]
let [head, ...rest] = array // 배열 head = 1, rest = [2, 3, 4]

let a = 1, b = 2;
[a, b] = [b, a] // 변수 a = 2, b = 1

2. arrow function

// JS

function add(a, b) {
  return a + b
}

// ESNext

const add = (a, b) => a + b

3. class

객체 지향 프로그래밍의 encapsulation, inheritance, polymorphism 지원

abstract class Animal {
  constructor(public name?: string, public age?: number) {
    abstract say(): string
  }
}

class Cat extends Animal {
  say() {
    return '야옹'
  }
}

class Dog extends Animal {
  say() {
    return '멍멍'
  }
}

let animals: Animal[] = [new Cat('야옹이', 2), new Dog('멍멍이', 3)]
let sounds = animals.map(a => a.say()) // ["야옹", "멍멍"]

4. module

export 키워드로 다른 파일에서도 사용할 수 있게 변수, 함수, 클래스를 모듈로 export 가능.

import 키워드로 가져와서 사용할 수 있다.

import * as fs from 'fs'

export function writeFile(filepath: string, content: any) {
  fs.writeFile(filepath, content, (err) => {
    err && console.log('error', err)
  }
}

5. generator

generator는 yield 를 이용해 iterator를 만들어 내는 iterable.
function*와 그 내부의 yield로 generator를 만들 수 있음. 특별한 실행흐름을 보여줌.

function* gen() {
  yield* [1, 2]
}

for(let value of gen()) {
  console.log(value)
}

// 1, 2

6. promise, async/await

async function get() {
  let values = []
  values.push(await Promise.resolve(1))
  values.push(await Promise.resolve(2))
  values.push(await Promise.resolve(3))
  return values
}
get().then(values => console.log(values)) // [1, 2, 3]

async -> 함수 수정자(function modifier)
await -> Promise 객체를 resolve
get -> Promise 형태로 반환
then -> Promise 객체의 실제 값을 도출