[Javascript] 실행 컨텍스트와 호이스팅, 스코프체인

실행 컨텍스트와 환경정보

이전에 정리했던 내용과 이어집니다  ↑ 참고 

 

Lexical Environment

실행 컨텍스트의 환경정보 중 하나

 

Lexical Environment 정리

 

아래와 같이 나뉘어 지는데 , 이와 관련해서 호이스팅과 스코프 체인에 대해 정리해 보려고 한다.

 

 - Environment Record : 현재 코드와 관련된 식별자 정보들이 저장된다.  ➡︎  호이스팅과 관련 

 - Outer environment Reference : 현재 호출된 함수가 선언될 당시의 외부 Lexical Environment을 참조한다. ➡︎  스코프체인과 관련 

 

1. Environment Record 

코드가 실행되기 전에 이미 컨텍스트에는

식별자 정보들과, 컨텍스트와 관련된 정보가 차례대로 수집되어 있어 이미 그 환경에 속한 변수명들을 알고있는데

이것을 호이스팅이라고 한다.

 

 호이스팅 

'식별자들을 최상단으로 끌어다 놓은 뒤 실행' 
-> 식별자가 맨위로 끌어올려져서 선언 이전에 불려도 오류가 나지 않게된다

* 여기서 식별자란  "변수의 이름, 함수 선언, 매개변수" 를 말함

 

주의해야 할 점은 변수와 이름과, 함수의 선언부만 호이스팅 되는것이라는 점이다.

 

 1  변수의 이름 호이스팅

 

변수의 이름이 호이스팅 된다고 했지만,

위의 예와 같이 let과 const는 이전에 호출하면 오류가난다. (호이스팅X)

var로 선언한 c는 오류가 나지 않는데 (호이스팅O)

호이스팅이 일어나서 선언부가 호이스팅 되었다는 의미이다. 

하지만 할당된 값이 아닌 선언부인 'var c'까지만 호이스팅 된다는 점을 주의해야한다.

 

 

 2  함수의 선언문 호이스팅

 

 

위의 예시를 참조하면 함수 선언문으로 작성한 함수 a는 선언하기 전에 호출해도 작동한다 (호이스팅O)

하지만 표현식으로 사용한 함수는 정의되지 않았다 , 초기값이 설정되지 않았다는 오류가 뜬다 (호이스팅X)

 

전역컨텍스트가 활성화 될때 전역공간에 선언된 변수나 함수들이 호이스팅 될때,
동일한 변수명에서 다른값을 할당할경우 나중에 할당한값이 먼저 할당한 값을 덮어씌우거나 하여 문제가 생길 수 있다.
그러므로 let, const를 사용하고 함수 표현식을 사용하는것이 바람직하다!

 

 

2. Outer environment Reference

현재 호출된 함수가 선언될 당시의 외부 Lexical Environment을 참조한다. 

 

 스코프 

스코프란 식별자에 대한 유효 범위이다.

global이랑 local로 나뉘고 local은 function이랑 block으로 나뉜다.

* 여기서 식별자란  "변수의 이름, 함수 선언, 매개변수" 를 말함

 

 

scope 분류

function scope는 정의된 함수 내에서만 참조가 가능함을 의미하고

block spope는 { }  안에서만 참조가 가능함을 의미한다.

 

 

 스코프 체인 

한 함수의 Outer environment Reference는 현재 호출된 함수가 선언될 당시의 외부 Lexical Environment을 참조한다. 
식별자의 유효범위를 안에서부터 바깥으로 차례로 Lexical Environment를 검색해 나가는 것을 스코프 체인이라고 한다.

 

위의 예시를 보면 변수 a는 outer에 선언되어있고, b는 inner에 선언되어있다.

함수 inner는 a는 없고 b만 존재하는데 결과에는 오류가 나지않고 outer의 a가 출력되었다.

이는 inner는 외부 함수인 outer의  Lexical Environment를 참조한다는 뜻이다.

 

스코프체인 (outerwrap과 global은 예제에 없는 예시임)

 

위와 같이 호출된 함수가 선언될 당신의 외부함수의 스코프를 참조할때 외부함수를 렉시컬 스코프라고 하고,
이가 계속적으로 반복되는것을 스코프 체인이라고 한다.

 

 

---

✔️ 참고

 

[ 코어 자바스크립트  - 저자 정재남 ]의 2장 실행컨텍스트의 일부를 보고 정리한 내용입니다.