자바스크립트(JavaScript) - 변수 범위(scope)

보통 c 혹은 java 만 해본지라.. 변수를 선언하고 그 변수가 미치는 범위(scope)는 { } 를 기준이라는 게 머리속에 콱 박혀있다. javascript 역시 똑같을 것이라고 생각했는데 그게 아니었다. 역시 난 자바스크립트를 허투루 배웠다. -_-

변수의 종류는 2가지가 있다.

전역변수(global variable) : function 밖에 선언한 변수를 말한다. 현 파일 어디에서나 접근가능한 변수이다.

지역번호(local variable) : function 안에 선언한 변수를 말한다. 이건 그 function 안에서만 접근가능한 변수이다.

이거 2개만 기억하면 자바스크립트 범위에 대한 개념은 끝이라고 보면 된다. 전역변수와 지역변수를 나누는 function 에 사용하는 { } 를 제외한 나머지 { } 들은(일반적으로 사용하는 for, if, case 등등에 쓰이는 { } 을 말한다.) 변수범위에 영향을 주지 않는다.

역시나 예를 봐야 명확하다.

if (true) {
  var x = 5;
}
console.log(x);

일반 자바(java)에서 이런 문장이면 변수 x는 존재하지 않는다고 에러를 발생킨다. 왜냐면 x 라는 변수는 if 문 안에서만 사용할 수 있는 범위의 지역변수이기 때문이다. 하지만 자바스크립트는 이런 { } 블럭에 대한 범위가 없다. 정상적으로 콘솔창에는 5 라는 값을 출력한다.

그리고 또다른 특징이 있는데, 나중에 선언된 변수를 참조할 수 있다. 예를 보자.

/**
 * Example 1
 */
console.log(x === undefined); // logs "true"
var x = 3;
 
 
/**
 * Example 2
 */
// will return a value of undefined
var myvar = "my value";
 
(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();

자 Example 1 을 보면, 분명 x 가 선언되기도 전에, x 를 undefined 와 비교하고 출력하려 하고 있다.  java 에서나 c에서나 이해할 수 없는 구조이지만, 자바스크립트는 가능하다. 우선 어디서든 x 라는 변수를 선언한 줄이 있다면, 그 앞 로직에서 x 변수를 사용하고 접근할 수 있다는 것이다. 2번째 예제는 전역변수, 지역변수로 myvar 를 선언했다. 하지만 지역변수가 우선이므로 myvar 가 "local value" 라는 값을 할당하기 전에 console 을 찍어봤으므로 undefined 라는 값이 나오게 된다.

마지막으로 상수역할을 할 수 있는 const 키워드이다. 예제 보자.

// THIS WILL CAUSE AN ERROR
function f() {};
const f = 5;
 
// THIS WILL CAUSE AN ERROR ALSO
function f() {
  const g = 5;
  var g;
 
  //statements
}

const 키워드를 쓸 때 함수명과 같은 변수명은 안되며, 이미 const 키워드로 정의한 변수명으로 똑같이 지역변수를 하나 더 만들게 되면 에러라는 이야기를 하고 있다.

위예제는 아래 링크를 참조해서 사용했다.

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals