1. ES의 등장배경
ES는 ECMA Script의 약자로 Java Script의 표준 규격을 의미한다. 1990년대 넷스케이프에서 개발하여 출시한 JavaScript는 웹 페이지의 동작을 향상시키는 언어로서 당시 선풍적인 인기를 끌었는데 그것을 본 MicroSoft에서도 적당히 호환되는 Jscript라는 언어를 개발하여 Internet Explorer에 탑재하게 된다. 하지만 이름은 비슷했지만 둘의 알맹이는 너무 제각각이라 개발자들이 같은 기능을 구현하더라도 해야 할일과 시간이 늘어나게 되었고 결국 넷스케이프에서 JavaScript를 ECMA(European Computer Manufactures Association)기구에 제출하여 표준으로 삼게 되었고 이후 시대 흐름에 맞게 발전시켜 지금까지 이어져 오고 있다.
2. ES 버전별 간략한 특징
ES는 1997년 6월 초판을 발행을 시작으로 총 12판까지 발행 되었다. 그 중 중요한 내용만 간단하게 추려보겠다.
-
ES1~3
- JavaScript의 가장 기본이 되는 기능(hoisting, prototype, scope)만 존재하던 버전 대
-
ES4
- ES4를 준비하던 중 내부적으로 크게 2개의 의견으로 나뉘어 방향을 정하지 못하였는데 결국 타협점을 찾아 ES3.1은 ES5가 되었고, ES4가 될 예정이었던 사양은 ES6에 반영되게 되었다. 이에 따라 ES4는 반려됐다. 또한 이 시기쯤에 JS를 활용해 웹 애플리케이션을 동적으로 제작 가능하게 되어 jQuery, Dojo, Prototype.js 및 Ajax가 만들어졌다.
- ES4를 준비하던 중 내부적으로 크게 2개의 의견으로 나뉘어 방향을 정하지 못하였는데 결국 타협점을 찾아 ES3.1은 ES5가 되었고, ES4가 될 예정이었던 사양은 ES6에 반영되게 되었다. 이에 따라 ES4는 반려됐다. 또한 이 시기쯤에 JS를 활용해 웹 애플리케이션을 동적으로 제작 가능하게 되어 jQuery, Dojo, Prototype.js 및 Ajax가 만들어졌다.
-
ES5
- JSON 지원 및 Array에 forEach, map, filter, reduce, some, every등의 메소드가 추가 되었고 Object에 대한 getter 및 setter를 지원하게 되었다. 또한 엄격 모드가 추가되었는데 엄격 모드가 추가 됨으로서 기존에 너무 자유롭던 코드에서 일부 코드를 사용하지 못하게 막고 동시에 더 많은 예외를 제공하여 프로그래머들이 더욱 안전한 코드를 작성할 수 있는 환경이 마련되었다.
-
ES6
- 가장 큰 변화는 기존의 function-level scope가 아닌 block-level scope를 지원하는 let과 const가 추가되었다. 기존에는 상수형 키워드가 없어 CONST_TEST와 같이 대문자로 상수임을 표시했다면, ES 6부턴 const 키워드를 통해 값의 변경을 통제하게 되었다.
3. ES5와 ES6의 차이
-
화살표 함수(Arrow Function)가 추가되어 함수를 간결하게 나타낼 수 있게 되었다.
-
block-level-scope를 가지며 재할당이 가능한 let, const 키워드가 추가 되었다.
-
원래는 인자가 없거나 undefined인 경우 들어 갈 기본 값을 설정해 놓았어야 됬는데 기본 매개 변수(Default parameter) 추가로 인해 지정한 기본 값을 인자로 전달할 수 있게 되었다.
-
Template literal 추가로 인해 ``(back tic)을 사용하여 여러 라인의 문자열도 쉽게 사용이 가능해졌다. (${name} 표시를 통해 JavaScript 표현식을 삽입 가능하다.)
-
Multi-line string 추가로 ``(back tic)을 사용하여 여러 줄의 문자열을 처리하기 수월해졌다.
-
String Method(includes/포함되어 있는 지, startsWith/시작되는지, endWith/끝나는 지)의 추가 결과 값은 true/false로 리턴되며 검사 로직 수행 가능해 졌다.
-
객체 정의 방식의 개선 되었다. 속성과 값이 같으면 1개만 기입이 가능하며 속성에 함수를 정의 할 때 function을 생략 가능하게 되었다.
-
Class의 추가로 객체 지향 프로그래밍이 가능해 졌고 ES5에서 보다 더 간결하고 편하게 코드를작성 할 수 있게 되었다.
-
Module의 추가로 코드의 재사용이 간편해 졌다. Moudle을 사용하면 하나의 파일에 다른 파일의 코드를 불러 올 수 있다. import, from, export, default 등의 전용 키워드를 사용해 가독성을 높였고 비동기 방식으로 작동해 성능과 메모리 부분에서 유리하다는 장점이 있다.
-
구조 분해 할당(Destructuring Assignment)의 추가로 배열이나 객체의 요소를 해체하여 별개의 변수로 추출 할 수 있게 되었다.
-
비동기 처리에 사용되는 객체인 Promise가 추가 되었다.
4. 참조
- https://stackoverflow.com/questions/4269150/what-is-ecmascript
- https://medium.com/sjk5766/ecma-script-es-%EC%A0%95%EB%A6%AC%EC%99%80-%EB%B2%84%EC%A0%84%EB%B3%84-%ED%8A%B9%EC%A7%95-77715f696dcb
https://wangchunsik.tistory.com/13 - https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
