[JavaScript 33가지 지식]함수범위, 블록범위, 렉시컬 범위

스코프(유효 범위, Scope)

스코프란, 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됩니다. 즉, 스코프는 식별자가 유효한 범위를 뜻합니다.

 

MDN에 따르면 스코프란 현재 실행되는 컨텍스트를 말합니다.

여기서 컨텍스트는 값과 표현식이 "표현"되거나 참조될 수 있음을 의미합니다.

만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없습니다.

스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가합니다.

 

예제 1)

function exampleFunction() {
    var x = "declared inside function";
    // x는 오직 exampleFunction 내부에서만 사용 가능.
    console.log("Inside function");
    console.log(x);
}

console.log(x);  // 에러 발생

 

그러나 아래와 같은 코드는 변수가 함수 외부의 전역에서 선언되었기 때문에 유효합니다.

예제 2)

var x = "declared outside function";

exampleFunction();

function exampleFunction() {
    console.log("Inside function");
    console.log(x);
}

console.log("Outside function");
console.log(x);

---

 

1-1)var : 함수 레벨 스코프(function-level scope)

var는 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주한다.

function hello(){
    var a = 10;
    console.log(a);
}

hello(); // 10

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

hello 함수 내부에서 선언된 a변수는 함수 내부에서만 참조가 가능하며, 외부에서 참조시 에러가 발생한다.

함수를 제외한 영역에서 var로 선언한 변수는 '전역변수'로 취급

if(true) {
    var a = 10;
    console.log(a); // 10
}

console.log(a);  // 10

자바스크립트 특징

if문, for문, while문, try/catch 문 등의 코드 블럭{ ... } 내부에서 var로 선언된 변수를 전역 변수로 간주

 

1-2)let, cost : 블록 레벨 스코프(block-level scope)

ES6부터 나온 let, const는 함수 내부는 물론, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수도 지역변수로 취급한다.

if(true) {
    let a = 10;
    console.log(a); // 10
}

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

function hello() {
    let a = 10;
    console.log(a); // 10
}

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

요약

var는 함수 내부에 선언된 변수만 지역 변수로 인정하는 함수 레벨 스코프이다.

let, const는 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프이다.

 

참고

블록은 if문이나 for문 등에서 중괄호{ } 로 둘러싸인 코드 영역을 말한다.

---

렉시컬 스코프(Lexical Scope)

렉시컬 스코프란 중첩된 함수 그룹에서 내부 함수가 상위 범위의 변수 및 기타 리소스에 액세스 할 수 있음을 의미합니다.

즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정됩니다.

다른 말로, 정적 스코프(Static Scope)라 부르기도 합니다.

 

예제)

var x = 1;

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

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

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

위 예제를 보듯 Javascript는 렉시컬 스코프를 따르기에 함수를 선언한 시점에 상위 스코프가 결정됩니다. 함수를 어디서 호출하였는지는 스코프 결정에 아무런 영향을 주지 않습니다. 위 예제의 bar 함수는 전역에 선언되었기에 bar 함수의 상위 스코프는 전역 스코프이고, 따라서 전역 변수 x의 값 1을 두번 출력합니다.

정리 및 요약

• var 키워드는 함수 스코프(Function Scope). 범위는 함수 안.
• let, const 키워드는 블록 스코프(Block Scope) 범위는 중괄호 안.
• 렉시컬 스코프(Lexical Scope)는 함수를 어디서 호출하는지가 아닌 어디에 선언하였는지에 따라 결정됨. 

---

목차

[JavaScript 33가지 지식] 시리즈 소개 및 목차