자바스크립트 핵심 개념 : 함수스코프와 실행컨텍스트

1. 함수스코프와 실행컨텍스트

함수스코프가 무엇일까?

scope는 범위, 영역정도로 해석되는데 즉,"변수의 유효범위"라고 할 수 있다.

변수는 전역변수, 지역변수로 나뉘는데 전체적인 변수, 지역적인 변수라고

의미만 대략알고 밑의 예제를 보면 확실하게 이해할 수 있다. 

실행컨텍스트는 무엇일까?

context는 문맥, 맥락이라는 의미로 즉, 실행이 되는 코드 덩어리(맥락)라고 할 수 있다.

그런데 뭘 구분한 코드 덩어리일까? 바로 함수이다. 즉, 다시 말해

"실행이 되는 함수 코드 덩어리"라고 표현해볼 수 있다.

실행컨텍스트의 특징은 "호이스팅이 일어나고, 함수가 실행될 때 열린다는 것"이다.
(this 바인딩하는 것도 특징인데 이건 this를 끝내고 다시 보기로)

 

하지만 이 개념은 좀 추상적이라 다시 봐도 무슨 말인지 알기가 어렵다.

함수스코프와 실행컨텍스트의 의미를 외우는게 아니라,

코드상에서 어떻게 표현되는지 눈으로 확인하는 게 훨씬 중요하다.

 

2. 그 이론을 눈으로 확인하고 흐름을 외우자

 var a = 1;
 function outer() {
   console.log(a); // 1번 로그
   
   function inner() {
     console.log(a); // 2번 로그
     var a = 3;
   }
   
   inner();
   console.log(a); // 3번 로그
 }
 outer();
 console.log(a); // 4번 로그

0. global컨텍스트 활성화 (코드 처음 ~ 끝)

global 컨텍스트 open

1.전역변수 a 선언

2. 함수 outer 선언

3. 전역변수 a에 1 할당

4. outer 함수 호출- > 아우터 컨텍스트 활성화

outer 컨텍스트 open

5. 함수 inner 선언

6. 1번 로그를 만나고, outer에서 선언된 a가 없으므로
상위 컨텍스트인 전역 컨텍스트에서 값을 찾음, 1 출력

7. inner 함수 호출 -> inner 컨텍스트 활성화

inner 컨텍스트 open

8.  지역변수 a 선언

9. inner안에서 지역변수 a가 선언이 된 상태이므로
a는 전역변수가 아닌 지역변수 a를 인식하고,
2번 로그는 undefined가 출력된다.

10. 변수 a에 3 할당

11. inner 컨텍스트 종료

12. outer 컨텍스트에서 3번 로그를 만나 a 탐색
-> outer에서 선언된 a가 없으므로 
상위 컨텍스트인 전역 컨텍스트에서 값을 찾음, 1 출력

13. outer 컨텍스트 종료

14. global 컨텍스트에서 a 탐색 -> 1이 있으므로 출력

15. global 컨텍스트 종료

 

3. 이 글의 핵심부분

(1) 스코프는 "변수의 유효범위"라고 설명했다.

쉽게, 완전 밖에서 만들어지면 모든 곳에서 사용이 가능하고
안에서 만들어지면 그곳에서 사용이 가능하다.
참고로, 만약 9번에서 가리키는 지역변수 var a = 3이 없다면
전역변수 1을 인식하고 답은 1이 나온다.

(2) 실행컨텍스트는 "실행이 되는 함수 코드 덩어리"이라고 정의하였다.
그 말대로 global 컨텍스트는 전체 덩어리고, outer 컨텍스트는 그 안의 함수 덩어리,
inner 컨텍스트는 또 그 안의 함수 덩어리라고 할 수 있다.

(3) 제일 중요한 실행컨텍스트의 특징은 "호이스팅이 일어나고, 함수가 실행될 때 열린다는 것"
이라고 쓴 것처럼 맨 처음에 호이스팅의 선언부분이 제일 먼저 일어난다.
그리고 함수가 호출될 때 열려서 실행이 된다.

 

 

- 정재남님의 자바스크립트 핵심 개념강의를 이해후 재정리한 것