본문 바로가기

Book/You Don't know JS Yet

[You Don't Know Js Yet] 1장

728x90
👉 챕터의 목표
- 자바스크립트의 명세서를 정의할 때 일어난 담론과 배경 알아보기

1.1 책에 대하여

  • 초보자용 책이 아니다!
  • 내용을 다 이해하면서 넘어가라!

1.2 Javascript 이름의 유래. Javascript는 Java 친구인가?

javascript가 만들어질 때는 당시 유행하던 java를 사용하는 개발자들에게 어필하고, 당시에 가벼운 프로그램이라는 뜻으로 유행하는 script 단어를 합쳐서 java + script 가 된 것이다. 오라클이 소유한 상표가 아닌 TC39에서 지정하고 ECMA 표준 기구에 의해 공식화된 명칭으로 JS를 부르면서 ECMAScript가 된다. 2016년부터는 ECMAScript에 개정 연도를 붙이기 시작했다.

1.3 명세서

TC39는 JS의 공식 명세를 관리하는 위원회다. TC39 위원은 정기 모임에서 명세 세 변경 안건을 투표하고, 합의된 변경 사항을 국제 표준 기구인 ECMA에 제출한다. 명세서에 JS 문법과 작동 방식이 정의된다.

JS는 TC39와 ECMA에 의해 유지되는 공식 표준 딱 하나만이 존재한다. 그러므로 JS에는 따로 버전이 없다.

주요 브라우저, 디바이스 제조사는 하나의 표준에 맞춰서 JS 구현체를 만든다. 그리고 JS 구현체를 만들 때는 웹 브라우저 환경을 가장 중요하게 생각한다.

개발자 도구는 JS 명세를 항상 엄격히 준수하지 않는다. 콘솔에 입력한 코드는 JS 엔진이 .js 파일을 다루는 방식과 다르다. 그러니 콘솔 실행 결과를 너무 믿으면 안된다.

1.4 JS의 다양한 얼굴

JS는 다중 패러다임 언어이며, 절차적, 객체 지향, 함수형 스타일 코드를 모두 작성할 수 있다.

1.5 하위 호환성 상위 호환성

브라우저 버전이 업데이트 되어도, 내가 작성한 예전 JS 코드는 어디에서든 돌아간다. 예전 버전을 호환해주는 뜻으로 하위 호환성이라고 하며, JS는 하위 호환성을 보장한다.

대응되는 개념으로는 상위 호환성이 있다. 만약 JS가 상위 호환성은 보장한다면 내가 작성한 예전 JS 코드는 현 브라우저에서 돌아가지 않을 것이다. 대신 최신 문법에 맞게 작성한 코드가 예전 브라우저에서도 돌아가게 될 것이다.

하지만 JS는 상위 호환성을 보장하지 않기 때문에 최신 문법에 맞게 작성한 코드가 예전 브라우저에서 돌아가지 않는다. 그렇다고 우리가 최신 문법을 쓰지 말아야하는 것은 아니다. 구 엔진과 최신 JS 문법을 호환하기 위해 호환되지 않는 문법은 트랜스파일한다. 트랜스파일은 최신 문법에 맞게 작성된 코드를 예전 버전의 문법에 맞게 변환해주는 것이다. 대표적으로 바벨이 있다.

문법 변환은 바벨을 사용하면 되지만, 만약 API 메서드 때문에 발생했다면, 메서드 정의를 추가해 문제를 해결할 수 있고, 이런 패턴을 폴리필(polyfill)이라고 한다.

1.6 JS는 interpreter 언어인지 compile 언어일까?

사람이 작성한 코드를 컴퓨터가 이해할 수 있는 0과 1로 변환하는 과정을 compilation 또는 interpretation이라고 한다. JS는 컴파일 언어에 가깝다.

 

JS로 만든 코드가 실행되는 과정

  • JS 코드는 바벨이 트랜스파일한다. 이후 웹팩과 같은 번들러를 걸쳐서 번들링된 후 JS 엔진에 결과를 전달한다.
  • JS엔진은 코드를 파싱해서 추상 구문 트리(AST)으로 바꾼다.
  • 엔진은 추상 구문 트리를 이진 바이트 코드로 바꾼다.
  • JS VM이 프로그램을 실행한다.

Wasm은 여러 언어로 작성된 코드를 웹에서 네이티브에 가까운 속도로 실행할 수 있게 해준다. Wasm은 성능 향상을 위해 만들어졌으며, 어셈블리 언어와 유사하다.

1.7 엄격 모드

JS는 2009년 ES5부터 strict mode를 선택적으로 사용할 수 있게 추가했다. strict mode를 사용하면 JS 엔진이 코드를 최적화하고 효율적으로 실행할 수 있도록 가이드를 제공한다. 그래서 엄격 모드를 사용하는 것이 좋다.

참고

https://github.com/tc39

https://nyangnyangworld.tistory.com/23

https://www.youtube.com/watch?v=9sSxdhYGYSM

https://www.youtube.com/watch?v=Dx2tSsd3aFc

https://develsw.tistory.com/148

반응형