JS를 사용하다 보면 나오는 ES5, ES6, ES2015 그리고 ESNext 등에 대해서 알아보자
ES?
ECMAScript의 줄임말로 자바스크립트는 어떻게 써야된는지를 알려주는 명세 문서라고 보면 된다. 한마디로 자바스크립트를 표준화하기 위해 만들어졌다.
자바스크립트 버전이다.
정확히는 ES(ECMAScript)의 버전이다.
자바스크립트는 ES의 표준을 따르는 언어이다. 때문에 새로운 ES 버전이 나오면 자바스크립트 또한 이 표준에 따르기 때문에 자바스크립트 버전이라고 보면 된다.
ES5
2009년에 발표된 자바스크립트 버전이다. 이 버전의 특징은 다음과 같다.
주요 기능
- Strict Mode(엄격 모드) 지원: 첫 줄에
"use strict";를 입력하여 사용 - JSON 지원: 이를 통해 JS객체로 쉽게 표현
- 배열 메서드:
forEach(),map(),filter(),reduce()등 추가 Getter와Setter: 객체의 속성에 접근하는get과set키워드 도입
지금은 다연하게 쓰고 있는 JSON, 배열 메서드를 이때 지원 했다는게 꽤나 충격적이었다.
참고로 ES5의 이전 버전은 ES3이다..(ES4가 있었지만 거절 됨)
ES3
자바스크립트의 초기 버전으로 1999년도에 체택된 버전이다. 지금과 다르게 함수 스코프만 지원 한다던가, 기본적인 데이터 타입 undefined, null, boolean, number, string, 함수 키워드 function, 객체 리터럴 {} 등 자바스크립트의 기본적인 부분만 있다.
ES6
ES2015
2015년에 발표된 버전으로, 이전 버전과 비교하여 많은 기능이 추가되었다.(지금 우리가 생각하는 자바스크립트의 구색을 갖추기 시작했다. 6년이라는 차이를 생각해보면..)
참고로 이때부터 Promise API가 도입되었다.
ES6 = ES2015
ES6는 2015년도에 출시한 버전으로 ES2015 라고도 불린다. 이후 버전부터는 버전 대신 출시년도 붙여서 표현한다.
주요 기능
let,const키워드로 블록 스코프 변수 선언- 클래스를 사용한 객체 지향 프로그래밍 지원
- Promise API 도입으로 비동기 작업 개선
- 화살표 함수:
() => {}로 간결한 문법 - 모듈 시스템 도입:
import,export키워드 - 확장된 객체 리터럴: 프로퍼티 축약 표현, 계산된 프로퍼티 이름 등
import 모듈_시스템_import from 'some_modules';
{
let let_키워드 = 'apple';
const const_키워드 = 'banana';
};
class 클래스_키워드 {}
const 화살표_함수 = () => {};
const 템플릿_리터럴 = `a(${a}) and b(${b})`; // ===> "a(undefined) and b(undefined)"
const Multi_line_String = `한글이 불편하시죠?
죄송합니다🥹`;
var ES5_에서는_이렇게 = '한글이 불편하시죠?\n' + '죄송합니다🥹';
const 프로퍼티와_메서드_축약표현 = {
a,
b,
Classes,
doStuff,
template,
메서드_축약_표현(기본값_매개변수 = 'hello') {
console.log(기본값_매개변수);
},
};
const obj = { 구조: '', 분해: '', 할당: '' };
const { 구조, 분해, 할당 } = obj;
const arr = [1, 2, 3];
const [배열도, 사용, 가능] = arr;
const Spread_연산자 = [1, 2, 3];
const 배열의_항목들을_새로운_배열에_펼침 = [...Spread_연산자, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]
const 객체도_가능 = { ...obj, doStuff() {} } // { 구조: '', 분해: '', 할당: '', doStuff() {} }
const Rest_연산자 = ['c', 'd', 'e'];
function Rest_연산자_함수(a, b, ...Rest_연산자) {
console.log(Rest_연산자) ; // ['c', 'd', 'e']
}
/* 모듈 시스템 export */
export { props };ES2016
ES7
이때부터 이름에 버전 대신 출시년도를 붙이기 시작했다. 사실 ES6부터 ES2015로 많이 표현하는거 같다.
주요 기능
이전 버전과 비교하여 소규모 업데이트
- Array.prototype.includes()
- 제곱근 연산자(Exponentiation Operator)
const str = `시작 문자열입니다. 종료`;
const 문자열_메서드_includes = str.includes('문자열입니다.'); // ===> true
const math_pow = Math.pow(2, 10) // 1024
const 제곱근_연산자 = 2 ** 10; // 1024
console.log(math_pow === 제곱근_연산자) // trueES2017
ES8
ES2016은 ES2015의 안정화를 위한 단계 였다면, ES2017 부터가 핵심이라고 보면 된다.
주요 기능
드디어 async, await 문법이 추가되었다.
- Async / Await
- Object.values() / Object.entries()
- 문자열 패딩(String padding)
- 객체 속성 기술자(Object.getOwnPropertyDescriptors)
async function 비동기_함수() {
await fetch('https://example.com/data');
}
const obj = { a: 'apple', b: 'banana' };
const 프로퍼티_값_배열 = Object.values(obj); // ['apple', banana']
const 프로퍼티_튜플_배열 = Object.entries(obj); // [['a', 'apple'], ['b', 'banana']]
const str = 'string';
const 시작_문자열_조절 = str.padStart(8, '*'); // **string
const 종료_문자열_조절 = str.padEnd(8, '*'); // string**
const 객체_속성_기술자 = Object.getOwnPropertyDescriptors(obj);
const isWritable = descriptors.a.writable; // true이후 ES2018, ES2019, ES2020 등이 추가 됨
ES2020에서는 Dynamic import 기능, BigInt 원시 타입 추가, Promise.allSettled, Optional Chaining, Nullish Operator("??")가 있다.
ESNext
특정 버전이 아닌 현시점에서 ECMAScript의 최신 버전을 가리키는 용어이다. 즉, 특정 년도를 의미하는게 아닌 "다음" 버전을 의미한다.(출시 예정 또는 실험적인)
