기록이 쌓이면 뭐든 된다

기록이 쌓이면 뭐든 된다

카테고리

태그

You Don’t Know JS Yet - 자바스크립트 개념, 스코프와 클로저

표지

2024.11.05 ~ 작성중

책을 선택한 이유

원래 영어로 된 온라인 버전을 알고 있었다. 하지만 영알못이라 원서를 읽기에는 부담이 커서 번역본이 나오길 기다리고 있었다. 그러다 모던 JavaScript 튜토리얼을 번역하신 이보라님이 이 책의 번역을 맡으신다는 소식을 SNS에서 보게 됐다. 그래서 출간되자마자 구매했는데, 이제야 읽어보게 되었다.

책의 소개처럼 JavaScript를 단순하게 사용하는 것을 넘어서, JavaScript의 본질과 개념들이 '왜' 만들어졌고 '왜' 알아야 하는지 이해하고 싶었다.

You Don’t Know JS Yet이라는 제목은 대부분의 자바스크립트 개발자가 본인이 작성하는 코드가 어떻게 작동하는지 깊게 이해하는 데 시간을 쓰지 않는다는 점을 지적하려고 만들었습니다. - 12p

많은 개발자가 프로그램이 반환하는 결과만 중요시하고 코드를 어떻게 작성했는지, 왜 그렇게 작성했는지, 그리고 코드 작동 방식에 대해서는 중요하게 생각하지 않는다는 사실을 목격했습니다. - 13p

개념

각 장별로 도움이 된 내용을 정리

1장 자바스크립트

  • JavaScript는 ECMAScript 표준을 구현한 다중 패러다임 언어이다. 브라우저, Node.js 등 다양한 환경에서 실행된다.
  • JavaScript는 컴파일 처리되는 언어이다.

저자는 JS를 컴파일 언어에 가깝다고 주장한다. 왜 그렇게 주장할까?

  1. 스크립트/인터프리터 언어와 달리 파싱 단계가 존재
    • JS는 ECMAScript 명세 따라 문법 오류를 찾아냄1. 파싱이 없다면 이런 오류를 사전에 탐지할 수 없음.
    • 파싱 결과로 추상 구문 트리(AST)를 생성
    • 저자는 "파싱을 거치는 언어는 컴파일 언어로 통용된다"고 설명
  2. 컴파일 단계와 JIT
    • JS에서 파싱이 끝난 코드는 컴파일러를 거쳐 최적화된 이진 코드로 변환되어 실행 됨.
    • 또 JS 엔진은 파싱 이후 생성된 코드를 다양한 방법으로 실행 전에 그때그때 JIT 처리 및 최적화함.
  3. 단계 정리
JS엔진이 전달 받은 코드를 파싱해 AST를 생성
|
엔진은 AST를 이진 바이트 코드로 변환 + JIT 최적화 함께 진행 
|
JS 가상 머신이 프로그램 실행

이에 대해서 나는 MDN의 설명대로 '인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어'로 이해하고 있다.

2장. 자바스크립트 조망하기

  • JavaScript에서는 파일 각각이 별도의 프로그램이다.

    • 한 파일의 오류가 다른 파일 실행에 영향을 주지않는다.
    • 각 파일이 독립적인 스코프를 가진다. 여러 .js 파일은 전역 스코프를 통해서만 상호작용할 수 있다.
    • ES6의 모듈이든 단일 파일이든 프로그램(파일)과 협력해 프로그램 전체를 작동 시키는 고유한 프로그램이라고 생각해야 한다.

  • 값의 타입 중 주의할 것

typeof null; // "object"
typeof [1, 2, 3]; // "object"
  • 동등 연산자 ==는 일치 연산자 ===는 피연산자가 같은 타입이라면 동일하게 작동한다. 저자는 == 연산자는 강제 변환을 먼저 실행하므로 강제 변환 동등 비교 연산자로 설명하는게 적합하다고 생각한다.
  • 등호가 있는 >, <, <=, >=도 타입 강제 변환이 먼저 일어난다.
  • ES 모듈을 인스턴스화하지 않아도 import 키워드를 사용해 가져오기만 한다면 단일 인스턴스처럼 사용할 수 있다. 처음 모듈을 가져온 순간 인스턴스가 생기고, 동일한 모듈을 다른 곳에서 import할 때는 이미 생성된 모듈의 참조만 가져온다.

3장 자바스크립트 뿌리 파헤치기

이터레이터션
Iterator객체.next() → { value: 현재값, done: 완료여부 } 
// done이 true라면 반복 작업이 중단

이터레이터 소비 프로토콜은 순회 가능한 값인 이터러블을 소비하는 기술적인 방법이라고 정의할 수 있습니다. 이터레이터 소비 프로토콜은 이터러블을 사용해 이터레이터 인스턴스를 생성하고, 생성한 이터레이터 인스턴스를 소비해 연산을 마무리합니다. - 86p

클로저

클로저란, 함수가 정의된 스코프가 아닌 다른 스코프에서 함수가 실행 되더라도, 스코프 밖에 있는 변수를 기억하고 이 외부 변수에 계속 접근할 수 있는 경우를 의미합니다. - 89p

this 키워드
  • 함수는 정의되는 시점에 클로저를 통해서 함수를 에워싸는 스코프에 부착됩니다.
  • 스코프는 정적static이며 함수를 정의하는 순간, 해당 스코프에서 사용할 수 있는 한정된 변수 집합을 포함합니다. - 93p

반면 함수의 실행 컨텍스트는 동적dynamic입니다. 실행 컨텍스트는 함수를 정의한 위치나 함수를 호출하는 위치와 상관없이 함수의 호출 방식에 따라 결정됩니다. 즉, this는 함수의 정의에 종속되어 결정되는 변치 않는 특성이 아니라, 함수를 호출할 때마다 결정되는 동적인 특성입니다. - 93p

프로토타입

프로토타입은 두 객체를 연결하는 연결 장치입니다. - 95p

Footnotes

  1. 중복된 매개변수명 같이 정적으로 탐지가 가능한 오류를 초기 오류라고 부르고, 가능하면 프로그램 실행 전에 초기 오류를 찾아 낼 수 있어야 한다고 언급. ↩

댓글