[JS] 스코프(Scope)

스코프(Scope)

스코프는 변수가 선언되고 접근가능한 범위가 어디까지인지에 대한 규칙이다. 즉, 변수가 유효한 범위라고 생각 할 수 있다.

아래 코드를 참고해보자.

var x = 'global scope'

function callFunc() {
    var x = 'function scope'

    console.log(x);
}

callFunc(); // functoin scope

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

위 예제에서 callFunc 함수 내에 선언된 변수 x는 함수 바깥에서는 참조 할 수 없지만 내부에서는 참조가 가능하다.
이러한 규칙 때문에 내부에서는 function scope가 출력되고 외부에서는 global scope가 출력이 된다. 그리고 이러한 규칙을 스코프라고 한다.

블록 레벨 스코프 & 함수 레벨 스코프

자바스크립트에는 블록 레벨 스코프(block-level-scope)와 함수 레벨 스코프(function-level-scope)가 존재한다.

• 블록 레벨 스코프는 { }내에서 유효한 범위를 말하며 이는 if-else문, for문, function 등의 블록도 해당된다.

• 함수 레벨 스코프는 블록 레벨 스코프 중에서 function의 코드 블록 범위를 말한다.

❓ 참조
let, const: 블록 레벨 스코프
var: 함수 레벨 스코프

let b = 10;
{
    let b = 100;
}

console.log(b); // 10

var a = 10;
{
    var a = 100;
}

console.log(a); // 100

렉시컬 스코프

아래 코드의 실행 결과를 예측해보자.

var a = 1;

function one() {
    var a = 2;
    var b = 5;
    two();
}

function two() {
    console.log(a);
    console.log(b);
}

one();

자바스크립트는 상위 스코프를 결정할 때,
함수를 어디에 선언하였는지에 따라 상위 스코프를 결정한다.
이러한 규칙을 렉시컬 스코프(Lexical scope)라고 한다.

그렇기 때문에 해당 실행 결과는 two()함수 내에 a와b가 존재하지 않기 때문에 상위 스코프를 찾아가게되면서 a = 1라는 값이 출력되고 b =
ReferenceError가 나게 된다.

이는 실행 컨텍스트를 공부할 때 배운 1.2) Outer Environment Reference(OER)를 참고하면 좋다.

❓ 참조
동적 스코프(Dynamic scope)
함수를 어디서 호출하였는지에 따라 상위 스코프를 결정하는 것

---

Reference

• https://poiemaweb.com/