Scope(유효범위)

는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적인 개념으로 확실한 이해가 필요하다. Scope란 변수에의 접근성과 생존기간(life-cycle)을 의미한다. 달리 말하자면 변수가 가지고 있는 참조 범위를 의미한다.

Javascript의 Scope 종류는 다음과 같다.

전역 Scope (Global scope) 코드 어디에서든지 참조할 수 있다.
지역 Scope (Local scope or Function-level scope) 정의된 함수 내에서만 참조할 수 있다.

모든 변수는 Scope를 갖는다.

전역 변수 (Global variable) 전역 Scope를 갖는 변수.
지역 변수 (Local variable) 지역 Scope를 갖는 변수

JavaScript 유효범위의 특징

JavaScript 유효범위만의 특징을 크게 분류하여 나열하면 다음과 같습니다.

함수 단위의 유효범위 (function-level scope)
변수명 중복 허용
암묵적 전역 (implied globals)
Lexical scoping (Static scoping)

Function-Level Scope

C-family language는 block-level scope를 사용한다. block-level scope란 code block({ … })내에서 유효한 scope를 의미한다.

하지만 자바스크립트는 function-level scope를 사용한다. function-level scope란 함수 코드 블럭 내에서 선언된 변수는 함수 코드 블럭 내에서만 유효하고 함수 외부에서는 유효하지 않다(참조할 수 없다)는 것이다.

단, ECMAScript 6에서 도입된 let keyword를 사용하면 block-level scope를 사용할 수 있다.

var x = 0;
{
  var x = 1;
  console.log(x); // 1
}
  console.log(x); // 1

let y = 0;
{
  let y = 1;
  console.log(y); // 1
}
  console.log(y); // 0

변수명 중복 허용

글로벌 영역에 변수를 선언하면 이 변수는 어느 곳에서든지 참조할 수 있는 global scope를 갖는 전역 변수가 된다. 전역 변수는 전역 객체(Global Object) window의 프로퍼티이다.

var global = 'global';

function foo() {
  var local = 'local';
  console.log(global);
  console.log(local);
}
foo();

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

변수 global는 함수 영역 밖의 글로벌 영역에서 선언되었다. 자바스크립트는 타 언어와는 달리 특별한 시작점이 없어서 위 코드와 같이 글로벌 영역에 변수나 함수를 선언하기 쉽다.

전역 변수의 사용은 변수명의 중복 등 여러 문제를 발생시키므로 가급적 사용을 억제하여야 한다.

암묵적 전역 (implied globals)

아래의 foo 함수 내 변수 x에 1을 할당하였다. 하지만 foo 함수 내에는 변수 x가 존재하지 않는다. 따라서 상위 지역(아래 예제의 경우 전역)에서 변수 x를 찾고 존재하지 않으면 변수 x를 암묵적으로 전역변수로 선언한다.

function foo() {
  x = 1;   // Throws a ReferenceError in "use strict" mode
  var y = 2;
}

foo();

console.log(x); // 1
console.log(y); // ReferenceError: y is not defined