자바스크립트 ES, ES5, ES6(ES2015)

자바스크립트(Javascript), ECMAScript, ECMA-262

 

자바스크립트를 공부하다보면 ES6 문법이라는 이야기를 많이 듣는다. 특히 변수 선언하면서 사용하는 let과 const 설명을 하며 자주 듣는데, ES6, ES5 하면 뭔가 버전 같기도 하고, 어떤 것인지 궁금했다.

 

ES

ES는 ECMAScript의 약자이다.

 

그리고 ECMAScript는 자바스크립트 언어의 표준 사양을 정의하는 규격이다. 이 규격은 Ecma International라는 국제 표준화 기구에서 정한 것. (European Computer Manufacturers Association이라는 이름에서 국제적으로 커지다보니 이름을 그냥 Ecma로 바꿨다고 한다.. ISO와 비슷하다고 생각하면 편할 듯)

 

ISO 9001, 14001 같이 유명한 표준이나 기준처럼, ECMA도 ECMA-262, 404 같은 번호로 표준이나 규격을 정리하는데, 이 때 ECMA-262가 바로 ECMAScript의 규격이다. (ECMA-404는 JSON 데이터 형식 규격, ECMA-334는 프로그래밍 언어 C# 의 규격 같이 다른 유명한 기술 규격도 있다)

 

ECMA-262는 범용 목적의 스크립트 언어에 대한 명세를 정리한 기술 규격이고,

스크립트 언어는 독립된 시스템에서 작동하도록 특별히 설계된 프로그래밍 언어이다.

그래서 이를 정리하면, ECMAScript는 "ECMA-262 기술 규격에 정의된 범용 스크립트 언어"를 의미한다.

 

그럼, 자바스크립트는?

 

자바스크립트는 ECMAScript를 따르는 언어이다. 즉, 같은건 아니지만 자바스크립트가 ECMAScript의 기준을 따르고 있다는 뜻(ECMAScript의 기준을 따르는 다른 언어로 Jscript도 있다). 그래서 ECMA-262 문서를 보면 아래와 같은 소개의 단락이 있다. 

ECMAScript is based on several originating technologies, the most well-known being JavaScript (Netscape) and JScript (Microsoft).

 

즉,

JavaScript는 Ecma International에서 정한 기술 규격(ECMA-262)인  ECMAScript의 사양을 준수하는 스크립트 언어

라고 정리할 수 있다.

 

---

ES6

ES6는 ECMA-262, ECMAScript의 버전을 의미하는데, 6번째 버전이라는 뜻이다. 1997년 6월에 초판이 나오고, 1998년 6월에 2판, 1999년 12월에 3판, 4판은 규격이 제정되다 여러 이슈로 중단되었고, 5판은 2009년 12월에, 2015년 6월에 6판, 그 유명한 ES6이 나왔다.

 

이후에도 계속 꾸준히 개선되고 있고, ECMA-262링크에서 볼 수 있듯 2023년 4월 6일에 Draft 상태인 ES2024를 확인할 수 있다. (ES6이후로는 출판하는 년도를 ES뒤에 붙여서 부르는게 더 일반적인 상황인데, 왜냐하면 ES6이후로 매년마다 개정하기로 발표했기 때문이라고 한다.)

 

ES6가 자주 이야기 되는 것은 ES5와 큰 차이가 있었기 때문이다. 주요 차이는 아래와 같은데, 유용하게 쓰는 많은 문법들이 추가되었다.

 

1. 변수 선언: var → var, let, const

let과 const 키워드로 변수를 선언하는 것으로 블록 범위의 변수를 선언하고 hoisting에도 Initialize되지 않은 상태로 있는 TDZ에 있는 것으로 본다.

 

2. 화살표 함수: () => {}

간결한 문법 사용과 this 바인딩 문제를 해결해주는 함수 선언 방법

 

3. 클래스: class

객체지향 프로그래밍을 더 쉽게 해주는 class를 도입

 

4. 템플릿 리터럴

변수를 문자열 안에 쉽게 넣을 수 있도록 하는 문법으로 백틱(`, 숫자 1 옆에 있는 쉬프트와 함께쓰면 물결이 되는 그것)으로 감싸고 $와 중괄호 안에 변수명을 넣으면 된다. 

`now we can directly insert variable with template literals with ${variable}`

 

5. 비구조화 할당

비구조화 할당(Destructing Assignment)로 쉽게 배열이나 객체의 속성을 추출할 수 있게 되었다.

var person = {
    name: 'John',
    age: 30
  };
  
var name = person.name; // ES5
var age = person.age;   // ES5

var{ name, age } = person; // ES6

6. 기본 매개변수

함수 매개변수(parameter)에 기본 값을 지정할 수 있게 되었다.

 

7. 모듈

ES5에서는 스크립트를 불러와서 코드를 공유했으나, python처럼 import 키워드로 모듈을 불러올 수 있게 되었다.

 

8. 프로미스

프로미스(Promise)를 도입해 비동기 작업을 더 쉽게 처리할 수 있게 되었다. (아직 프로미스에 대해서 잘 몰라서 우선 적어두고, 자세히 알고 싶으면 여기에서 잘 설명하고 있어 보인다.)

 

그리고 ES6 이후에도 중요한 개선이 많이 되었는데, Async/await 같은 비동기 프로그래밍을 더 쉽게 작성할 수 있게 해주는 문법이 ES2017에서 도입된 기능인 등등.

---

정리

이렇게 정리하고 보면 ECMAScript를 따라 JavaScript를 만든 것 같아 보이지만 실제로는 JavaScript가 먼저 만들어졌고, 이것을 표준화 하기위해 ECMAScript를 만든 것. JavaScript도 원래 이름이 뭐더라.. 찾아보니 LiveScript였다고 한다. 별로 안 멋져 보여서 당시 유명한 Java를 따와서 JavaScript로 바꿨다나 뭐라나. 

JavaScript를 기초로 ES를 만들었으나 이제는 JavaScript가 ES를 따르고 있는 것.

 

그러니까 매년 개선되는 ES도 잘 살펴봐야겠고, 버전에 따라 브라우저마다 지원되는 속도가 다른 점도 고려하고... 역사도 길고 알것도 많다.