모던 JavaScript의 정의를 ECMAScript 주요 개정안, Google Chrome Dev Summit 2020 스피치 내용을 토대로 소개합니다.
개요
모던 자바스크립트(JavaScript) 튜토리얼 프로젝트를 진행하다보니 ‘모던’자바스크립트가 그냥 자바스크립트와 무엇이 다른지에 대한 질문을 종종 받는다. 이에 대한 리서치 결과를 공유하고자 한다.
시대에 따라 변모하는 정의
모던 자바스크립트에 대한 정의는 시대에 따라 변모한다. 2004년엔 AJAX를, 2006년엔 jQuery를 사용하는 것이 모던한 방식으로 자바스크립트를 다루는 것이라 정의되었을 것이다.
이 글에선 개발자들이 작성한 다양한 글, 출간 도서, 온라인 강의, 명세서 배포 시기 등을 토대로 2020년 기준 모던 자바스크립트에 대한 정의를 내려보도록 하겠다.
정의
모던 자바스크립트는 2015년에 나온 ECMAScript 2015(6판)와 그 이후의 판을 구현한 자바스크립트이다.
ES6와 그 이후의 ECMAScript 주요 개정안
ECMA-262 5판은 2009년 12월에 출판되었다. 그 이후 수년간 새로운 판이 나오지 않다가 2015년에 6판이 나왔다. 5판과 6판 사이의 갭이 아주 크고, 6판 이후로 많은 변화가 있었기 때문에 많은 개발자들이 비공식적으로 ES6와 그 이후의 판을 구현한 자바스크립트를 ‘모던 자바스크립트’라고 부른다.
지금은 다들 익숙하게 사용하고 있는 class, 모듈, 제너레이터, 화살표 함수, let과 const 키워드 등의 굵직한 문법들은 ES6에서 처음 정의되었다.
각 판에서 추가된 주요 문법을 요약하면 다음과 같다.
Chrome Dev Summit 2020에서 정의한 모던 자바스크립트
위 내용은 2020 Google Chrome Dev Summit에서 모던 자바스크립트가 무엇인지에 대한 정의를 내리기 전에 작성되었다.
TC39 위원회는 아니지만, 신뢰할만한 출처인 Google의 Chrome Dev Summit 발표자료에서 모던 자바스크립트를 명확하게 정의했기에 내용을 업데이트한다.
정의
모던 자바스크립트는 모든 모던 브라우저에서 지원하는 문법으로 작성된 자바스크립트 코드를 의미한다.
여기서 모던 브라우저는 시장 점유율 90%를 차지하는 Chrome, Firefox, Safari, Edge와 5%의 점유율을 가진 삼성 브라우저, 오페라를 포함한다.
참고로 영상이 발표된 시점을 기준으로 95%의 브라우저가 ES2017을 지원한다고 한다.
모던한 문법
영상에 따르면 Class(ES2015)는 95.5%의 브라우저가 지원하고, 화살표 함수(ES2015)는 96%, 제너레이터(ES2015)는 96%의 브라우저가 지원한다고 한다.
재밌는 건 const, let같이 호이스팅 이슈를 방지해주는 Block Scoping(ES2015)은 명목상 97%의 브라우저가 지원하긴 하지만, IE11과 Opera Mini 등 일부 브라우저에서 에러를 발생시키므로 실질 지원율은 95%라고 하며 97이라는 숫자에 붉은색을 칠해놓은 부분이다.
이 외에도 구조분해할당(ES2015)은 94%, 나머지 매개변수(Rest Parameter)와 전개 문법(Spread Syntax)(ES2015)은 94%, 객체에서 쓰이는 단축 구문(Object Shorthand)(ES2015)은 95%의 브라우저가 지원하며, 비교적 근래에 등장한 async/await(ES2017) 역시 95%의 브라우저가 지원한다고 한다.
이 글은 모던 자바스크립트란 무엇인가에 대한 글이므로, 영상 뒷부분을 추가로 설명하진 않을 것이다.
하지만 개발자가 작성한 코드를 현존하는 모든 브라우저에서 돌아가도록 하기 위해 트랜스파일하고 압축하는 과정에서 어떤 일이 일어나는지, 레거시 자바스크립트가 자연 환경에 어떤 악영향을 주는지, 그럼에도 불구하고 npm에선 왜 레거시 자바스크립트가 여전히 디폴트인지 등의 내용이 영상 중반부터 소개되니 꼭 한번 시청해보길 바란다(이런 불상사를 해결해주는 방법도 물론 소개되어있다😃).
마무리는 IE11은 이제 손절하는게 좋다는 무언의 메시지를 담은 클립으로 하겠다😂😂😂.
