실행 컨텍스트와 호이스팅

스택 & 큐

 

 

스택

 

• 출입구가 하나인 우물 형태의 데이터 구조

 

 

 

스택의 입력과 출력 순서

 

• 스택의 출입구는 하나
• 입력의 순서와 출력의 순서가 다름
• 입력 순서 : 1 - 2 - 3 - 4 - 5
• 출력 순서 : 5 - 4 - 3 - 2 - 1

 

 

큐

 

• 양방향 출입이 가능한 파이프 형태의 데이터 구조

 

 

 

큐의 입력과 출력 순서

 

• 입구와 출구가 다름 → 제일 먼저 들어간 데이터가 제일 먼저 나옴
• 입력의 순서와 출력의 순서가 같음
• 입력 순서 : c - b - a
• 출력 순서 : c - b - a

 

 

 

---

 

 

실행 컨텍스트와 호이스팅

 

 

실행 컨텍스트

 

• 실행할 코드에 제공할 환경정보를 모아둔 객체
• 자바스크립트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, 해당 컨텍스트를 콜스택에 쌓아둠
• 실행 컨텍스트를 생성하기 위한 가장 좋은 방법은 함수를 만들어 주는 방법임

 

 

실행 컨텍스트와 콜스택

 

 

 

• 위의 코드를 읽으면서 first, second, third 함수의 실행 컨텍스트를 생성함
• 해당 실행 컨텍스트 관련 코드를 실행하면서 하나의 컨텍스트를 모두 실행하면 콜스택에 서 빠져나감
• 출력은 콜스택의 맨 윗부분부터 실행하기 때문에 first - second - third 순으로 출력됨

 

 

실행 컨텍스트의 구성

 

• variablesEnvironment : 식별자의 정보, 선언위치, 외부환경 정보를 담고있음
• lexicalEnvironment : 처음에는 variablesEnvironment와 같지만 변경사항이 생기면 변경사항을 반영한다는 점에서 variablesEnvrionment와 다름
• thisbinding : 식별자가 바라봐야 할 대상객체

 

※ 실행 컨텍스트를 생성시에 variableseEnvironment에 정보를 담은 이후에 LexicalEnvironment에 복사해 주로 LexicalEnvironment를 사용함

 

 

 

---

 

 

호이스팅

 

• 자바스크립트는 실행컨텍스트를 생성하면서 코드에 관련한 식별자, 환경정보등을 수집함
• 따라서 코드가 실행되지 않았음에도 불구하고 자바스크립트 엔진은 환경에 속한 변수명들을 모두 알고 있음
• 이러한 특징을 호이스팅이라함

 

• 자바스크립트는 코드를 훑어보며 (1) aaa를 만났을 때 실행 컨텍스트를 생성함
• 생성된 첫번째 실행 컨텍스트는 각종 식별자(함수명, 변수명)을 끌어온 후 (2) 콜스택에 쌓아둠
• 계속 훑어 내려가며 (3) bbb를 만났을 때 aaa를 만났을때와 같이 반복해서 실행함
• 콜스택에는 처음 생성한 aaa의 실행 컨텍스트와 bbb의 실행 컨텍스트가 쌓이게 됨
• bbb안으로 들어가 코드를 훑으며 식별자 hi를 컨텍스트 내부에 넣음
• 아직 bbb가 실행되지 않았지만 hi라는 변수를 알고있음
• 이처럼 아직 실행되지 않았지만, 변수의 이름을 알고있는 과정을 호이스팅이라고 보면 됨

 

 

자바스크립트의 동작 과정

 

① 코드를 훑으며 함수를 만나면 실행 컨텍스트를 생성함② 생성한 컨텍스트 안에 해당 코드에 대한 식별자 정보, 선언위치, 외부환경 정보를 수집해서 넣음
    └ 이 과정에서 코드가 실행되지 않았음에도 불구하고 변수, 함수명을 알고있게 됨③ 실행 컨텍스트를 콜스택에 쌓아둠