모던 자바스크립트 Deep Dive - 스코프

keyword = [ 스코프 , 스코프 체인 , 렉시컬 스코프 ]

스코프 : 식별자가 선언된 위치에 의해 다른 코드가 식별자를 참조할 수 있는 유효 범위

---

let x = 'global';

function foo(){
    let x = 'local';
    console.log(x);  // 'local'
}

foo();

console.log(x);  // 'global'

 

x 변수는 foo 함수 내부와 foo 함수 외부에 존재한다.

자바스크립트 엔진은 스코프를 통해 이름이 같은 두 개의 변수 중 어떤 변수를 참조할지 결정한다. 이것을 식별자 결정 이라 한다. 즉, 스코프는 식별자를 검색할 때 사용하는 규칙 이다.

 

위 코드를 보면 코드의 가장 바깥 영역에 선언된 x 변수는 어디서든 참조할 수 있다.
하지만, foo 함수 내부에서 선언된 x 변수는 foo 함수 내부에서만 참조할 수 있다.
즉, 두 개의 x 변수는 식별자 이름이 같을 뿐, 스코프가 다른 별개의 변수다.

 

 

---

식별자 이름을 파일이라 생각하고
스코프를 폴더라고 생각하자.

우리는 파일의 이름이 동일한 폴더 내부에서 겹치지만 않으면,
동일한 이름의 파일을 여러개를 생성할 수 있다.

예를들어, ./test.js와 ./test/test.js 와 같이 test.js파일을 여러개 만들 수 있다.
이처럼, scope가 같지 않다면 동일한 변수를 생성하여 사용할 수 있다.

---

 

 

 

---

스코프의 종류

---

구분	설명	스코프	변수
전역	코드의 가장 바깥 영역	전역 스코프	전역 변수
지역	함수 몸체 내부	지역 스코프	지역 변수

 

전역 변수는 어디서든 참조할 수 있다.
지역 변수는 자신이 선언된 지역 + 하위 지역에서 참조할 수 있다.

 

let x = 'global x';
let y = 'global y';

function outer(){
    let z = 'outer's local z';
    
    console.log(x);    //    'global x'
    console.log(y);    //    'global y'
    console.log(z);    //    'outer's local z'
    
    function inner(){
        let x = 'inner's local x';
        
        console.log(x);    //    'inner's local x'
        console.log(y);    //    'global y'
        console.log(z);    //    'outer's local z'
    }
    
    inner();
}

outer();

console.log(x);    //    'global x'
console.log(z);    //    error

 

 

 

---

스코프 체인

---

 

함수는 전역에서 정의할 수도 있고 함수 몸체 내부에서 정의할 수도 있다.
이 때, 함수 몸체 내부에서 정의가 되는 것을 ' 함수의 중첩 ' 이라 한다.
그리고, 함수 몸체 내부에서 정의한 함수를 ' 중첩 함수 ' 라고 한다.
따라서, 함수의 지역 스코프도 중첩이 될 수 있다.

결국, 하고자 하는 말은 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것이다. 이것을 스코프 체인이라 한다.

 

스코프 체인 그래서 뭐???

 

자바스크립트 엔진은 변수를 참조할 때 스코프 체인을 통해 변수를 상위 스코프 방향으로 검색 하여 참조 한다.

 

 

---

렉시컬 스코프

---

let x = 1;

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

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

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

 

많은 사람들이 foo() 의 결과 값으로 10을 예상한다.

bar 함수의 상위 스코프를 결정할 때 발생하는 문제이다.

 

• 동적 스코프

함수를 호출하는 시점에 상위 스코프를 결정한다. 
즉, 호출하는 위치에 따라 상위 스코프가 변경된다.

 

• 렉시컬 스코프

함수를 정의하는 시점에 상위 스코프를 결정한다.
즉, 함수를 정의하는 곳은 동일하므로 일정한 상위 스코프를 갖는다.

 

자바스크립트는 렉시컬 스코프를 따른다.

즉, 정적으로 상위 스코프를 결정한다.