실행 컨텍스트

실행 컨텍스트란, JavaScript코드를 읽고, 읽은 코드를 실행할때 필요한 값, 함수, 클래스 등을 컴퓨터가 사용 할 수 있도록 메모리에 올려 놓을때 만들어 지는 것 입니다.

코드는 엔진이 읽고 해석하면서 각 실행 컨텍스트를 생성하고, 메모리에 필요한 정보(변수, 함수 등)를 관리합니다. 이 과정을 통해 코드 실행이 가능한 상태가 됩니다.

실행 컨텍스트 작동 순서.

1. 생성
   코드를 읽고 해당 파일의 실행 컨텍스트를 초기화 및 생성 합니다.

1-1 변수와 함수 선언문을 찾아서 값이 없는 채로 메모리에 값을 저장 할 공간을 확보 해 둡니다.
1-2 각 변수, 함수간의 상관 관계를 위해 각각의 개체마다 범위(스코프)와 스코프 체인을 만듭니다.
1-3 이 스코프를 기준으로 this 값이 어떤것을 가리키는지 설정합니다.

이 과정중에서 그 유명한 호이스팅도 포함됩니다.

2.할당
메모리에 확보된 각각의 변수 공간에 값을 할당 합니다.

• 이때 할당받지 못한 값들은 에러처리됩니다.
  ( var는 undefined 처리되고, let과 const는 TDZ에 머무르다가 실행시점에 할당됨 )

코드를 작성할때 undefined,ReferenceError 나온다면 이부분을 의심해보면됩니다. 할당 해준적이 없거나 할당 되기전에 호출 한 것이지요.

3. 실행
   메모리에 할당된 변수의 값과 함수에 대한 코드가 실행되는 순서입니다.

코드가 실행되고 함수가 작성된 코드의 순서에 맞게 실행되며, 값이 반환됩니다. 이때 위에서 설정해둔 스코프 영역에 맞춰 실행됩니다.

자바스크립트의 실행 컨텍스트는 스택 구조 (LIFO: Last In, First Out) 으로 관리됩니다.

가장 마지막에 생성된 실행 컨텍스트가 가장 먼저 실행되고 제거됩니다.
이는 비동기가 없다는 가정하에서는 스택에 들어온 마지막 연산을 우선실행 하여 처리합니다.

비동기 처리

비동기 처리는 조금 다릅니다.

비동기 처리 또한 3단계에서 실행되지만, js해석 엔진이 비동기 처리를 특별 취급하는대, 특별 한 공간인 이벤트 루프공간으로 보냅니다. 이 비동기 함수들은 들어온 순서대로 실행됩니다. 끝나는건 제각각 이지만요.

위 그림과 같이 비동기 처리되는 것들은 따로 보관되어 처리되며,

특징1
이 비동기 처리되는 함수나 실행문은 개발자가 따로 제어해 주지 않는다면, 다른 코드를 실행을 하는 동시에 실행합니다.

이때 동시에 라는 단어가 이상할텐대, js는 싱글 스레드지만, 연산 시간을 잘 계산해서 잘게 쪼게어 실행순서를 만들어 하나의 프로세스로 처리됩니다.
(js 논 블로킹 검색하면 나옴)

특징2

비동기 처리는 보통 특정 조건이 달성 될때 다음 문장이 실행 되도록 해야 할떄 사용하는 특징을 가집니다.

왜 개발자가 그렇게 짜야하냐면, 통신을 할때나 특정 함수의 연산이 완료되어 결과가 나와야지만 다음 연산을 시작 할 수 있는 경우에 해당 부분을 비동기 처리 시킵니다. 이는 위에 올려놓은 그림이 그 예시입니다.

물론 이는 백그라운드로 진행되며, 해당 비동기와 연관 없는 코드들은 여전히 동시에 실행될 것 입니다.

왜 이런 실행 컨텍스트 순서를 알아야 하냐면,
어떤 프로그램이든 과정이 복잡해지면 개발 시 원하는대로 제어하기가 힘들어지고 문제를 해결 해도 어떻게 해결한지 모를때도 있습니다.

이는 작업시간을 굉장히 늘리는 결과를 가져옵니다.