ES란 ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다.
뒤에 숫자는 버전을 뜻하고 ES6은 2015년에 출시되었다.
- let, const
자바스크립트는 함수 스코프와 전역 스코프만을 지원하여 변수의 생명 주기 및 접근을 제어해 왔다.
하지만 ES6부터는 블록 스코프도 지원하게 되었다. 이걸 가능하게 해 주는 것이 let과 const이다.
기존에 var 키워드만 있었을 때보다 예측 가능한 코드를 작성할 수 있게 되었다.
- 템플릿 리터럴
백틱으로 사용 가능하다. ${} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.
// ES5
var str1 = ', ';
var str2 = 'World!';
var str3 = 'Hello' + str1 + str2;
// ES6
let str1 = ', ';
let str2 = 'World!';
let str3 = `Hello ${str1} ${str2}`;
- 객체 리터럴
전보다 간결해진 코드로 객체를 선언할 수 있다. 메서드에 콜론이나 function을 붙이지 않아도 된다. 함수명이 겹치는 경우에는 한 번만 쓸 수 있다. 객체의 프로퍼티를 동적으로 생성하려면 객체 리터럴 바깥에서 [text+1]과 같이 선언했어야 됐는데 ES6부터는 객체 안에서 바로 속성으로 사용할 수 있다.
- 화살표 함수
화살표 함수는 함수 정의를 보다 간결한 구문으로 콜백을 정의할 때 유용하다. 함수 표현식을 화살표 함수로 표현할 수도 있다. 화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어 가독성 및 유지 보수성이 올라갔다.
// ES6
// 함수 표현식 - 화살표 함수
const result = (a, b) => {
return a + b;
}
// 함수 표현식 - 화살표 함수 (생략형)
const result = (a, b) => a + b;구조 분해 할당
구조분해할당이란 펼치다라는 뜻으로 객체나 배열에서 사용하며 값을 해체한 후 개별 값을 변수에 새로 할당하는 과정을 말한다.
// 배열 구조 분해
let foo = ["one", "two", "three"]
let [one, two, three] = foo;
console.log(one); // one
console.log(two); // two
console.log(three); // three
// 객체 구조 분해
let fruit = {
a: 'Apple',
b: 'Banana',
}
let { a, b } = fruitl
console.log(a); // 'Apple'
console.log(b); // 'Banana'
- Promise
자바스크립트에서 비동기 처리를 기존에는 콜백 함수를 사용한 콜백 패턴을 사용하였다. 결과론적으로는 콜백 지옥을 불러오게 된다. 이를 해결하기 위해 프로미스가 도입되었고 프로미스 후속 처리 메서드를 이용해 에러 처리를 효과적으로 할 수 있게 되었다.
- Class
자바스크립트는 프로토타입 기반의 객체 지향 언어이다. 클래스 기반의 객체 지향 프로그래밍도 할 수 있게 Class 키워드를 도입하였다. 자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해서 만들어졌다. 하지만 자바스크립트 런타임에 의해 내부적으로 객체가 관리되는 방식이 바뀐 것은 아니어서 여전히 프로토타입을 통해 속성과 함수를 상속한다는 점이 중요하다.
