[Javascript] 실행 컨텍스트와 콜 스택

실행 컨텍스트 (Execute Context) 란?

 

• 자바스크립트 코드가 평가 및 실행되는 환경의 추상적인 개념이다.
• 자바 스크립트에서 동작하는 어느 코드이건 실행 컨텍스트 안에서 동작한다.

 

실행 컨텍스트의 종류

 

• 전역 실행 컨텍스트
  • 실행컨텍스트의 기초이다. 함수 밖에 있는 코드는 전역 실행 컨텍스트에 있다. 브라우저의 경우 window 객체를 생성하여 이를 글로벌 객체로 설정한다. 프로그램에는 오직 한개의 실행컨텍스트만 있을 수 있다.
• 함수 실행 컨텍스트
  • 함수가 실행될 때마다 해당 함수에 대한 완전 새로운 실행 컨텍스트가 만들어 진다. 각 함수는 고유의 실행 컨텍스트를 갖지만, 함수가 실행되거나 call 될 때만 생성된다. 함수 실행 컨텍스트의 수는 제한이 없다. 새로운 실행 컨텍스트가 생성될 때마다 정의된 순서에 따라 일련의 단계를 거친다
• Eval 실행 컨텍스트
  • Eval 함수 내부에서 실행되는 코드도 고유 실행 컨텍스트를 갖고 있다. 하지만 eval이 자바스크립트 개발자들에게 쓰이는 일은 잘 없다.

 

 

실행 스택 (Execute Stack) 이란?

 

• 다른 프로그래밍 언어에서 "호출 스택 (Calling Stack)" 이라고 불리는 실행 스택은 후입선출(Last in, first out, LIFO) 구조의 스택이고, 코드 실행 시 생성되는 모든 실행 컨텍스트가 저장되는데 사용된다.
• 자바스크립트 엔진이 작성된 스크립트를 처음 마주할 때, 전역 실행컨텍스트를 생성하고, 현재 실행 스택에 push한다. 엔진이 함수 호출을 발견 할 때마다, 함수를 위한 새로운 실행 컨텍스트를 생성하고 스택의 꼭대기에 push 한다.
• 엔진은 스택 최상단에 있는 함수의 실행 컨텍스트를 실행한다.이 함수가 완료되면 해당 함수의 실행 스택이 현 스택에서 pop되고 제어는 바로 그 아래 컨텍스트에 도달한다.

 

간단 요약 순서 (스코프체인과 변수 은닉화에 대한 내용 포함)

• 변수나 함수가 선언되어 있는 코드를 실행하면 제일 먼저 콜스택에 전역 실행 컨텍스트 생성
• 변수와 함수는 다음과같이 레코드됨
• var : 선언문이 기록되고 값이 초기화 되어 undifined가 기록됨
• let, const : 선언문만 기록되고 값은 기록되지 않음
• 함수 : 선언과 동시에 함수가 기록됨 (이것이 함수가 첫줄에 호출되고 마지막줄에 정의되어도 실행 가능한 이유출처 : 유튜브 우아한Tech
• 만약 변수 내에 선언된 함수가 있고, 변수보다 윗줄에서 콜 한다면?
  • var 내부에 있는 함수는 undifined가 되어 Type Error 발생
  • const 내부에 있는 함수는 기록되지 않아서 Reference Error 발생
• 이런식으로 전역 실행컨텍스트에 1차적으로 기록이 되면 전역 컨텍스트 기록은 완료된다.
• 하지만 함수 내부에 또 다른 함수가 있다면 함수 실행 컨텍스트가  위의 방식대로 한개 쌓이게 된다.
• 또 그 함수 내부에 함수가 하나 더 있다면 방금 쌓인 함수 실행 컨텍스트 위에 한개의 스택이 또 쌓이게 된다.
• 이때 각 스택마다 렉시컬 환경으로 돌아갈 수 있는 outer를 남겨 둔다.
• 그렇다면 자바스크립트는 어떻게 의사결정을 할까?

출처 : 유튜브 우아한 Tech

• 바로 식별자 결정이라는 방법을 통해 코드에서 변수나 함수의 값을 결정한다.
• 먼저 제일 마지막에 쌓인 스택을 살펴보고, 없다면 Outer를 통해 그 밑 스택, 또 없다면 그 밑으로 향하는 것이다.

출처 : 유튜브 우아한 Tech

• 만약 그림과 같이 선언한적 없는 corona를 찾으면 어떤 순서로 찾게될까?
• 먼저 3층을 찾아보지만 pet 밖에 없어서 outer를 통해 내려가고, 2층에서도 없고, 1층인 전역변수에도 없으면 비로소  Reference Error을 출력하게 되는 것이다. 
• 그렇다면 만약 3개의 스택이 쌓여있는 상태에서 console.log(lamp) 를 찾으면 어떻게 될까?
• 먼저 3층을 찾아보지만 없기때문에 outer를 통해 2층으로 내려가고, 2층에 켜져있는 lamp를 보고 on이라는  값을 읽게 되는 것이다. 

출처 : 유튜브 우아한 Tech

• 이 경우 2층의 램프는 찾았지만 찾고난 후 더이상 램프를 찾지 않기 때문에 1층의 램프의 불은 켜졌는지 꺼졌는지 알지 못하게 된다.
• 위처럼 동일한 식별자로 인해 상위 스코프에서 선언된 식별자의 값이 가려지는 현상을 변수 섀도잉(Variable Shadowing) 이라고 한다.
• 이처럼 식별자를 결정할때 사용하는 스코프들의 연결리스트를 스코프 체인이라고 부르고 그 과정을 스코프 체이닝 이라고 부른다.

출처 : 유튜브 우아한 Tech

• 따라서 실행컨텍스트는 식별자를 결정할때 더욱 효율적으로 결정하기 위한 수단으로써 필요한 정보를 한데 모아 제공하는 객체라고 정리할 수 있다.

출처 https://www.youtube.com/c/%EC%9A%B0%EC%95%84%ED%95%9CTech

우아한Tech