자바스크립트 - 스코프

스코프

스코프는 변수, 함수의 이름을 실행컨텍스트에 따라 선언 되어지는 범위를 정해주는 규칙이다.

예를 들면 어떠한 함수내에 선언된 지역 변수는 그 함수 의 밖에서 참조할 수 가 없다.

var globalVar = 'global';

function someFunc() {
    var localVar = 'local';
};

console.log(globalVar);    // 'global'
console.log(localVar);    // localVar is not defined.

이러한 스코프는 코드 블록(if, for, while 등)이나 함수 선언시 정해지며 변수명이나 함수명은 자신의 선언된 위치에 따라서 유효한 범위를 가진다.

---

자바스크립트 스코프의 특징

자바스크립트는 함수레벨 스코프를 사용하는데 함수 코드 블록 내에서 선언된 변수만 지역변수로 취급하고 일반 코드블록에서 선언된 변수는 var 로 선언되어 있을 경우 글로벌 변수 처럼 외부에서 접근할 수 있다. 다만 let 키워드로 선언되어 있을 경우 블록레벨 스코프를 사용할 수 있다.

렉시컬 스코프

렉시컬 스코프란 함수가 선언된 위치에 따라 상위 스코프를 정한다. 어떠한 함수 내부에서 호출이 되더라도 그 함수가 선언된 위치가 다른 곳 에 있으면 호출된 함수 내부 환경이 아닌 선언된 위치의 환경을 참조한다.

var test = 'yes';

function someFunc() {
    var test = 'no';
    // 함수가 호출되었을때의 test 변수의 값은 'no' 이지만 자바스크립트는 렉시컬 스코프 규칙을 따르므로 선언된 스코프에서의 test 변수를 참조한다.
    lexicalFunc();
}

// 이 함수가 선언된 위치의 스코프에서 test 변수를 찾는다.
function lexicalFunc() {
    console.log(test);
}

someFunc(); // 'yes'
lexicalFunc(); // 'yes'

즉시 실행함수

자바스크립트에서는 즉시실행 함수로 전역변수를 유지하지 않고 한번의 필요한 작업 이후 접근하지 못하게 하는 방법이 있다. 이러한 방법으로 라이브러리를 만들며 혹시 모를 우연한 변수명의 일치로 인한 오류를 예방할 수 있다.

(
    function() {
        var obj = {
            name : 'hello',
            age : 22
        };

        console.log(obj); // {name: "hello", age: 22}
    }
)();

console.log(obj); // obj is not defined