변수의 유효범위(스코프 scope)

  변수의 유효범위는 어떤 변수가 정의되어 있는 범위를 이르는 말이다. 변수가 선언된 위치에 따라 이 유효범위가 전역이냐 지역이냐로 나뉘어진다. 자바 스크립트에서 전역 변수는 코드 전역에서 정의되어 있지만 어떤 함수 안에 정의된 지역 변수는 해당 함수 내에서만 유효하다. 함수 안에서 선언한 변수뿐만 아니라 매개변수 또한 지역 변수다.

  지역 변수(매개변수 포함)와 전역 변수의 이름이 같을 때에는 지역 변수가 전역 변수를 감추게 된다. 

var a = "global" // 전역 변수 선언
function check1() {
  var a = "local" // 지역 변수 선언
  return a // 지역 변수 반환
}
check1() // "local" 반환

  

  전역 변수를 선언할 때에는 var 없이 선언할 수 있지만 var 없이 지역 변수를 선언할 때에는 전역변수가 선언된다. 

a = "global" // var 없이 전역 변수 선언
function check2() {
  a = "local" // 전역 변수 수정
  b = "local"
  return [a , b]
}

function check3() {
  b = "new"
  return b
}
check2() // ["local","local"] 반환
check3() // "new"반환 

위에서 보듯이 함수안에서 var 없이 변수를 선언하면 암묵적으로 전역 변수가 생성된다. 이러한 변수의 유효범위는 함수안의 함수에 지역 변수를 선언함으로써 중첩이 가능하다.

자바스크립트는 변수 유효범위는 블록 유효범위가 아닌 함수 유효범위를 사용한다. 따라서 어떤 함수 내에 선언된 모든 변수는 그 함수 어디서든 유효하다. 이 특성은 변수가 선언되기 전에도 똑같이 유효하다는 말이다. 자바스크립트의 이 특성을 호이스팅(hoisting)이라고 한다.

var a = "global" // 전역 변수 선언
function check4() {
  console.log(a)
  var a = "local" // 지역 변수 선언
  return a // 지역 변수 반환
}
check4() // undefined 출력
         // "local" 반환 

check4 함수에서 1번째 줄의 console.log(a) 에서 "global"이 출력되지 않고 undefined가 출력되는 이유는 지역변수 a의 선언이 실제로는 함수의 맨 위에서 이뤄져서 같은 이름의 전역변수를 사용할 수 없기 때문이다.

함수가 실질적으로 작동하는 방식

function check4() {
  var a // 지역 변수 선언 
  console.log(a) // undefined
  a = "local" // 지역 변수에 값 할당
  return a // 지역 변수 반환
}

위 코드에서 볼 수 있듯이 변수의 선언은 함수의 최상단에서 이뤄지고 초기화는 원래 작성했던 코드의 위치에서 이뤄진다.