실행 컨텍스트와 스코프

    var scope = 'out';

    var outScope = function () {
        console.log(scope);

        var inScope = function () {
            console.log(scope);
            var scope = 'in';
        }
        inScope();
        console.log(scope);
    }

    outScope();
    console.log(scope);

이 코드의 실행 결과는 어떨까?

이를 이해하려면 컨텍스트와 스코프에 대해서 알아야한다

실행 컨텍스트

코드가 실행되는데 필요한 여러가지 정보(호이스팅등)를 담고 있는 것을 실행 컨텍스트라고 한다

실행 컨텍스트는 '실행 가능한 자바스크립트 코드 블록이 실행되는 환경'이다

여기서 말하는 코드 블록은 대부분이 함수이고 그 코드 블록 안에는 변수, 객체, 또 다시 실행 가능한 코드들이 들어있다

코드 블록안에 있는 실행 가능한 코드가 실행되면 새로운 실행 컨텍스트가 생성된다

    var outter = function () {
        var inner = function () {
        }
        inner();
    }
    outter();

이 코드로 한번 살펴보자

위 코드의 호이스팅이 끝난 후의 컨텍스트

우선 자바스크립트를 실행하게 되면 전역 컨텍스트가 생성된다 그리고 우리가 아는 바와 같이 호이스팅이 일어나게 되는데

1번과 같이 함수 선언 부분만 호이스팅되어 올라온다

함수를 초기화하고 실행 가능한 코드인 2번을 만나게 되어서 outter의 새 실행 컨텍스트가 실행된다

그 안에서 inner함수의 실행이 끝나고 나면 outter의 실행 컨텍스트가 끝나고 곧 이어 자바스크립트가 종료된다

그림은 옆으로 넘어가는 듯하게 컨텍스트를 설명 했지만 컨텍스트들은

전역 컨텍스트 위에 하나하나 쌓여가고 제일 위에는 현재 실행 중인 컨텍스트가 있다고 생각하면 편하다

ECMAScript에서는 "현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면, 쌔로운 컨텍스트가 생성되어 스택에 들어가고 제어권이 그 컨텍스트로 이동한다"고 설명하고 있다

스코프

스코프란 변수의 유효 범위를 나타내고

우리가 배우는 자바스크립트는 함수 단위 스코프를 가지고 있다

간단한 예제를 보자

    var scope = function () {
        var tIn = 'in';


        console.log(tIn);------①
    }

    scope();
    console.log(tIn);------②

실행 결과

이걸로 알 수 있듯이

1번에서 출력한 변수 tIn은 2번에서 유효하지 않다

scope함수 안에서 선언된 변수 tIn은 함수가 종료됨과 동시에 유효성을 잃은 것

이걸 보고 변수의 유효 범위, 즉 스코프가 함수 단위의 범위를 가지고 있다고 얘기하는 것이다

    var tOut = 'Out';
    var scope = function () {

        console.log(tOut);
    }
    scope();

이 경우에는 함수 내에 선언된 변수가 없다

이런 상황에선 현재 실행되고 있는 컨텍스트의 전 컨텍스트에 가서 변수들을 다시 찾아보는데

지금의 전 컨텍스트는 전역 컨텍스트이고 거기에 tOut변수가 있기 때문에 에러 없이 코드가 잘 작동된다

이렇게 실행 중인 컨텍스트에 찾는 변수가 없을 때 나를 감싸고 있는 컨텍스트에 가서 변수명을 찾아 올 수 있게 연동되어 있는 것을

스코프 체인이라고 부른다

아래에서 더욱 자세한 예시가 나올 예정

코드 풀이

이제 컨텍스트와 스코프를 배웠으니 다시 코드를 풀어보자

    var scope = 'out';

    var outScope = function () {
        console.log(scope);

        var inScope = function () {
            console.log(scope);
            var scope = 'in';
        }
        inScope();
        console.log(scope);
    }

    outScope();
    console.log(scope);

호이스팅된 후의 컨텍스트

호이스팅 설명은 이제 생략해도 될 것 같다

아웃 스코프의 실행 컨텍스트가 생성되고 ①번 코드를 실행하려 하는데 scope변수를 지금 실행 중인 outScope컨텍스트에서 찾을 수가 없다

하지만 우리는 스코프 체인을 사용해서 상위 컨텍스트의 변수들을 참조하는 걸 배워서 전역 컨텍스트에 있는 scope를 출력할 수 있는 것을 알고 있다

그 후 다시 inScope 컨텍스트 생성하고 ②번 코드, 이번 컨텍스트엔 scope변수가 있다!

그래서 스코프 체인을 활용할 필요가 없이 바로 출력이 가능하지만 선언만 되고 초기화는 되지 않았기 때문에 undefined가 출력된다

후에 scope를 in으로 초기화하긴 했지만 곧 바로 함수가 종료되면서 in이 담겨있는 scope는 유효하지않게 된다

③번 코드도 ①번 코드와 같은 실행과정을 거쳐 전역 컨텍스트의 scope를 참조해 out을 출력하고

④번은 현재 컨텍스트(전역 컨텍스트)의 scope변수 out을 출력하며 끝나게 된다

코드의 결과값