Scope

September 11, 2020

1. 정의

참조 대상 식별자(변수명, 함수명)를 찾아내기 위한 규칙(결국 이름을 찾아내는 규칙)
해당 Entity의 이름(변수/함수명)이 무슨/어떤 리터럴로 바인딩 되었는지 알아내는 규칙
스코프를 통해서 참조 대상 식별자의 충돌 방지(동일한 이름이어도 스코프에 따라서 다른 값 할당)

2. Static(Lexical) Scope

정의 및 선언의 위치에 따라 스코프가 결정된다.(실행시간과 호출 스택에 무관하다)
변수의 유효범위를 단순히 구조를 보고 빠르게 찾을 수 있다.
정의한 위치의 실행 컨택스트를 참고하여 스코프를 만들어준다(추가)
스코프 체인을 통해 첫번째 → 두번째 → ... → 전역까지 검색을 하면서 찾는다
스코프 체인은 찾는 순간 멈추고 그 값으로 바인딩하여 함수를 실행준비 끝!
전역까지 찾았는데 없으면 undefined으로 값이 정의되지 않았다고 나타낸다.

// 예제 1
// 현재 main 컨텍스트
// scope = [main]
var x = 1

// foo함수 실행시 실행컨텍스트안에는 scope 생성
// scope는 foo가 선언/정의되는 main 컨텍스트를 뒤로 생성
// scope = [foo, main]
function foo() {
    var x = 10
    bar()
}

// bar함수 실행시 실행컨텍스트안에는 scope 생성
// scope = [bar, main]
function bar() {
    console.log(x)
}

foo() // 1
bar() // 1

// 예제 2
// scope = [main]
var value = 1

// scope = [foo, main]
function foo() {
    var value = 2

    // scope = [bar, foo, main]
    function bar() {
        return value
    }

    console.log(bar())
}

foo() // 2

3. Dynamic Scope

호출 위치에 따라 스코프가 변경된다(실행환경에 따라 변경된다)
스코프 검색시 실행 중인 함수에서 검색을 하고 그 다음 함수를 호출한 컨텍스트를 기준으로 변수를 찾음
자바스크립트에서는 this가 다이나믹 스코프처럼 호출한 실행 컨택스트를 보고 값을 할당한다(확실하지 않음)

var myObject = {
    name: foo,
    sayName: function () {
        console.log(this.name)
    },
}

var otherObject = {
    name: bar,
}

otherObject.sayName = myObject.sayName

myObject.sayName()
otherObject.sayName()

4. Key Point

자바스크립트에서는 this와 변수는 다르게 값이 할당된다.
this는 동적(호출한 컨텍스트) 으로 변수는 정적(정의한 컨텍스트)으로 할당된다.