[JS] ECMAScript

자바스크립트가 나온 이후 인기를 끌자, IE 말고도 다양한 브라우저들이 개별적으로 자바스크립트 문법을 만든다.

그 결과로, 각 브라우저 간 호환성을 위해 개발자들은 많은 고생하게 된다.

 

자바스크립트를 개발한 넷스케이프 사는 ECMA International(국제 표준화 기구)에 표준화를 요청했고,

1997년 7월에 ECMAScript가 완성된다.

 

---

ECMAScript

ECM-262 기술 규격에 따라 표준화된 스크립트 언어이다.

스크립트 언어는 자바스크립트, 액션 스크립트, J 스크립트 등이 있다.

* 스크립트 언어: 컴파일이나 링크 단계 없이 인터프리터에 의해 바로 코드를 실행하는 언어

 

* 컴파일(소스코드를 0,1로 이루어진 기계어로 번역)

* 링크(소스파일, 라이브러리 하나로 병합)

* 인터프리터: 소스코드를 한줄씩 읽어서 그때그때 해석하고 실행하는 프로그램

 

자바스크립트도 액션 스크립트도 J 스크립트도 모두 ECMAScript를 기반으로 둔다.

ECMAScript를 줄여서 "ES + 숫자"라고 칭하기도 한다. ES6부턴 숫자 대신 연도를 붙여 ES2015라고도 한다.

 

---

ES5 VS ES6

개발을 하다보면 ES5와 ES6를 많이 들을 수 있는데 ES6가 많이 언급되는 이유는 아래와 같다.

 

• 새로운 기능과 문법 도입
  • var 대신 let, const 사용
  • 화살표 함수
  • 클래스
  • 객체 리터럴 표현식
  • 비구조화 할당
  • 새로운 메소드 추가
• 비동기 프로그래밍
  • Promise 객체 추가
• IE 지원 X
  • 코드를 Babel과 같은 트랜스파일러를 사용하여 트랜스파일링하거나 polyfill 사용

트랜스 파일링

- ES6로 작성된 문법을 ES5 문법으로 변환

 

Polyfill

- 지원하지 않는 코드를 지원 가능하도록 변환한 코드

 

ex) closet 메서드는 IE 지원 X

아래의 polyfill 코드를 넣으면 closet 메서드 사용 가능

// Element.closest()

if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function (s) {
    var el = this;

    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}