7월 3주차 WIL - JavaScript의 ES란? ES5/ES6 문법 차이

JavaScript의 ES란?

개념

ECMA스크립트(ECMAScript, 또는 ES)란, 

Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 

자바스크립트를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다.

역사

1996년 3월, 넷스케이프에서 넷스케이프 네비게이터 2.0을 출시하면서 자바스크립트를 지원하기 시작했다.

웹 페이지 동작을 향상시키는 언어로서 자바스크립트의 성공은, 마이크로소프트가 이와 "적당히" 호환되는 J스크립트를 개발하는 계기가 되었다. J스크립트는 1996년 8월, 인터넷 익스플로러 3.0에 포함되어 출시되었다.

넷스케이프는 표준화를 위해 자바스크립트 기술 규격을 Ecma 인터내셔널에 제출하였고, 이 규격에 대한 작업은 ECMA-262의 이름으로 1996년 11월부터 시작됐다. ECMA-262의 초판은 ECMA 일반 회의에서 1997년 6월 채택됐다.

ECMA스크립트는 ECMA-262에 의해 표준화된 언어의 이름이다. 자바스크립트와 J스크립트는 모두 ECMA스크립트와의 호환을 목표로 하면서, ECMA 규격에 포함되지 않는 확장 기능을 제공한다.

 

판	출판일	이전 판과의 차이점
1	1997년 6월	초판
2	1998년 6월	ISO/IEC 16262 국제 표준과 완전히 동일한 규격을 적용하기 위한 변경
3	1999년 12월	강력한 정규 표현식, 향상된 문자열 처리, 새로운 제어문 , try/catch 예외 처리, 엄격한 오류 정의, 수치형 출력의 포매팅 등
4	버려짐	4번째 판은 언어에 얽힌 정치적 차이로 인해 버려졌다. 이 판을 작업 가운데 일부는 5번째 판을 이루는 기본이 되고 다른 일부는 ECMA스크립트의 기본을 이루고 있다.
5	2009년 12월	더 철저한 오류 검사를 제공하고 오류 경향이 있는 구조를 피하는 하부집합인 "strict mode"를 추가한다. 3번째 판의 규격에 있던 수많은 애매한 부분을 명확히 한다.
5.1	2011년 6월	ECMA스크립트 표준의 제 5.1판은 ISO/IEC 16262:2011 국제 표준 제3판과 함께 한다.
6	2015년 6월	ECMAScript 2015 (ES2015) 6판에는 클래스와 모듈 같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가되었다. 하지만 이러한 문법의 의미는 5판의 strict mode와 같은 방법으로 정의된다. 이 판은 "ECMAScript Harmony" 혹은 "ES6 Harmony" 등으로 불리기도 한다.
7	2016년 6월	ECMAScript 2016 (ES2016) 제곱연산자 추가, Array.prototype.includes
8	2017년 6월	ECMAScript 2017 (ES2017) 함수 표현식의 인자에서 trailing commas 허용, Object values/entries 메소드, async/await 등.
9	2018년 6월	ECMAScript 2018 (ES2018) Promise.finally, Async iteration, object rest/spread property 등.
10	2019년 6월	ECMAScript 2019 (ES2019) Object.fromEntries, flat, flatMap, Symbol.description, optional catch 등.

 

ES5/ES6 문법 차이

ES5(2009)

1. 배열과 관련해서 forEach, map, filter, reduce, some, every와 같은 새로운 메소드들이 생김. (개발자가 반복 횟수나 조건을 잘못 입력하는 등의 실수를 줄여줄 수 있음)
2. object에 대한 getter/setter 지원.
3. 자바스크립트 strict 모드 지원(더 세심한 문법 검사가 가능)
4. JSON 지원(과거에는 XML을 사용하다가, json이 뜨면서 지원함)
5. bind() 메소드가 생겼습니다. (this를 강제로 bind 시켜주는 메소드)

ES6(2015)

1. let, const 키워드 추가(기존의 변수는 함수 scope를 가진 var 키워드를 선언함)
2. arrow 문법 지원(익숙하면 편하고 간편해진 코드를 작성할 수 있음, this를 바인딩하지 않음)
   • // ES5
     var x = function(x, y) {
        return x * y;
     }
     
     // ES6
     const x = (x, y) => { return x * y }; // return 함수가 단일 명령문인 경우에만 키워드와 중괄호 생략 가능
     const x = (x, y) => x * y;
3. iterator/generator 추가
4. module import / export 추가
5. Promise 도입(Callback Hell을 해결해줄 기법이 추가됨)
6. Default, Rest 파라미터
7. 해체 할당, Spread 연산자
8. 템플릿 리터럴
9. 호이스팅이 사라진 것 같은 효과
10. 함수 단위 스코프에서 블록 단위 스코프로 변경

 

자바스크립트는 ES5에서 ES6으로 넘어갔을 때 가장 큰 변화를 맞이하였다

현재 우리가 쓰고 있는 자바스크립트는 ES6에서 조금씩 변화한 버전이라고 생각하면 된다

 

---

이번 주 공부하면서 느낀 점

자바스크립트는 내가 현재 배우고 있는 리액트의 근간이다.

리액트를 배우기 위해서는 자바스크립트 문법을 잘 이해하고 있어야 한다.

나는 현재 리액트를 배우면서도 잘 모르는 부분을 찾아보면 다 자바스크립트 문법에서 나온 것이다.

그러니 리액트 배우기 전에 자바스크립트를 알아두면 좋다.

자바스크립트 문법은 너무나도 양이 방대하기 때문에 하루아침에 안다는 것은 불가능하다.

꾸준히 자바스크립트 문법을 공부해야한다. 

이번 주에 자바스크립트와 리액트를 공부해봤는데,

프론트엔드가 되기 위해서 제일 필요한 공부가 자바스크립트에 대한 이해인 것 같다.

프론트엔드 개발자와 자바스크립트는 떼려야 뗄 수 없는 사이임에 틀림없다...

난 아직 갈 길이 멀다ㅋㅋㅋㅋㅋㅋㅋ

오늘까지 자바스크립트 강의를 마저 다 볼 예정이다!!

리액트를 먼저 시작해버려서 늦었지만 자바스크립트 공부를 이번주라도 마무리 지어야겠다!!

 

 

---

<출처>

https://www.w3schools.com/js/js_es6.asp

https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

https://usefultoknow.tistory.com/entry/ECMA-SCript%EB%9E%80-ES%EB%9E%80