1.4.2 변수의 유효 범위, 스코프

1.4.2 변수의 유효 범위, 스코프

변수의 유효 범위를 스코프(scope)라고 하는데, 자바스크립트에는 다양한 스코프가 있음.

전역 스코프

전역 레벨에 선언하는 것을 전역 스코프(global scope)라고 함. 이 스코프에서 변수를 선언하면 어디서든 호출할 수 있게 됨. 브라우저 환경에서 전역 객체는 window, Node.js 환경에서는 global이 있는데, 이 객체에 전역 레벨에서 선언한 스코프가 바인딩됨.

var global = 'global scope'

function hello() {
  console.log(global)
}

console.log(global) // global scope
hello() // global scope
console.log(global === window.global) // true

위 코드에서 global이라는 변수를 var와 함께 선언했더니 전역 스코프와 hello 스코프 모두에서 global 변수에 접근할 수 있는 것을 확인할 수 있음.

함수 스코프

다른 언어와 달리 자바스크립트는 기본적으로 함수 레벨 스코프를 따름. 즉, {} 블록이 스코프 범위를 결정하지 않음.

if (true) {
  var global = 'global scope'
}

console.log(global) // 'global scope'
console.log(global === window.global) // true

 

var global은 분명 {} 내부에 선언돼 있는데, {} 밖에서도 접근이 가능한 것을 확인할 수 있음. 이는 기본적으로 자바스크립트는 함수 레벨 스코프를 갖고 있기 때문.

function hello() {
  var local = 'local variable'
  console.log(local) // local variable
}

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

 

함수 블록 내부에서는 일반적으로 예측하는 것과 같이 스코프가 결정되는 것을 볼 수 있음.

스코프 중첩

만약 스코프가 중첩돼 있다면 어떻게 될까?

var x = 10

function foo() {
  var x = 100
  console.log(x) // 100

  function bar() {
    var x = 1000
    console.log(x) // 1000
  }

  bar()
}

console.log(x) // 10
foo()

 

자바스크립트에서 스코프는, 일단 가장 가까운 스코프에서 변수가 존재하는 지를 먼저 확인해 보는데, 이러한 사실을 알고 있다면 위 예제에서 x가 어디에 선언돼 있는지에 따라 값이 달라질 수 있음을 쉽게 확인할 수 있음.