[JS] scope 와 실행 컨텍스트

scope와 실행 컨텍스트

자바스크립트 스코프와 실행 컨텍스트

 

의아한 예제

---

라이프 사이클(Life Cycle) 이해하기

왜 필요할까?

 

위 예제 코드를 살펴보면,

램 이미지

변수 a와 b는 메모리 주소(0x1234 / 0x1235)에 a, b라는 이름을 붙인 것이고, 실제 데이터는 해당 메모리 주소에 저장된다. (마치 네이버의 url인 www.naver.com  이 ip주소 125.209.222.141을 가리키는 것처럼..)

 

 

코드에서 자원들(값, 변수, 함수 등)이 선언되면, 컴퓨터의 자원(보통 컴퓨터의 메모리)에 저장되게 됩니다. 

하지만, 컴퓨터 시스템의 모든 자원은 유한한 것이고 한정적이기 때문에, 프로그래밍 언어에서 자원은 라이프 사이클 이라는 것을 갖습니다.

 

라이프 사이클이란? 
코드에서 자원들이 생성되고 사용되며(열리고) 소멸되는 메커니즘을 의미합니다. 
즉, 자원의 생애주기 같은 개념입니다

 

 

그렇다면 JS에서는?

JS에서 자원(값)에서도 모두 생애주기 메커니즘의 영향을 받습니다. 모든 값은 저장되며, 저장되기 위해선 저장소가 필요한데, 

이 값이 저장되는 저장소를 "스코프(Scope)"라고 합니다

 

스코프(scope)

JS에서는 세 가지 종류의 스코프가 존재합니다.

 

js scope 종류

 

전역 스코프(global scope)

전역 스코프는 프로그램의 라이프 사이클과 동일한 스코프입니다.

브라우저가 HTML을 로딩한 후, 페이지를 벗어나거나 새로 고침 될 때까지의 주기를 갖습니다.

 

전역 스코프는 모든 스코프의 "최상위 스코프"이며 모든 지역 범위에서 참조가 가능합니다.

 

지역 스코프(local scope)

지역 스코프는 전역 스코프 이외에 생성된 스코프입니다.

지역 스코프는 두 가지 방법으로 생성할 수 있습니다.

 

1. 함수 스코프(Funtional Scope)

함수가 호출되는 즉시, 함수 스코프가 생성됩니다.

함수 안에서 생성된 모든 변수(arguments 포함)들은 함수가 실행되는 순간 생성되며 종료되는 순간 함수와 함께 제거됩니다.

 

 

2. 블록 스코프(Block Scope)

블럭 스코프는 블럭 안에서 생성됩니다.

블록 스코프는 ES2015 버전부터 지원되기 시작했으며 if / while / for 등의 코드 블록으로 생성됩니다.

 

호이스팅(hoisting)

변수 호이스팅 / 함수 호이스팅

 

 

호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.

 

그렇다면, 스코프, 호이스팅 등의 개념은 자바스크립트 내부에서 어떻게 구현되어있을까?

이는 실행 컨텍스트 라는 개념으로 구현되어 있다. 이제 실행 컨텍스트의 동작원리를 파헤쳐보자 :)

파헤쳐 보다 보면  this, arguments 등의 동작 원리도 덤으로 알 수 있다 👍

 

---

실행 컨텍스트

함수를 호출할 때, 해당 함수의 호출 정보(함수 내부의 지역변수 / arguments 등)가 쌓여 있는 스택을 의미한다.

 

위의 코드는 아래와 같은 순서로 call stack이 쌓인다.

call stack 프로세스

이는 함수가 호출되면, 해당 함수의 호출 정보가 기존 함수의 호출 정보 위에 스택 형태로 하나씩 쌓이게 되는 것이다. 

실행 컨텍스트는 앞에서 설명한 콜 스택에 들어가는 하나의 실행 정보이다. 이 컨텍스트는 실행에 필요한 여러 가지 정보를 담고 있다.

 

ECMA script에서는 실행 컨텍스트가 형성되는 경우를 세 가지로 규정하고 있다.

• 전역 코드
• eval() 함수로 실행되는 코드
• 함수 안의 코드를 실행할 경우

 

실행 컨텍스트 생성 과정

(함수 호출 시) 실행 컨텍스트가 생성 →  js엔진은 실행에 필요한 여러 가지 정보를 담을 객체를 생성 → 이를 활성 객체(=변수 객체)라고 한다.

- 활성 객체와 변수 객체

- 스코프 객체

 

1. 활성 객체 생성

활성 객체(변수 객체) : 실행 컨텍스트가 생성되었을 때, (js엔진에 의해 만들어진) 해당 컨텍스트에서 실행에 필요한 여러 가지 정보를 담을 객체, 앞으로 사용하게 될 매개변수나 사용자가 정의한 변수 및 객체를 저장하고, 새로 만들어진 컨텍스트로 접근 가능하게 되어 있다.

 

2. arguments 객체 생성

 

3. 스코프 정보 생성

현재 컨텍스트의 유효범위를 나타내는 스코프 정보를 생성한다. 이 스코프 정보는 현재 실행 중인 실행 컨텍스트 안에서 linked리스트와 유사한 형식으로 생성된다.

 

4. 변수 생성

실행 컨텍스트 내부에서 사용되는 지역변수의 생성이 이루어진다. 메모리에 생성만 하고 초기화는 후에 이루어진다.

 

5. this 바인딩

 

6. 코드 실행

 

7. 스코프 체인