# 자바스크립트 코어

자바스크립트 핵심 개념 정리

# 이벤트루프 (Event Loop), 태스크큐

js는 싱글스레드인데 동시에 많은 이벤트들을 어떻게 처리할까?

js는 기본적으로 싱글스레드기반 언어이다.

이벤트루프는 콜스택과 태스크큐를 지켜보고있다가 콜스택이 비어있으면

태스크큐에서 첫번째 이벤트를 콜스택에 넣어주는 일을하고, 그것을 tick이라고한다.

콜 스택이 비어 있고 태스크 큐에 콜백 함수가 있는 경우, 함수는 큐에서 제외되고 실행될 콜 스택으로 푸시됩니다.

이벤트루프는 ECMAScript의 스펙이 아니다. 구동 환경측에서 구현해야한다.

그래서 노드는 비동기 io를 지원하기 위해 libuv라이브러리를 사용하는것이다.

브라우저도 마찬가지로 자바스크립트 엔진외에 별도 구현체가 있을것이다.

이 말은 자바스크립트 엔진은 하나의 콜스택만 사용한다는 뜻이다.

결국 자바스크립트 언어설계자체는 싱글스레드이므로 block되는 코드가 존재한다면 그냥 block된다.

크롬같은경우는 내부적으로 여러 스레드를 사용하는데, 그것은 여기에서..

console.log(a); // undefined
var a = 1;

일반적인 언어에서 위의 예제코드를 실행한다면 에러가 날것이다.

js에서는 특이하게도 선언전에 변수를 참조해도 에러가 아니다. (var한정)

ES6에서는 이런 문제를 해결하기위해 let 사용을 권장하고 있다.

console.log(b); // ref error - not defined
let b = 1;

위의 설명에서 보는것과 같이 선언전에 참조할 수 있으므로

변수 선언이나 함수가 코드 상단으로 끌어올려지는 것처럼 보인다.

하지만 끌어올려지는게 아니다.

코드는 그 위치에 그대로 있다.

컴파일 단계에서 스코프가 생성되고 변수나 함수가 차지할 메모리를 즉시 할당한다.

이것이 호이스팅이다.

그래서 스코프내에서 선언 전에 참조할수있고, 선언이 끌어올려지는 것처럼 보인다.

그래서 위의 예제같은 코드가 있으면 변수선언의 경우 undefined가 뜨지만,

아래 예시처럼 함수표현식이 아닌 함수선언식으로하면, 함수가 동작한다.

참고

함수표현식

a() // not working
const a = function() {
  //...some code
}

함수 선언식

a() // working
function a() {
  //...some code
}

실행컨텍스트란 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이다.

컴파일단계에서 전역 컨텍스트가 생기고 호이스팅이 일어난다.

ES6는 함수레벨과 블록레벨의 렉시컬스코프이다.

함수마다 각각의 함수 컨텍스트가 생성된다.

그리고 함수가 리턴하면 그 함수의 컨텍스트가 사라진다.

전역 컨텍스트는 프로그램이 종료되면 사라진다.

컨텍스트는 전역컨텍스트부터 스택형태로 쌓인다.

각 컨텍스트객체에는 VO, scope chain, this 라는 3가지 프로퍼티가 생성된다.

VO(Variable Object) - arguments, parameter를 포함한 variable이 존재

scope - 접근가능한 VO의 유효범위

this - this는 기본적으로 전역객체를 가리킨다가 함수를 어떻게 호출하느냐에따라 할당되는값이 결정된다.