JavaScript의 ES
ES는 ECMAScript의 약자로 ECMA International이라는 표준화 기구에 의하여 표준화된 스크립트 언어를 말한다.
표준화, 규격화된 스크립트 언어가 ECMA Script이고, 이의 약자가 ES이며 ES뒤에 붙는 숫자들은 버전, 사양 정도라고 이해하면 쉽다.
💻ES 등장배경
Javascript는 넷스케이프에서 개발하였는데,이에 대항하기 위해 MS에서는 JScript를 만들었다. 이처럼 브라우저 마다 스크립트 언어가 다르게 때문에 서로 호환이 되지 않고 파편화가 생기기 시작했다. 파편화는 간단히 말해서 똑같은 코드인데 어떤 브라우저에서는 제대로 실행되고 어떤 브라우저에서는 에러가는 현상을 의미한다.
이런 파편화를 막으려면 표준을 만드는 것이 중요해졌고, 넷스케이프는 96년 11월에 브라우저에서 돌아가는 스크립트 언어를 표준화하기 위해서 ECMA International이라는 국제 표준화 기구에 자바스크립트 기술 규격 제정을 요청하게 되고 ECMA262라는 표준 규격이 생기게 된다.
💻ES 종류
💻ES5/ES6 문법차이
-
템플릿 리터럴
ES6부터 새롭게 등장한 템플릿 리터럴. 덕분에 문자열 표현이 훨씬 간단해졌다.
템플릿 리터럴이란 작은 따옴표나 큰 따옴표 대신 백틱(`)으로 문자열을 감싸 표현하는 기능을 말한다.
템플릿 리터럴을 사용하면 플레이스 홀더(${variable})를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다. -
화살표 함수
ES6부터 새롭게 등장한 화살표 함수로 함수 선언법이 좀 더 간단해졌다.
-
this의 다른동작
ES5: ES5같은 경우 객체 내에 있는 메소드를 실행 시 this는 메소드가 선언된 해당 객체를 가리킨다.
하지만 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고 있기 때문에 함수 안에서 this.name, this.age 를 하여도 아무 값이 나오지 않는다.
ES6: ES6에서의 this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.
생성자 함수의 인스턴스의 경우, this는 인스턴스를 가리킨다.
화살표 함수를 쓰면 함수가 선언된 스코프에 자동 바인딩이 된다. -
변수선언
ES5: ES5에선 var 밖에 존재하지 않았다. var 는 변수를 선언할 때 사용되는 키워드로,재할당과 재선언에 굉장히 자유롭다.
ES6: ES6부터 let, const가 추가되었다.
let은 한번 선언된 변수에 동일한 이름으로 선언할 수 없다.
하지만, 값은 재할당 할 수 있다.
const는 한번 초기화된 변수에 재할당/재선언할 수 없다.
그리고, let, const는 블록 스코프 또는 Function 스코프 내부에 선언되면 해당 스코프 밖에서 안에 있는 변수를 참조할 수 없다.
쉽게 설명하자면, 중괄호로 묶인 부분 내부에 선언된 let, const를 중괄호 외부에서 참조할 수 없다는 것이다. -
모듈()
ES5 이전에는 각 기능별로 JS 파일을 나누고 개발 및 관리하는 것이 불가능했다.
ES5: ES5 에선 require 를 통해 모듈화를 할 수 있었다.
ES6: ES6 부터는 import/export 로 모듈을 관리할 수 있다.
모듈은 실현가능한 특정 프로그램의 그룹니다.
그리고 이것은 다른 파일의 변수, 함수를 참조한다.
클래스와 같은 모듈이 로딩될 때, import와 export를 이용해 사용될 수 있다. -
클래스
ES5: ES5에선 class라는 키워드는 없었지만 프로토타입을 통해 실현 가능했다.
ES6: ES6에서는 class 키워드를 사용해서 선언할 수 있다.
💻왜 ES6(ECMA2015)?
ES6가 새로운 언어 기능이 포함된 주요 업데이트였으며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트였기 때문이다. 그렇기 때문에 ES6에서는 ES5 이하 명세에서 문제가 되었던 부분들이 해결되었고, 이는 가독성 및 유지보수성 향상으로 이어졌다. React나 Vue와 같은 유명 라이브러리들도 이에 맞춰 개발 환경을 ES6로 바꾸게 되었다.
