10. Scope Life-Cycle

모든 변수는 Scope 유효범위를 가짐.

전역 Scope (Global)

코드 어디에서든지 참고 가능

지역 Scope (Local or Function-level)

정의된 지역 또는 함수 내에서만 가능

변수의 선언 위치(전역 또는 지역)에 의해 Scope를 가지게됨. 

즉, 전역에서 선언된 변수는 전역 Scope를 갖고, 지역에서 선언된 변수는 지역 Scope를 가짐. 

전역 Scope를 갖는 전역 변수는 전역에서 참조가 가능하며, 지역 변수는 선언된 지역과 그 지역 내부에서만 참조가 가능함. 

자바스크립트는 function-level scope를 사용 하기에, 함수 블록 코드내에서 선언된 변수는 함수 코드 블럭 내에서만 유효하고 함수 외부에서는 유효하지 않음.

var x = 5
console.log(x); // 5

{
    var x = 1;
}

console.log(x); // 1

단, ECMAScript 6에서 도입된 Let을 사용하면 block-level scope를 사용할 수 있음.

Global Scope

글로벌 영역에 변수를 선언하면 이 변수는 어느 곳에서든지 참조할 수 있는 전역 변수가 됨. 

전역 변수는 전역 객체 window의 프로퍼티.

var global = '1';

function func1() {
    var local = '2';
    console.log(global);
    console.log(local);
}
func1(); // 1, 2 출력 

console.log(global); // 1
console.log(local);  // Uncaught ReferenceError: local is not defined

Non block-level Scope

코드 블럭 내에서 선언되었지만, 자바스크립트는 block-level scope임으로 function 밖에서 선언된 변수는 코드 블럭 내에서 선언 되었다고 할지라도 모두 Global Scope를 가짐.

{
    var x = 5;
}

console.log(x);

Function-level Scope

자바스크립트는 function-level scope를 사용하기 때문에, 함수 내에서 선언된 매개 변수와 변수는 함수 외부에서는 유효하지 않음.

var a = 10;

(function () {
    var b = 20;
})();

console.log(a); // 10
console.log(b); // Uncaught ReferenceError: b is not defined

내부 함수가 참조하는 외부 함수의 지역 변수가 참조되어 2를 찍음 

var x = '1';

function foo() {
    var x = '2';
    console.log(x, 'foo local'); // 2 foo local

    function bar() {
        console.log(x, 'bar local'); // 2 foo local
    }

    bar();
}
foo();
console.log(x); // 1

암묵적 전역  (implied globals)

func1 함수 내에서는 변수 x가 존재하지 않지만, 상위 지역에서 변수 x를 찾고 존재하지 않으면 변수 x를 암묵적으로 지역변수로 선언.

function func1() {
    x = 1;  
}

func1();

console.log(x); // 1

Lexical Scoping (Static scoping)

함수가 선언된 시점에서 유효한 범위를 갖기 때문에, func2()가 언제 호출될 지 선언된 시점에선 알 수 없음. 

function func1() {
    func2();
}

function func2() {
   console.log('Hello')
}

func1();

참고 : https://poiemaweb.com/