2023년 1월 16일의 배움

오늘은 전역 스코프, 객체의 프로토타입, 생성자 함수, Callable과 Construct, 일급함수 등을 배웠다.

비록 취미 정도의 수준이더라도 자바스크립트를 몇 년간 다루어왔는데, 강의가 진행될수록 생소한 점이 많다.

렉시컬 스코프

아래와 같은 코드는 일반적이며 출력값을 예상하기 쉽다.

정적 스코프의 전형

function foo() {
    var x = 1;
    function bar() {
        console.log(x);
    }
    bar();
}
foo();

그러나 아래와 같은 코드에서 출력 값은 어떻게 될까? (출처)

var x = 1;

function foo() {
    var x = 10;
    bar();
}

function bar() {
    console.log(x);
}

foo(); // ?
bar(); // ?

이 코드는 1을 두 번 출력한다. [실제]

foo()의 출력 결과로 10이 출력될 것이라고 예상했다면, foo() 함수 본문에서 bar()가 실행되기 직전의 구문(var x = 10)이 bar()의 실행에 영향을 미쳤을 것이라고 생각한 것이리라. [추측]

이렇듯, 특정 함수의 상위 스코프가 무엇인지 결정하는 방법으로는 두 가지가 있을 수 있다.

먼저, 함수를 호출한 위치이다. [추측]했던 것과 같은 결과가 도출되기 위해서 전제되어야 할 조건이다. 찾아보니 Lisp와 같은 언어가 이러한 방식을 채택하고 있다고 한다. 이러한 방식을 동적 스코프라고 한다.

다음으로, 함수가 정의된 위치이다. [실제] 실행 결과는 이러한 조건을 따랐다. 이를 정적 스코프라고 하고, 자바스크립트에서는 특히 렉시컬(Lexical) 스코프라고 한다.

그렇다면 아래와 같은 코드의 실행 결과는 어떻게 될까?

function foo() {
    var x = 10;

    function bar() {
        console.log(x);
    }

    return bar();
}

foo()();

이에 답하기 위해서는 아마도 내일 배울 클로져를 잘 이해해야할 것 같다.

전역변수와 전역객체

Callable과 Construct