ESNext의 주요 문법

ESNext의 주요 문법

1. 비구조화 할당

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. 화살표 함수

function add(a, b) {return a + b}
const add2 => (a, b) => a + b

3. 클래스

ESNext에서는 객체지향 프로그래밍을 지원
객체지향프로그래밍은 캡슐화, 상속, 다형성이라는 세 가지 요소가 있음

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: Aniaml[] = [new Cat('야옹이', 2), new Dog('멍멍이', 3)]
let sounds = animals.map(a =>a.say()) // ["야옹", "멍멍"]

ES5 JS로는 위와 같은 형태의 코드를 작성할 수 없다

4. 모듈

모듈은 코드를 여러 개의 파일로 분할해서 export키워드를 통해 다른 파일에서도 사용할 수 있는 장점이 있다(다른 파일에서 가져올 때는 import키워드 사용)

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

5. 생성기

TS, Python, PHP 같은 몇몇 프로그래밍 언어에서는 yield라는 키워드 제공
반복기를 생성할 때 사용. 반복기는 독립적으로 존재하지 않고 반복기 제공자를 통해 얻는다.
yield문을 이용해 반복기를 만들어 내는 반복기 제공자를 생성기라고 함.

생성기는 function*과 yield키워드를 이용해 만듦. TS에서 yield는 function* 함수 내부에서만 사용 가능

function* gen() { // function*: 생성기				1번
	yield* [1, 2]					// 	2번
}
for (let value of gen()) {console.log(value)} // 1, 2		3번

실행순서 1 -> 2 -> 3(1) -> 2-> 3(2)

 

6. Promise와 async/await구문

Promise는 비동기 콜백 함수를 상대적으로 쉽게 구현할 목적으로 만들어짐

async function get() { // async 함수 수정자
	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]