Javascript ES6 특징?? 뭘까??

1. ES6의 특징

var link = function(height = 50, color = 'red') {}

1. 기본 매개 변수 => 기본 매개 변수를 사용하면 undefined를 제외한 모든 값을 인정한다.

// ES5

var name = 'Your name is ' + first + ' ' + last + '.'

// ES6

var name = `Your name is ${first} ${last}.`

2. 템플릿 리터럴 => ${}를 쓰면서 '+'없이 편하게 쓸 수 있다.

// ES5

var roadPoem = 'Then took the other, as just as fair,\n\t'
    + 'And having perhaps the better claim\n\t'
    + 'Because it was grassy and wanted wear,\n\t'
    + 'Though as for that the passing there\n\t'
    + 'Had worn them really about the same,\n\t'
    
// ES6

var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`

3. 멀티 라인 문자열 => 백틱을 사용함으로써, 한줄로 문자를 쓸 수 있다. 원래라면, 행 구분이 되지 않았다.

// ES5

// browser
var data = $('body').data(),
  house = data.house,
  mouse = data.mouse

// Node.js
var jsonMiddleware = require('body-parser').json

var body = req.body,
  username = body.username,
  password = body.password
  

// ES6

var {house, mouse} = $('body').data()

var {jsonMiddleware} = require('body-parser')

var {username, password} = req.body

4. 구조분해할당 => 할당하려는 변수명과 구조화된 데이터의 property명이 같아야 한다.
   그리고, 구조화된 데이터가 아니라 배열의 경우 { } 대신 [ ]를 사용해서 위와 유사하게 사용할 수 있다.

// ES5

var serviceBase = {port: 3000, url: 'fz7948.tistory.com'},
    getAccounts = function(){return [1,2,3]}

var accountServiceES5 = {
  port: serviceBase.port,
  url: serviceBase.url,
  getAccounts: getAccounts,
  toString: function() {
    return JSON.stringify(this.valueOf())
  },
  getUrl: function() {return "http://" + this.url + ':' + this.port},
  valueOf_1_2_3: getAccounts()
}

// ES6

var serviceBase = {port: 3000, url: 'fz7948.tistory.com'},
    getAccounts = function(){return [1,2,3]}
var accountService = {
    __proto__: serviceBase,
    getAccounts,
    toString() {
     return JSON.stringify((super.valueOf()))
    },
    getUrl() {return "http://" + this.url + ':' + this.port},
    [ 'valueOf_' + getAccounts().join('_') ]: getAccounts()
};

5. 향상된 객체 리터럴 =>
   1. getAccounts: getAccounts 대신 getAccounts를 바로 사용할 수 있다.(변수명으로 속성 지정)
   2. proto 속성을 사용해서 바로 프로토타입을 설정할 수 있다.

// ES5

var ids = ['5632953c4e345e145fdf2df8', '563295464e345e145fdf2df9'];
var messages = ids.map(function (value, index) {
 return 'ID of ' + index + ' element is ' + value + ' '
});

// ES6

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map((value, index) => `ID of ${index} element is ${value} `)

6. 화살표 함수 => 화살표 함수로 개발자들의 귀찮음을 벗겨주었다.

// ES5

setTimeout(function(){
  console.log('Yay!')
}, 1000)

// ES6

var wait1000 =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000)
}).then(function() {
  console.log('Yay!')
})

7. Promise => new Promise로 표준 Promise가 제공된다.

8. 블록 범위 생성자 => Let 및 const를 사용한다.

class baseModel {
  constructor(options = {}, data = []) { // class constructor
    this.name = 'Base'
    this.url = 'http://fz7948.tistory.com'
    this.data = data
    this.options = options
    }

  getName() { // class method
      console.log(`Class name: ${this.name}`)
  }
}

9. Class(클래스) : class키워드가 추가되어 prototype 기반 상속보다 명확하게 class를 정의할 수 있다.

// ES5

module.exports = {
  port: 3000,
  getAccounts: function() {
    ...
  }
}

var service = require('module.js')
console.log(service.port) // 3000

// ES6

export var port = 3000
export function getAccounts(url) {
  ...
}

import {port, getAccounts} from 'module'
console.log(port) // 3000

10. 모듈(Modules) => 번거롭게 신경쓸게 많았었는데, import 하나로 간단하게 사용할 수 있게 되었다.