JavaScript 프로그래밍에서 유효범위를 잘 알아야 하는 이유는 무엇일까? 스코프(Scope, 유효범위) 란 JavaScript 뿐만 아니라 모든 프로그래밍 언어 코드의 가장 기본적인 개념의 하나로 반드시 알아야 한다. 유효범위의 개념을 모르면 관련된 다른 개념 역시 혼란스러울 수 있다.

유효범위(Scope)란

유효범위의 종류는 크게 두 가지가 있는데 하나는 전역 유효범위(Global Scope), 다른 하나는 지역 유효범위(Local Scope)이다. 전역 유효범위는 스크립트 전체에서 참조되는 것을 의미하는데, 말 그대로 스크립트 내 어느 곳에서는 참조된다. 지역 유효범위는 정의된 함수 안에서만 참조되는 것을 의미하며, 함수 밖에서는 참조하지 못한다.

JavaScript 유효범위의 특징

1. 유효범위 설정단위

function scopeTest() {
  var a = 0;  // var a : hoisting
  if (true) {
    var b = 0; // var b : hoisting
    for (var c = 0; c < 5; c++) { // var c : hoisting
      console.log("c=" + c);
    }
      console.log("c=" + c);
  }
  console.log("b=" + b);
}
scopeTest();

//실행결과
/*
c = 0
c = 1
c = 2
c = 3
c = 4
c = 5
b = 0
*/

위의 코드는 JavaScript의 var의 유효범위 단위가 블록 단위가 아닌 함수 단위로 정의된다는 것을 설명하기 위한 예제 코드이다. let, const 의 유효범위의 단위가 블록 단위이기 때문에 위의 코드와 같은 if문, for문 등 구문들이 사용되었을 때 중괄호 밖의 범위에서는 그 안의 변수를 사용할 수 없다. 하지만 JavaScript의 var의 유효범위는 함수 단위이기 때문에 예제코드의 변수 a,b,c 모두 값은 유효범위를 갖는다.

→ 블록 단위 = 블록 레벨 스코프 (let, const)

→ 함수 단위 = 함수 레벨 스코프 (var)

2. 변수 명 중복

var scope = 10;
function scopeExam(){
    var scope = 20;
    console.log("scope = " + scope);
}
scopeExam();

//실행결과
/*
scope =20
*/

JavaScript는 다른 프로그래밍 언어와는 달리 변수명이 중복되어도 에러가 나지 않습니다. 단, 같은 변수명이 여러 개 있는 변수를 참조할 때 가장 가까운 범위의 변수를 참조합니다. 위의 코드의 함수 내에서 scope를 호출했을 때 전역 변수 scope를 참조하는 것이 아니라 같은 함수 내에 있는 지역변수 scope를 참조합니다. → var는 함수 스코프를 가지기 때문에 가능

3. var 키워드 생략

scope = 10; // 전역변수

function scopeExam() {
  scope = 20;  // 전역변수가 된다. (전역변수 10을 20으로 덮어 씌워짐)
  console.log("scope = " +scope);
}

function scopeExam2() {
  console.log("scope = " +scope);
}

scopeExam();
scopeExam2();

//실행결과
/*
scope =20
*/

다른 프로그래밍 언어의 경우 변수를 선언할 때 int나 char와 같은 변수 형을 썼지만, JavaScript는 var 키워드를 사용합니다. 또, 다른 프로그래밍 언어의 경우 변수를 선언할 때 변수형을 쓰지 않을 경우 에러가 나지만 JavaScript는 var 키워드가 생략이 가능합니다. 단, var 키워드를 빼먹고 변수를 선언할 경우 전역 변수로 선언됩니다. 위 코드의 실행 결과를 보면 scope라는 변수가 함수 scopeExam 안에서 변수 선언이 이루어졌지만, var 키워드가 생략된 상태로 선언 되어 함수 scopeExam2에서 호출을 했을 때 전역변수로 참조하게 됩니다.