코어 자바스크립트 - 동작 원리

Javascript 엔진

• 참조형 타입의 데이터를 저장하는 메모리 힙과 기본형 타입의 데이터를 저장하고 실행 컨텍스트를 통해 실제 코드를 처리하는 콜스택으로 구성
• 싱글 스레드 기반 Non-Blocking I/O
• 한번에 하나의 일만 처리할 수 있는 동기 처리 방식이지만, 브라우저의 외부 환경 (Web API, 콜백큐, 이벤트루프) 또는 Node.js의 libuv 라이브러리(C++ 멀티 쓰레드풀, 콜백큐, 이벤트 루프)에 의해 비동기 처리 가능

콜스택

• 자바스크립트 코드가 실행을 위해 FILO의 스택 구조로 쌓이는 공간
• 메모리 힙과 같이 자바스크립트 엔진 내부에 존재
• 싱글 스레드라 하나의 콜스택만 엔진에 존재
• 이벤트 발생시 해당 이벤트의 실행 컨텍스트가 콜스택에 쌓이고, 실행 후 콜스택에서 제거되는 형태로 진행

Web API

• setTimeout, Ajax, Event Handler, DOM 등을 처리하는 브라우저가 제공하는 API
• 비동기 이벤트 요청을 처리하며, 완료되면 해당 요청의 콜백 함수를 콜백 큐로 넘긴다

콜백큐

• Web API에서 건네 받은 콜백 함수들을 FIFO 구조로 보관하는 대기실의 역할을 담당
• 콜백큐에 담긴 콜백 함수들은 이벤트 루프에 의해 순차적으로 비어 있는 콜스택에 쌓인다

이벤트 루프

• 콜 스택과 콜백 큐의 상태를 체크하여 콜 스택이 빌 경우 콜백 큐의 첫번째 콜백 함수를 콜 스택에 넣어주는 역할을 담당

실행 컨텍스트

• 실행 할 코드에게 제공할 환경 정보들을 모아둔 객체
• 종류 : 전역 컨텍스트, 함수 컨텍스트, eval 컨텍스트
• 프로그램이 실행되자마자 가장 먼저 전역 컨텍스트가 쌓인다
• 자바스크립트 엔진이 코드를 위에서 밑으로 읽어내려 가면서 함수가 호출될 때마다 실행 컨텍스트가 콜스택에 쌓이면서 처리 후 제거되는 형태로 진행
• 실행 컨텍스트는 내부적으론 현재 컨텍스트 내의 선언 시점에 변수 식별자 정보를 저장하는 variable environment, 한 줄 단위로 처리하면서 변경사항이 실시간으로 반영되는 변수의 식별자 정보와 스코프를 담는 lexical environment, 그리고 컨텍스트가 바라봐야하는 this 이 3개의 정보를 담는다

호이스팅

• 코드가 실행되기 전임에도 불구하고 자바스크립트 엔진은 이미 해당 스코프에 속한 식별자들을 모두 알 수 있다는 개념
• 변수,함수 선언문들이 해당 스코프의 최상단으로 끌어 올려진 것 같은 특성
• 호이스팅을 통해 수집된 식별자 정보들은 코드를 실행하기도 전에 실행 컨텍스트에 담기게 되지만, var을 제외한 let, const, function, class 같은 경우 식별자만 호이스팅 되고 할당 값은 호이스팅되지 않고 그자리에 머물러 있습니다.
• ES6 이전에 많이 사용되던 var은 선언과 초기화가 동시에 일어나서 호이스팅이 되면서 선언 전에 참조가 일어나도 에러가 나지 않는 반면, ES6에 나온 let, const는 선언과 초기화가 분리되서 일어나기에 선언 전에 참조를 하면, 참조 에러가 발생하는 차이점이 있습니다
• var은 이외에도 동일한 변수명으로 여러번 재선언이 에러 없이 가능하다는 점 때문에 많은 혼란을 야기할 수 있어 변수 선언시에는 재선언,재할당이 불가능한 const를 사용하고, 재할당이 필요한 경우에 한정해 let을 사용하는게 좋습니다

스코프

• 식별자의 유효범위
• 자바스크립트에는 전역 스코프와 블록 단위를 의미하는 지역 스코프 이 2개의 스코프가 존재
• scope 외부에서 선언한 변수는 scope 내부에서도 접근이 가능하지만, scope 내부에서 선언한 변수는 scope 외부에서 접근이 불가능
• 스코프 체인 : 자바스크립트가 식별자의 유효범위를 검색할 때, 안에서 바깥쪽으로 찾아나가는 과정
• 스코프 체인은 variable environment와 lexical environment 이 둘이 갖고 있는 outerenvironmentreference라는 상위 lexical environment를 참조하는 포인터를 통해 상위 스코프로 찾아 올라가는 방식으로 동작

this

• 함수와 객체의 구분이 느슨한 자바스크립트에서 실질적으로 이 둘을 구분하는 유일한 기능
• 실행컨텍스트가 생성될 떄 함께 결정되며, 이에 따라 전역 공간에서 this는 전역 객체를 가리키는데

클로저

• 기본적으로 자바스크립트 함수 내에 지역적으로 선언된 변수,함수들은 함수가 종료되면 컨텍스트가 날라가면서 사라지는데, 자식 함수를 뜻하는 내부 함수가 부모 함수를 뜻하는 외부 함수의 스코프에 선언된 변수를 참조할 수 있게 해주는 개념

중첩함수

• 자바스크립트는 함수를 변수와 같은 값처럼 다루기 때문에 함수 안에 또 다른 함수를 선언하는 중첩 함수가 가능
  • ex) 자바스크립트에서는 같은 이름의 변수와 함수를 선언하는 것이 불가능