(자알쓰) ECMASCript? ES?

작성일 In , , Disqus:

자알쓰란?

자바스크립트 알고 쓰자. (잘 쓰자는 의미도 담겨있다.)
자바스크립트라는 언어 자체는 내 기준에서는 설계 상 미스가 참 많다.
함수 단위의 스코프, 호이스팅, 동적 타입 등등
자바와 같은 깐깐(?)한 언어를 배우고 바라본 자스는 허점 투성이처럼 보였다.
애초에 자바스크립트는 어떠한 프로그램을 만들기 위해서 탄생했다기 보다는
웹 페이지에 입력값에 대한 유효성 검사(데이터가 공란인지 아닌지 등등)와 같은
페이지의 동적 제어가 주된 목적 + 짧은 개발 기간(넷 스케이프 사의 새로운 브라우저에 탑재 예정) 때문에
설계 상에 미스가 있을 수 밖에 없다고 나는 생각된다.
일종의 안전 장치가 없어서 개발자가 일일이 구현해주고, 신경써야 하는 느낌이었다.
그렇다고 해서 자바스크립트를 극혐하거나 그런 것은 아니고 매우 사랑한다.
또한 그 허점을 아는 사람은 허점을 보완해서 요리조리 피해서 잘 쓰겠지만…
잘 모르는 부분들은 잘못 써도 동작이 잘 되기 마련이다.
이는 지금 당장에는 큰 문제가 안 될지 모르겠지만, 추후에 대규모 웹 어플리케이션을 만들거나
직면할 문제로부터 미리 해방시키기 위해 처음부터 좋은 습관을 들여가는 것이 좋다고 생각한다.
그 첫 번째 시리즈는 ECMAScript(이하 ES)를 주제로 진행하겠다.

ES의 탄생 배경

브라우저 전쟁 시절 개발자들은 몸살을 앓았다.
넷 스케이프 사의 자바스크립트가 부러웠는지 사용자 층을 더 끌어내기 위해 MS의 IE 3에도 JScript라는 이름으로 자바스크립트를 탑재하였다.
하지만 둘의 내용이 매우 달랐는지, 같은 기능을 구현하기 위해 개발자가 해야하는 일들이 더 많아졌다.
날이 가면 갈 수록 사용자를 끌어내기 위해 서로 기능을 넣다보니 Javascript와 JScript는 날이 가면 갈 수록 달라지는 경향을 보였다.
이에 대한 심각성을 파악하고, European Computer Manufacturers Association(ECMA, 현 ECMA International)에서는
이러한 자바스크립트에 대한 표준을 내리게 된다.
또한 ECMA에서는 자바스크립트의 표준만 내리는 게 아니라 다른 표준안도 정하기 때문에 그와 구분하기 위해 숫자를 붙였는데 262다.
ECMA262라고 보인다면 아, 자바스크립트 표준 규격이구나라고 생각하면 될 것 같다.

JS? ES?

자바스크립트는 언어이고, ES는 스펙이다.
IE8에서는 ES3 스펙을 준수한 거고, IE9에서는 ES5 스펙을 준수한 거다.
그럼 우리가 여태까지 알고 있던 자바스크립트를 ES라고 불러야할까?
나도 이 문제에 대해서는 아직도 잘 모르겠다.
지금 내가 말할 뉘앙스대로라면 ES는 자바스크립트의 표준을 세운 언어라는 느낌이고,
그냥 자바스크립트하면 비표준 언어라는 느낌이 많이 드는데 나는 아래와 같이 구분해서 부른다.

  • 자바스크립트
    ES5까지의 내용을 나는 그냥 자바스크립트라고 부른다.
    ES3나 5의 특징을 설명해야할 때는 콕 찝어서 ES3다 뭐다 하고 부르지만,
    그렇지 않은 경우에는 그냥 자바스크립트라고 퉁쳐서 부른다.
    또한 많은 사람들이 생각하는 웹 브라우저에서 돌아가는 자바스크립트의 기준은 아래의 범주도 포함하는 것 같다.
    ES + DOM(Document Object Model) + BOM(Browser Object Model)
    DOM은 document.뭐시기~ 요런 애들이고 BOM은 window.머시기~(window를 생략하기도 한다.) 이런 애들이라고 알아두면 될 것 같다.
  • ES
    ES2015(a.k.a ES6)+나 ES3, 5의 특징과 같은 걸 콕 찝어 말할 때 ES라고 부른다.
    왜 ES2015 이상의 내용을 얘기할 때 ES를 쓰냐면 ES5와 ES2015 사이에 너무나 큰 변화가 있었기 때문이다.
    그래서 일반적으로 자바스크립트라고 알고 있는 ES5의 내용으로 사람들이 이해하지 않길 바라는 마음에 ES2015라고 구분해서 부르고 있다.
    또한 위에 자바스크립트에서도 언급 했 듯이 ES에는 DOM과 BOM을 포함하지 않는다는 점을 유념해둬야한다.
    즉 ES2015가 되건 2020이 되건 BOM과 DOM의 내용하고는 전혀 관련이 없다는 점을 알아둬야한다.

ES3 (1999)

대중적으로 많이 아는 그냥 자바스크립트라고 생각하면 될 것 같다.
함수 단위의 스코프, 호이스팅, 모듈화 미지원, 프로토타입, 클로저 등등 자바스크립트의 기본적인 특징들이 들어있다.
대부분의 브라우저에서 지원한다.
IE8까지 크로스브라우징하는 환경이면 ES3를 쓰고 있다고 생각하면 된다.

ES5 (2009)

4는 너무 급변하는 내용이 있었던지 거절되고, 그 후에 점진적인 개선을 하고자 5가 나온 것으로 알고있다.
기본적으로 IE9부터 본격적인 지원을 하지만 es5-shim을 사용하면 하위 버전에서도 특정 기능들을 지원해준다.
5부터는 아래와 같은 내용들이 추가되었다.

  • 배열
    배열과 관련해서 새로운 메소드들이 많이 생겼는데 대표적으로
    forEach, map, filter, reduce, some, every와 같은 순환 메소드들이 생겼다.
    이 메소드들은 개발자가 반복 횟수나 조건을 잘못 입력하는 등의 실수를 줄여주는 효과가 있다.
  • 객체
    일단 눈에 띄는 점은 객체의 프로퍼티에 대한 설정을 할 수 있다는 것이다.
    객체를 생성/수정/복사하는 표준 메소드들(Object.create(), Object.defineProperty(), Object.freeze(), Object.assign() 등등)과 getter/setter 등등
    또한 Object.keys 메소드를 쓰면 for in 메소드도 대체할 수 있게 된다.
  • strict 모드
    문법을 좀 더 깐깐하게 체크하는 모드이다.
    물론 이유없이 그러는 게 아니라 좀 더 코드를 안전하게(에러가 안 나게, 미연에 방지하고자) 등장했다.
    특징은 아래 링크를 통해 확인해보자.
    Strict mode - JavaScript | MDN
  • bind() 메소드
    this를 강제로 bind 시켜주는 메소드이다.
  • 실행 컨텍스트 내에 존재하는 Lexical Environment
  • JSON(JavaScript Object Notation)
    과거 통신을 할 때 데이터를 XML 형태로 많이 주고 받았다.
    하지만 JSON이 좀 더 경량화 돼있는지 요새는 JSON이 대세다.
    JSON은 자바스크립트의 객체 리터럴과 생긴 건 유사한데 다음과 같은 차이점이 존재한다.
  1. 키는 무조건 쌍따옴표(“”)로 감싼 문자열이어야한다.
  2. 주석은 사용할 수 없다.
  3. 프로퍼티로 메소드는 불가능하다.
  4. 프로퍼티에서도 메소드의 사용이 불가능하다.
    통신을 위해 Object를 JSON으로 바꾸는 방법은 JSON.stringify(obj)이고, 자바스크립트 코드에서 사용하기 위해 JSON은 Object로 바꾸는 방법은 JSON.parse(json)이다.

ES2015(ES6)

원래는 ES6였는데 사람들이 끝자리인 6과 2016년을 연관짓는 습성 때문에 2016년에 나온 걸로 착각을 해서인지 ES2015로 바꾼 것 같다.
그냥 갤럭시 노트 6가 7으로 바로 건너뛴 것처럼 ES도 그냥 건너뛰면 어떨까… 싶은 생각이 든다. (개인적으로 연도 다 붙이기 너무 귀찮다.)
ES6 Harmony라고도 불리우는 것 같다.
ES2015 들어서면서 다음과 같은 문제점들이 해결되었다.

이런 다양한 장벽 때문에 사람들이 ES2015를 겁내고 쉽사리 접근하지 못하는 경향도 있는 것 같다.
하지만 공부를 위해서라면 바벨 없이도 크롬에서 돌리면 원활한 공부가 가능하고,
모듈화 부분은 지원하는 브라우저가 없기 때문에 건너 뛰고 공부해야할 것 같다.

ES2015+

현재 ES2016이 작년 6월 경에 발표됐다.
ES2017은 조만간 발표될 예정이다.
ES2015에서 너무 내용이 많이 바뀌어 겁을 먹었다면 여기서부터는 크게 겁 낼 필요 없는 게 그렇게 큰 내용이 변하지 않았다는 점이다.
3에서 5까지 10년, 5에서 6까지 7년이라는 공백 때문에 엄청난 변화들이 있거나 했는데
이제는 매년 표준을 제정하면서 그런 혼란을 줄일 예정인 것 같다.
또한 이후에 나올 ES를 통칭해서 ES.Next라고도 부르는 것 같다.

마치며…

ES3 ~ ES.Next까지 많은 내용을 다룬 것 같은데 너무 ES2015+를 어려워하지 않았으면 좋겠다.
막상 공부해보면 새로운 특성도 있지만, 기존에 사용하던 패턴들을 조금씩 변경하는 내용들이 많고,
오히려 복잡하게 구현하던 것을 간편하게 구현할 수 있게 만들어줘서 더 편한 것 같다.
다음 시간에는 호이스팅(Hoisting)과 함수 단위의 스코프에 대해서 알아보도록 하자.