스코프 : 유효범위(변수)

실행컨텍스트 : 실행되는 코드덩어리(추상적 개념)

이 둘의 가장 큰 차이는 발생하는 시점 인데,

스코프는 함수가 정의될 때 결정되는 반면, 실행컨텍스트는 실행될때 생성된다.

실행컨텍스트에는 호이스팅이 일어난 이후의 함수본문과 this바인딩(어떤 this와 연결되어있는지) 등이 무엇인지에 대한 정보가 담긴다.

즉, 실행컨텍스트란 사용자가 함수를 호출했을때에, 내부적으로 해당 함수를 실행하기 위해 필요한 정보들을 불러모은 하나의 집합체라고 생각하면 된다.

(이론보다는 실제로 어떤게 스코프고 어떤때 실행컨텍스트가 열리고 그로인해 어떤 결과가 나오는지 아는 것이 훨씬 중요 😉)

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번

위 코드는 위에서 아래대로 실행된다. (1번-4번순)

그렇다면 콘솔에는 어떻게 찍을까

차례대로 1, undefined, 1, 1로 찍는데, 왜 2번에서 undefined이 나왔는지를 보자.

1. 전역 실행컨텍스트 생성

2. 변수 a선언

3. 함수 outer선언 ( GLOBAL > outer)

   전체를 호이스팅하면서 동시에 선언. 함수가 선언될때 스코프가 결정된다. (global스코프 안에있는 outer스코프)

   이렇게 됨으로서 outer내부에서 선언된 변수 범위는 outer스코프 내로 국한되고,

   outer외부에서 선언된 변수는 outer내부에서도 접근이 가능하다. 호이스팅 끝!

4. 변수a에 1할당

5. outer 함수 호출 -> outer실행컨텍스트 생성

   함수가 실행될때 실행컨텍스트가 열리니까 outer실행컨텍스트가 생성이 된다

6. 함수 inner선언(global > outer > inner)

   함수 선언문이기 때문에 전체를 호이스팅한다. inner스코프 생성

7. 첫번째 console.log에 찍으라고 호출을 했으니 outer scope에서 a탐색 > 없으니 global scope에서 a탐색 > 1출력

8. inner함수 호출 > inner실행컨텍스트 생성

   함수가 실행될때 실행컨텍스트가 생성이 되니까 inner실행컨텍스트가 열림 > 이후 호이스팅

9. 변수a 선언

10. inner scope에서 a 탐색 > undefined 출력

    inner스코프내에서 a를 탐색한다. a는 선언되기만 했을뿐 값이 아직은 없기 때문에 undefined가 뜬다.

    이 다음코드가 실행될때야 비로소 a는 3이라고 값을 넣어준다

11. 변수a에 3할당

12. inner실행컨텍스트 종료

13. outer scope에서 a탐색 > global scope에서 a탐색 > 1출력

14. outer실행컨텍스트 종료

15. global scope에서 a 탐색 > 1출력

16. 전역 실행컨텍스트 종료

인프런 정재남님의 ‘Javascipt 핵심개념 알아보기 - JS flow’을 듣고 정리 =)