vscode Execute-context.html로 확인
자바스크립트는 어떤 변수를 읽으려고 할때 먼저 scope안에서 변수를 찾는다.
script안에 변수가 없으면 global에서 변수를 찾는다.
변수 선언할때 앞에 아무것도 붙이지 않은 n0은 global이라는 곳에 값이 저장
var로 선언한 변수 var v0 = "v0"; 도 없을때와 똑같이 global에 저장이 된다.
let로 선언한 변수 let l0 = "l0";는 script라는 곳에 저장이 된다
const도 const로 선언한 변수 const c0 = "c0";도 script라는 곳에 저장이 된다.
따라서, console.log(v0, n0, l0, c0); 을 했을때
global 과 script 에서 변수를 가져와 출력해준다.
예를 들어 alert()는 window객체이므로
alert(1) 과 window.alert(1)은 똑같이 동작한다.
어느곳에서나 접근가능한 global을 자바스크립트는 window 객체에 저장한다.
따라서, 변수 선언할 때 아무것도 안붙인것과, var로 선언한 변수는
console.log(window.n0, window.v0);를 할 시 "n0", "v0"이 출력 된다.
하지만 예외인 let으로 선언한 l0과 const로 선언한 변수c0는 global이 아닌 script에 변수가 저장되어 있기 때문에 console.log(window.l0 , window.c0);을 하였을 때
undefined가 출력된다. 이유는, 변수가 global에 저장이 된게 아니라 script에 저장이 되었기 때문이다.
다음 실행단계인 fn1()이 실행될 때, CallStack에 실행한 함수인 fn1이 보이게 될 것이다. execute context가 callstack에 쌓이는 것이다.
개발자 도구에서 sources 창에 CallStack에 (anonymous)라는 첫번째 스택을 눌러봤을때, 나오는 Scope는 fn1 함수 바깥쪽에 있는 코드들이 접근할 수 있는 Scope를 보여주는 것이다. 그리고, fn1 을 클릭하면 fn1함수 안쪽의 코드들이 접근할 수 있는 Scope를 보여주는 것이다.
함수밖의 코드는 global execute context
함수안의 코드는 function execute context
예를 들어, 함수안의 코드인 function execute context에서
var v1 = "v1";를 선언하면 local scope로 들어온다.
함수밖의 코드인 global execute context에서 선언했을 때는 global scope로 저장이 되었는데 이점이 다르다.
local scope, script scope, global scope 이렇게 스코프들이 서로 연결되어 있는것을 스코프 체이닝이라고 한다.
따라서 function execute context 안에서는 변수앞에 아무것도 붙이지 않은것을 제외한 var, let, const로 변수를 선언하였을 때는 local scope로 저장이 되게 된다.
fn1 함수안의 fn2 함수를 실행시켜보면, CallStack에 fn1, fn2 이렇게 순서대로 쌓여있는 것을 확인할 수 있다.
