WIL: 고생이 많았던 언어 자바스크립트. ECMA Script란? ES5와 ES6의 차이

제목의 내용들을 간단히 정리해 보자. 일단 ECMA Script는 자바스크립트가 따르고 있는 표준안이다. Ecma International 이라는 정보통신 시스템 표준화 단체가 만든 ECMA-262 표준의 내용이 바로 ECMA Script 이다.

ECMA Script는 브라우저의 엔진을 통해 동작하는 script 언어를 만들때, 변수는 이렇게 만들고, 함수는 이렇게 만들고 하는 문법 등을 규정한 문서이다. 

그 언어 표준은 1997년 6월 초판 공개에 이어 2022년 6월 ECMA Script 2022에 이르기까지 발전하고 있다. 

역대 ECMA script 변천사

ECMA Script는 현재의 자바스크립트와는 혼연일체가 된 표준이라고 할 수 있다. 자바스크립트를 만든 Netscape가  Ecma international에 자바스크립트를 언어체계를 제출해서 첫번째 ECMA Script가 1997년 탄생했기 때문이다.

 

왜 제출했을까? 마이크로소프트를 견제하기 위해서였다고 한다. 

당시는 두 가지 브라우저가 시장에서 경쟁하고 있었다. 넷스케이프사의 네비게이터(브라우저)와 마이크로소프트에서 네비게이터(브라우저)를 reverse engineering 해서 만든 Jscript와 호환되는 Internet Explorer 이다. 이런 상황에서 넷스케이프사는 자사의 자바스크립트로 언어 표준을 만들어서 Jscript를 비표준 언어로 만들어 버리고 싶었던 것이다. 

물론 언어를 표준화해서 인터넷 사용자들을 편하게 해주려는 목적도 있었을 것이다. 당시는 웹페이지를 만드는 언어가 서로 조금씩 다르다보니 어떤 웹페이지는 넷스케이프 네비게이터를 써야 잘 보이고, 어떤 페이지는 익스플로러를 써야 잘 보이는 불편함이 있었다. 이런 불편을 해소할 수 있는 방법이 언어의 표준화였던 것이다.

 

ECMA Script 이렇게 탄생했고 가장 중요한 변화들은 ES6 이라고도 불리는 ES2015 버전에서 일어났다.  class, arrow function, let , const, 템플릿 리터럴의 등장, 모듈기능 개선, this의 동작방식 변화 등이 있다. 

 

여기서는 필자의 개인적 관심으로 this의 동작방식 변화만 다뤄본다.

주요 변경사항은 객체 안에 선언된 함수에 this 가 있으면 ES6부터는 this는 객체 자체를 가리키게 된 점이다. ES5 까지는 그런 this는 윈도우를 가리켰다. 고기를 잡으려는데 어부가 망망대해를 바라본다고나 할까.

let thisTest = {
    name : "김현진",   
    age : 25,
    info() {
         console.log(this)
         console.log(this.name , this.age)

         innerInfo = () => {
             console.log(this)
             return this.name + ":" + this.age
         }
         return innerInfo()
    }
}
console.log(thisTest.info())

ES6부터 콘솔창에는 이렇게 뜬다.

{ name: '김현진', age: 25, info: [Function: info] }
김현진 25
{ name: '김현진', age: 25, info: [Function: info] }
김현진:25

아무튼 자바스크립트는 이제 상당히 정착된 언어라고 보아야 할 것이다. 대부분의 브라우저들이 이크마스크립트로 규정된 자바스크립트로 만들어지고 있고, 브라우저들은 ECMA 의 표준사항을 따라서 개선되고 있다.