es6 주요 특징
- class 전격지원
- let, const 문법
- 화살표 함수(Arrow Function)
- Modules
- Promise
- 비구조화 할당(Destructuring Assignment)
- 템플릿 리터럴(Template Literals)
- 매개변수 기본값 설정
1. Class 전격지원
기존의 자바스크립트는 다른 객체지향 언어와는 달리 prototype을 기반으로 class를 묘사했는데, es6 문법에서는 new키워드로 class 생성이 가능하다.
class Cat {
// constructor
constructor(name) {
this.name = name;
}
sayHi() {
console.log(`Hi! ${this.name}`);
}
}
// 인스턴스 생성
const dd = new Cat("DD");
dd.sayHi(); // Hi! DD2. let, const 문법
function scope를 가지는 기존의 var 키워드 외에 block scope를 가지는 let, const 키워드가 등장했다.
function run() {
var a = "A";
let b = "B";
const f = "F";
console.log(a, b, f);// A B F
{
var c = "C";
let d = "D";
const e = "E";
console.log(d);// D
}
console.log(c);// C --> var는 함수레벨 스코프라서 가능.
console.log(d);// d is not defined
console.log(e);// e is not defined
// --> d, e는 let, const로 선언되었고, 선언된 블록을 벗어났기 때문에 에러발생.
}3. 화살표 함수(Arrow Function)
- 화살표 함수는 익명 함수로, let, const 선언 키워드로 이름을 부여할 수 있다.
- 화살표 함수에서 this의 의미
일반함수는 호출에 따라 this가 동적으로 결정된다.
화살표 함수는 선언될 때, this가 선언된 함수의 상위 스코프에 바인딩 되고 화살표 함수는 그 어떤 경우에도 this를 결정하지 않는다.
const add = function (x, y) {
return x + y
} //함수 표현식
const add = (x, y) => x + y//화살표 함수4. Modules
모듈: 재사용 가능한 코드조각
- 파일 단위의 모듈 스코프를 지원한다.
- import로 모듈 불러오기가 가능하다.
- export로 모듈 내보내기가 가능하다.
//module_01.js
export var hello = "world"//module_02.js
export default function greeting(name) {
return `hello, ${name}!`
}//app.js
import {hello} from "./module_01.js"
//비구조화 할당으로 가져오기
import greeting from "./module_02.js"
/* 하나의 개체가 있는 파일에서 export default를 하면
중괄호 없이 가져올 수 있다.*/5. Promise
순차적이지 않은 비동기함수의 실행을 동기적으로 진행할 수 있게 지원하는 기능이다.
프로미스의 3가지 상태
- Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
- Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
setTimeout(function(){
console.log('Yay!')
}, 1000)//비동기 코드var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})//promise를 사용한 비동기 코드6. 비구조화 할당
객체나 배열에서 속성이나 요소를 꺼내올 때 사용할 수 있다.
var obj = {p: 42, q: true};
var {p, q} = obj;
console.log(p); // 42
console.log(q); // true
7. 템플릿 리터럴(Template Literals)
템플릿 리터럴은 백틱(``)을 이용하여 내장된 표현식을 허용하는 문자열 리터럴이다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있다.
let t = "template";
let l = "literals";
console.log(`This is ${t} ${l}.`)
//This is template literals.8. 매개변수 기본값 설정
기본값 함수 매개변수 (default function parameter)를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있다.
function add(a, b = 1) {
return a + b;
}// 매개변수 b가 주어지지 않을 경우 초기값을 1로 설정한다.
console.log(add(5, 3));
// 8
console.log(add(5));
// 6
Reference
ES6 (ES2015) 의 특징들
개발자가 필히 알아야 할 ES6 10가지 기능
Javascript 기초 - ES 6 대격변의 시대
Top 10 ES6 Features Every Busy JavaScript Developer Must Know
MDN
