Scope -1 | Notion

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

유효범위(Scope)란

Scope를 직영하면 영역, 범위라는 뜻이다. 하지만 프로그램 언어에서의 유효범위는 어느 범위까지 참조하는지. 즉, 변수와 매개변수(parameter)의 접근성과 생존기간을 뜻한다. 따라서 유효범위 개념을 잘 알고 있다면 변수와 매개변수의 접근성과 생존기간을 제어할 수 있다.

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

JavaScript 유효범위의 특징

앞서 JavaScript의 유효범위를 알아야 하는 이유에는 언급했듯 JavaScript의 유효범위는 다른 프로그래밍언어와 다른 개념을 갖는다. JavaScript 유효범위만의 특징을 크게 분류하여 나열하면 다음과 같다.
1. 함수 단위의 유효범위
2. 변수명 중복 허용
3. var 키워드의 생략
4. 렉시컬 특성

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에서 호출을 했을 때 전역변수로 참조하게 됩니다.