Execute Context

민범기·2022년 3월 16일

자바스크립트가 실행되는 원리인 Execute Context(실행 컨텍스트)에 대해서 다시 한번 정리 하려고 한다.

자바스크립트에서 실행 컨텍스트란? 쉽게 말해서 코드들이 동작 되기 위해서 실행되는 환경 이라고 생각하면 된다.

생활 코딩 강의를 수강 하면서 하기 때문에 좀 더 원활한 실행 컨텍스트를 확인 하기 위해서 크롬의 개발자 툴을 사용하여 디버깅 해보면서 진행 할 것이다.

<script>
    n0='n0';
    var v0='v0';
    let l0='l0';
    const c0 = 'c0';
    console.log(v0, n0, l0, c0);
    console.log(window.v0, window.n0, window.l0, window.c0);
    function fn2(){
        n2='n2';
        console.log(n0, n1, n2);
        var v2='v2';
        console.log(v0, v2);
        // console.log(v1)
        let l2='l2'; 
        console.log(l0, l2);
        // console.log(l1);
        const c2='c2;';
        console.log(c0, c2);
        // console.log(c1);
    }
    function fn1(){
        n1='n1';
        var v1='v1';
        let l1='l1';
        const c1='c1';
        fn2();
    }
    fn1();
    console.log(n2);
    // console.log(v2, l2, c2);
    </script>

해당 코드를 예제로 사용하였다.

코드 예제 주소:https://gist.github.com/egoing/7e8bce3f04542e061629166be91598cc

실행 컨텍스트는 local→script→global 순으로 실행 범위를 확장 시켜 나간다.

함수가 아닌 외부에 변수 이름만 선언하고 변수에 값을 넣었을 때 자동으로 글로벌 즉 Window 객체로 빠져나가는 것을 알 수 있다.

var 로 선언한 변수 또한 Window 객체에 값이 적용되어져 있음을 확인 할 수 있다.

let 으로 선언한 변수와 const로 선언한 변수는 Script 스코프 안에 적용되어 지는 것을 알 수 있다.

그렇다면 함수 안에서 선언된 변수들은 어떻게 될까?

제일 먼저 코드에서 fn1 함수가 호출된다.

기본적으로 함수 외부에 선언되었던 부분들이(익명) 스택이 되어 쌓이고,그 다음에 fn1 함수가 실행되며 스택이 쌓인다.

fn1() 함수의 내부를 살펴보자.

 function fn1(){
        n1='n1';
        var v1='v1';
        let l1='l1';
        const c1='c1';
        fn2();
    }

n1은 바로 변수를 지정해 주었기 때문에 window 객체 안에 들어가게 된다.

var,let,const 로 선언한 변수들은 로컬 스코프 안에 각각 변수가 선언된 값들이 정상적으로 들어가게 된다.

하단에 f2()함수를 실행시켜보자.

function fn2(){
        n2='n2';
        console.log(n0, n1, n2);
        var v2='v2';
        console.log(v0, v2);
        // console.log(v1)
        let l2='l2'; 
        console.log(l0, l2);
        // console.log(l1);
        const c2='c2;';
        console.log(c0, c2);
        // console.log(c1);
    }

fn2() 함수를 실행 시키면 콜스택은 후입선출 이기 때문에 나중에 실행 된 함수가 제일 위로 올라간다. 따라서 콜스택은 아래 그림과 같다.

fn2() 함수를 실행하게 되면 n2는 당연히 Window 객체로 빠지게 될 것이고, local→script→global 흐름에 따라 값들이 정상적으로 global에 값을 찾아 console.log로 찍히게 된다. 주석으로 처리한 부분들은 에러가 나기 때문인데, 5번째 줄 주석을 보자.

v1은 fn1() 함수에 있는 변수이다. 하지만 각자 다른 함수에서 선언된 변수 이며 같은 로컬 스코프라고 하더라도 로컬은 실행되는 함수에 따라 달라지기 때문에 참조를 할 수 없는 것이다.

함수가 마저 다 실행 되면 가장 나중에 실행된 함수부터 순서대로 콜 스택을 빠져나간다.

실행 컨텍스트 개념을 표 형식으로 쉽게 생활코딩 강의에서 정리해주셔서 한번 사진도 추가하면 좋을 것 같다!