[ES6] 신규 문법 - 비구조화 할당 문법 등

ES6 개요

- JS가 ES6 버전으로 넘어오면서, 많은 편의 문법이 추가되었고, 이것은 모던 SPA 프론트엔드 프레임워크에 큰 밑받침이 되었다. 특히 비구조화 할당과 spread 문법은 자주 필수적으로 사용된다.

 

비구조화 할당

- 변수에 값 할당하는 간편 방식 

[~ ES5]

```

var name = req.body.name
var height = req.body.height

var weight = req.body.weight

```

ES6

```

const {name, height, weight} = req.body // name, height, weight를 굳이 중복으로 쓰지 않음

// 여러줄에 걸쳐 값을 일일히 가져올 필요 없이, 특정 객체의 일부 속성으로만 이루어진 객체를 생성할 수 있다.

```

 

객체 초기자

ES5

```

var name = 'nick'
var height = 166
var weight = 64
var datas = {
  name: name,
  height: height,
  weight: weight
}

```

ES6

```

let name = 'nick'
let height = 166
let weight = 64

let datas = {name, height , weight }                 // datas.name으로 접근 가능?
let datas2 = {username: name, height , weight } //

```

 

# 템플릿 리터럴

[ES5 이전]

```

var username = req.body.username
if ( !username ) {
    throw "'username' must required. Your input: " + username + "."
}

```

ES6

```

let {username} = req.body // 위에서 제시된 비구조화 할당 방식
if ( !username ) {
    throw `'username' must required. Your input: ${username}.`
}

 

```

 

# 기본 매개변수

- 함수 선언시, 기본값 바로 할당 가능

- Input, output을 간편하게 표시한 화살표 함수 가능

~ES5

```

var greeting = function(username, date, message) {
  username = typeof username !== 'undefined' ? username : 'anonymous'
  date = typeof date !== 'undefined' ? date : new Date()
  message = typeof message !== 'undefined' ? message : 'hello'
  return message + ' ' + username + ' at ' + date
}

```

ES6

```

const greeting = (username='anonymous', date=new Date(), message='hello') => {
    return `${message} ${username} at ${date}` //위에서 제시된 템플릿 리터럴
}

```

# JS 에서 비동기 처리의 진화과정

callback -> async.js -> Promise -> Generator(현재) -> async/await(미래)

 

# Promise : 비동기 함수처리를 지원해주는 객체

ES6에서는 Promise가 표준 내장 객체로 추가돼서 외부 모듈 없이 사용할 수 있다.

모든 비동기 함수는 Promise를 반환하게 만드는 게 핵심이다.

기존의 callback 스타일로 작성해도 되는 간단한 코드들도 모두 Promise를 반환한다는 규칙으로 함수 convention

const getName = (user_id) => {
return new Promise( (resolve, reject) => { //Promise 객체 생성
if ( !user_id ) {
return reject('user_id must be required.') //메인 비동기 로직에서 바로 종료시, return과 reject()함께 호출;
}

Model.select('table_users', user_id)       //메인 비동기 로직
.then( result => { //비동기 실행 정상완료시 호출
resolve( result.username )
})
.catch( err => {  //비동기 실행 비정상완료시 호출
reject( err )
})
});
}

# Generator

function*이 추가되었다.

Generator 함수는 호출되어도 즉시 실행되지 않고, 대신 함수를 위한 Iterator 객체가 반환

const bigPicture = function* () {
	let awesome = yield beautiful()
}

 

# async/await