🌼 ES6 특징

🐶 ES란?

• ES(ECMAScript)란 자바스크립트를 표준화 하기 위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어이다.

ECMAScript는 스크립팅 언어를 만드는 규칙을 작성한 것, 자바스크립트는 이와 같은 규격을 바탕으로 만들어진 언어이다. 
ECMAScript의 규칙을 기반으로해서 자바스크립트와 같은 다양한 언어를 만들어낼 수 있는 것이다.

ES6의 9가지 기능

1️⃣ 기본 매개 변수 (Default Parameters)

• befor

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

• after

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

• ⛔️ 주의 사항

단, 주의해야 할 점이 있다. 인자값으로 0 또는 false가 입력될 때 두 예시의 결과는 다르다. 
ES5에서는 || 처리 시 0 또는 false 값이 입력 되어도 거짓이 되므로 기본값으로 대체된다. 
하지만 ES6의 기본 매개 변수를 사용하면 undefined 를 제외한 입력된 모든 값(0, false, null 등)을 인정한다.

2️⃣ 템플릿 리터럴 (Template Literals)

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

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

//  "`" (back-ticked) 문자열 안에 ${NAME}라는 새로운 구문을 사용해서 간단히 처리할 수 있다.

3️⃣ 멀티 라인 문자열 (Multi-line Strings)

// befor
var fourAgreements = 'You have the right to be you.\n\
    You can only be you when you do your best.'

//after
var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`

// 여러줄도 "`" (back-ticked)을 사용하여 작성 할 수 있다.

4️⃣ 비구조화 할당 (Destructuring Assignment)

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

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

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

var {username, password} = req.body
// var로 할당하려는 변수명과 구조화된 데이터의 property명이 같아야 한다. 
// 또한 구조화된 데이터가 아니라 배열의 경우 {} 대신 []를 사용해서 위와 유사하게 사용할 수 있다.

5️⃣ 화살표 함수 (Arrow Functions)

// befor
var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map(function (value) {
  return "ID is " + value // explicit return
});

//after
var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map(value => `ID is ${value}`) // implicit return

//화살표 함수가 한 줄의 명령문과 함께 사용되면 표현식이 되어 명령문의 결과를 암시적으로 반환한다.

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

// after
var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map((value, index, ...abc) => ({v:value, i:index, a:abc}))
// 또한 본문을 괄호로 감싸 객체 표현식을 반환할 수 있으며 ... 을 이용해 가변 파라미터를 사용할 수도 있다.

6️⃣ Promises

참고자료

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

// after
var wait1000 =  ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)})

wait1000()
    .then(function() {
        console.log('Yay!')
        return wait1000()
    })
    .then(function() {
        console.log('Wheeyee!')
    });

//ES5 보다 ES6의 Promise를 사용한 예시가 더 복잡해 보이지만 위와 같이 중첩된 setTimeout 예시를 보면 Promise의 이점을 확인할 수 있다.

7️⃣ 블록 범위 생성자 Let 및 Const (Block-Scoped Constructs Let and Const)

• let, const 도 실제로 호이스팅이 되지만, var와 다르게 호이스팅 후 선언, 초기화가 동시에 이루어지지 않기 때문에 ReferenceError가 발생한다.

8️⃣ 클래스 (Classes)

• ES6부터 Javascript도 class와 class 상속을 지원한다.(ES6 이전에는 class 대신 생성자를 사용했다.)

// ES6 이전
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 프로토타입 메소드
Person.prototype.introduce = function() {
  return '안녕하세요. 제 이름은' + this.name + '이고, 나이는' + this.age + '입니다.';
}

var person = new Person('홍길동', 25);
console.log(person.introduce()); // 안녕하세요. 제 이름은 홍길동 이고, 나이는 25 입니다. 


// ES6
class Person {
  constructor({name, age}) { // Destructing Assignment(구조분해할당)
    this.name = name;
    this.age = age;
  }
  
  // 메소드
  introduce() {
    return `안녕하세요. 제 이름은 ${this.name} 이고, 나이는 ${this.age} 입니다.`;
  }
}

const person = new Person({ name: '홍길동', age: 25 });
console.log(person.introduce()) // 안녕하세요. 제 이름은 홍길동 이고, 나이는 25 입니다.

9️⃣ 모듈 (Modules)

• Javascript의 중요한 새 기능, 또는 새 기능들의 통칭
• import, export를 이용해 내보내거나 불러올 수 있다.

// my-module
// export는 import 할 때 {} 로 감싸주어야 한다.
export const member = () => { // export는 해당 모듈에서 여러개 존재 가능
  return 'use Module';
}

// export default는 import 할 때 {} 로 감싸주지 않아도 된다.
const name = (name) => `My name is ${name}.`;
export default name; // export default는 해당 모듈에서 하나만 존재

import name from "my-module";
import * as name from "my-module"; // my-module의 모든 기능을 name으로 alias
import { member } from "my-module"; // my-module의 member 라는 기능만 사용
import { member as myMember } from "my-module" // my-module의 member 기능을 myMember 라는 이름으로 사용

출처 : 코딩월드뉴스(https://www.codingworldnews.com)
출처 : https://blog.asamaru.net/2017/08/14/top-10-es6-features/