[JavaScript]자바스크립트의 동작 원리

자바스크립트 런타임

자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램입니다.

모든 브라우저에는 자바스크립트 엔진이 있습니다.

예를 들어 구글의 V8 엔진이 자바스크립트 엔진의 한 종류입니다.

 

자바스크립트 엔진은 콜 스택과 힙을 가지고 있습니다.

콜 스택(call stack)은 실행컨텍스트를 이용하여 코드를 실행하는 곳이고 힙(heap)은 개체가 저장되는 곳입니다.

 

자바스크립트는 interpreted 언어라 compiled 언어에 비해 속도가 느린 편입니다.

interpreted 언어는 소스 코드를 한 줄씩 실행 시키는 언어입니다.

모던 자바스크립트에서는 Just-in-time compilation 방법을 사용합니다.

소스코드를 기계어로 바꾼 후 실행하여 성능을 개선했습니다.

 

 

자바스크립트 런타임은 자바스크립트를 사용하기 위한 모든 것을 담은 큰 상자라 생각할 수 있습니다.

런타임에는 자바스크립트 엔진과 web API 액세스 권한, 콜백 큐가 필요합니다.

web API는 DOM, Fetch API 등이 있고 callback Queue에는 onClick, timer, data 등이 있습니다.

이벤트 루프는 콜백 큐에 있는 것을 콜 스택에 넣어서 실행시키는 역할을 합니다.

 

콜스택과 실행 환경

실행 컨텍스트 내부에는 변수 환경과 scope chain, this keyword가 있습니다.

변수 환경에는 모든 변수와 함수, 인수가 포함됩니다.

화살표 함수의 경우에는 인수나 this를 받아서는 안 됩니다.

 

코드가 실행되면 상위레벨코드가 실행되고 글로벌 환경에 있는 컨텍스트가 콜스택에서 실행됩니다.

만약 정의된 변수나 함수 안에 다른 코드가 있다면 해당하는 실행 환경이 콜 스택에 들어갔다가

해당하는 코드의 실행이 끝나면 다시 콜 스택 밖으로 나가게 됩니다.

모든 프로그램이 완료되었을 때 글로벌 환경이 콜 스택에서 나가게 됩니다.

 

Scope와 Scope chain

Scoping은 프로그램의 변수의 조직과 접근 방법입니다.

lexical scoping은 코드에서 함수와 블록의 배치에 따라 달라진다는 뜻입니다.

Scope는 특정 변수가 선언된 공간이나 환경을 의미합니다.

변수의 범위는 변수가 적용되는 범위를 의미합니다.

자바스크립트에서는 전역 범위와 함수 범위, 블록범위가 있습니다.

 

이 중 블록범위는 ES6에서 새롭게 등장한 개념입니다.

함수나 변수를 블록 범위에 추가합니다.

블록 안에서 선언된 함수는 블록 안에서만 액세스 할 수 있습니다.

 

한 범위가 어떤 변수를 현 범위에서 찾을 수 없을 때 부모 범위에서 선언된 변수를 가져올 수 있습니다.

이것을 variable lookup이라고 하고 부모 범위를 찾는 것을 scope chaining이라고 합니다.

단, 부모 범위에서 자식 범위에 있는 변수는 가져올 수 없습니다.

그리고 var은 블록 범위 안에서만 적용되지 않습니다.

 

호이스팅

호이스팅이란 일부 유형의 변수를 접근 가능하게 해주는 것입니다.

호이스팅은 모든 변수 형식에 적용되지 않고 함수, var 변수에만 적용이 됩니다.

let과 const 변수에는 적용되지 않습니다.

 

자바스크립트 변수는 Temporal dead zone을 가집니다.

실제로 정의되기 전의 변수를 사용하면 오류가 발생하기 때문에

변수를 제대로 동작하게 하기 위하여 TDZ가 존재합니다.

그러나 호이스팅은 선언 전에 함수를 사용할 수 있도록 합니다.

 

this 키워드

this 키워드는 자바스크립트의 아주 중요한 개념으로 모든 실행 컨텍스트와 함수를 위해 생성되는 키워드입니다.

항상 이 키워드는 기능의 소유자를 가리킵니다.

this의 값은 고정적이지 않고 함수가 호출되었을 때 할당이 됩니다.

this는 함수에서 사용되지만 화살표함수에서는 적용되지 않습니다.

또 this는 DOM의 이벤트 리스너에서도 사용됩니다.

그밖에도 new, call, apply, bind 키워드들과 함께 사용할 수 있습니다.