스코프 체인

스코프란 변수나 함수가 존재하는 유효범위 또는 영역이다.  

 

예를 들어) 내가 만약 플레이스테이션 컨트롤러를 찾고 있다고 생각해보자. 이때 내 방이 "스코프"가 된다. 왜냐면 컨트롤러는 내 방에서만 사용 가능하니까. 만약 컨트롤러를 찾지 못한다면 아마 거실이나 다른 방으로 가서 찾아볼 것이다. 이렇게 내 방에서 거실로, 거실에서 다른 방으로 가는 것이 바로 "스코프 체인"이다. 

 

프로그래밍에서도 이와 비슷하게 변수나 함수를 찾을 때, 현재의 스코프, 즉 현재 위치에서 찾아보고, 만약 그곳에서 찾지 못한다면 상위 스코프로 가서 찾아보는 과정을 반복한다. 

 

ES5까지는 전역공간을 제외하면 오직 함수에 의해서만 스코프가 생성됐는데, ES6부터 let, const의 등장으로 블록 레벨 스코프를 지원하기 시작하면서 함수 뿐만 아니라 중괄호로 감싼 모든 영역에서 새로운 스코프를 생성한다. 

 

// 이 변수는 전역 스코프에 있다.
var globalVariable = '전역 변수'; 

function outerFunction() {
    // 이 변수는 outerFunction 스코프에 있다.
    var outerVariable = '외부 함수 변수'; 
    
    function innerFunction() {
        // 이 변수는 innerFunction 스코프에 있다.
        var innerVariable = '내부 함수 변수'; 
        
        console.log(innerVariable); // '내부 함수 변수'
        console.log(outerVariable); // '외부 함수 변수'
        console.log(globalVariable); // '전역 변수'
    }
    
    innerFunction();
    // ReferenceError: innerVariable is not defined
    console.log(innerVariable);
    // '외부 함수 변수'
    console.log(outerVariable); 
     // '전역 변수'
    console.log(globalVariable);
}

outerFunction();
// ReferenceError: innerVariable is not defined
console.log(innerVariable);
// ReferenceError: outerVariable is not defined
console.log(outerVariable);
// '전역 변수'
console.log(globalVariable);

내부 함수 innerFunction()은 자신의 스코프에서 변수를 찾지 못하면 바로 상위 스코프인 outerFunction()으로 이동하여 변수를 찾고, 마찬가지로 outerFunction()도 자신의 스코프에서 변수를 찾지 못하면 전역 스코프로 이동하여 변수를 찾는다. 그러나 외부에서는 내부 함수의 변수에 접근할 수 없다. 이는 스코프 체인이 내부에서 외부로만 작동하기 때문이다. 

 

 

function createCounter() {
 	// 'createCounter' 함수의 지역 변수로, 외부에서 접근할 수 없다.
    let count = 0;

    return {
        increment: function() {
            count += 1;
        },
        decrement: function() {
            count -= 1;
        },
        getCount: function() {
            return count;
        }
    };
}

let counter = createCounter();
counter.increment();
counter.increment();
// 2
console.log(counter.getCount());
// undefined
console.log(counter.count);

createCount()안에 있는 메소드들은 CreateCounter 함수의 지역 변수인 count에 접근할 수 있다. 그러나 count 변수는 createCounter 함수 외부에서는 접근할 수 없다. 이것이 바로 변수 은닉화이다. 변수 값을 의도치 않게 변경하는 것을 방지할 수 있다.