JavaScript의 ES란? (ES5와 ES6의 차이점에 대하여)

JavaScript의 역사

ES에 대해서 알려면 JavaScript의 역사를 좀 알아야한다. 자바스크립트는 본래 넷스케이프의 브렌던 아이크라는 사람이 1995년 Mocha라는 이름으로 단 10일만에 만들었다. 그러다가 LiveScript라는 이름으로 개명을 했다가 이후 넷스케이프가 썬 마이크로시스템즈(Java를 개발한 회사!)와 비슷한 이름을 사용하겠다는 마케팅 조약을 맺고 라이브스크립트에 자바스크립트라는 이름을 붙였다. 그리고 1997년 자바스크립트가 유명해지기 시작하자 유럽컴퓨터제조협회(ECMA)는 ECMAScript라는 인터넷 상의 다양한 스크립트 언어를 하나로 묶기 위해 표준안을 제시했다. 그리고 언어를 발전시키면서 계속 업데이트되고 있다.

 

ECMAScript : ES

ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 다른 언어에 대한 내용도 있지만, 기본적으로는 자바스크립트를 표준화하기 위해 만들어졌다고 할 수 있다. 1997년에 초판이 나오고 1~2년에 한번씩 업데이트 되다가 2009년도에 자바스크립트가 많은 곳에서 널리 사용되자 "자바스크립트도 시대의 흐름에 맞춰 나아가야 한다"는 의견이 나오면서 문법이 급속도로 발전하게 되었다. 그러면서 6 버전부터 발표 연도를 사용해서 'ECMAScript 2015'라고 버전을 부르기도 한다.

그러니까 결국 ES란, 자바스크립트 문법의 버전을 부르는 말이고, ES5는 제5판, ES6는 제6판이라는 것이다.

 

ES5와 ES6

ECMA 버전과 발표시기

ECMAScript의 버전 발표시기를 잠시 살펴보면, 1997년부터 1999년까지 1년에 한번씩 발표되다가 거의 10년만에 2009년에 5판이 나온 것을 볼 수 있다. (사실 중간에 나온 흔적은 있는데 언어에 얽힌 정치적 차이로 인해 버려졌다고 한다.) 그리고 2011년에 5.1판이 나오고 2015년(4년만에) 6판이 나왔다.

5판이 나오고 6판이 오랜만에 나오면서 많은 문법의 변화가 생겼다. 대표적으로 클래스와 모듈에 대한 문법이 추가되었고, 내가 좋아하는 화살표 함수도 이때 추가되었다!! 지금의 자바스크립트는 ES6를 기준으로 업데이트 되고 있으며, 리액트와 같은 다른 프레임워크들과 신기술들도 모두 ES6의 문법을 안다는 가정하에 만들어지고 있어서 옛날 문법을 알고서는 이런 것들을 배우기가 힘들다. (ES6문법인지, 프레임워크의 문법인지 알 수가 없어짐..)

그리고 추가로 내가 자주 참고하는 MDN Web Docs도 ECMA의 문서를 기반으로 하고 있기 때문에 함수나 문법을 참고하기에 너무 좋다!

 

 

참고자료 :  책⎡혼자 공부하는 자바 스크립트⎦, MDN Web Docs

 

ES5와 ES6의 차이점

모든 걸 다 소개 하기보다 내가 공부하면서 배우고, 지금 완벽히 이해한 것을 위주로 적어보겠다!

새로운 ES6 구문

1. 선언 키워드(let, const)가 추가되었다
   - 이전의 var 키워드는 재선언이 가능하다는 위험성이 있었다.
2. 매개변수의 초깃값과 객체의 속성을 정의하는 시점에 쉽게 정의할 수 있게 되었다.
   - 원래는 함수의 매개변수의 초깃값은 undefined가 false인 것을 이용하여 논리합(||;or)를 사용해야 했다. 하지만, 이제는 매개변수에 바로 const hi = (a='hello') => {}로 초기값을 줄 수 있게 되었다.
   - 객체의 속성도 속성명 : '초기값' 으로 선언 가능
3. 가변 매개함수(나머지 매개함수)를 구현할 때 ...연산자를 사용하게 되었다.
   - 원래는 arguments라는 변수를 활용했었다.
4. 전개 연산자 ...을 사용할 수 있게 되었다.
   - 원래는 apply() 함수를 사용해야 했다.
5. 객체와 모듈에 관한 문법이 추가 되었다.
6. for...of 문법이 추가 되었다.
   - for...in 반복문에 안정성이 추가된 문법!
7. 8진수와 2진수를 빠르게 10진수로 변경해서 볼 수 있게 되었다.
   - 8진수는 범위를 벗어난 숫자가 포함되어 있으면 10진수로 표시했고, strict 모드를 사용할 수 없었다(오류남).
   - ES6에서는 범위를 벗어난 숫자가 사용되면 SyntaxError가 발생되고, 올바르게 사용시 console에 찍으면 10진수로 바뀌어 나온다.
   - 2진수는 문자형 형식을 제공하지 않아 parseInt()함수를 사용해야했는데, ES6에서 문자형 형식을 제공해서 변수에 바로 정의할 수 있게 되었다.
   - 마찬가지로 콘솔에 찍으면 10진수로 바뀌어서 나온다.
8. 템플릿 리터럴 추가!!(내가 사랑하는!)
   - 백틱문자로 문자를 감싸고 변수나 코드가 들어갈 부분에만 ${}를 사용하는 문법

 

구조 분해 할당

1. 배열의 요소를 변수 여러개에 한번에 할당할 수 있게 되었다!
   - 이전에는 하나하나 할당해줬어야 함...
2. 객체의 속성의 기본값을 할당할 수 있게 되었고, 객체의 속성을 변수에 할당할 수 있게 되었다.

 

클래스

1. Class를 선언할 수 있게 되었다.
2. Getter/Setter 키워드를 사용할 수 있게 되었다.
3. Static 매서드를 사용할 수 있게 되었다. 
4. extends와 super 키워드로 상속을 사용할 수 있게 되었다.

 

함수

• 화살표 함수가 생겼다!!
• set 함수가 추가되고 집합 유형이 추가!

 

기호

• symbol이라는 새로운 자료형이 생겼다.

 

배열확장

• map, from, find, findIndex 메소드 추가

 

문자열 확장

• srartsWith, endsWith, include 메소드 추가
  - srartsWith : 매개변수의 문자열로 시작하는지 확인
  - endsWith : 매개변수의 문자열로 끝나는지 확인
  - include : 매개변수의 문자열을 포함하고 있는지 확인

참고 자료 : https://www.javascripttutorial.net/es6/