JavaScript: 전역 변수와 지역 변수 명칭이 같을 경우의 위험성

JavaScript에서 전역 변수와 지역 변수의 명칭이 동일할 경우 예기치 못한 지점에서 undefined로 취급되는 문제가 발생할 수 있다. 간단한 소스 코드로 예를 들어 본다.

var test = 'a';

console.log(test);

function func() {
  console.log(test);
}

func();

첫 번째 console.log(test)를 실행해 보면 콘솔에 당연히 'a'가 뜬다. func() 함수 안에서 console.log(test)를 찍어도 마찬가지로 test가 이미 선언된 전역 변수로 인식되어 마찬가지로 콘솔에 'a'가 뜬다.

하지만 다음 소스 코드처럼 func() 함수 내에서 console.log(test) 이후에 test라는 지역 변수를 선언할 경우 문제가 발생할 수 있다.

var test = 'a';

console.log(test);

function func() {
  console.log(test);

  var test = 'b';

  console.log(test);
}

func();

이 경우 func() 함수의 첫 번째 console.log(test)는 콘솔에 undefined를 출력한다(물론 함수 밖에서 호출된 console.log(test)는 콘솔에 기존과 동일하게 'a'를 출력하고, func()의 두 번째 console.log(test)는 콘솔에 'b'를 출력한다). 그 이유는, func() 함수 안에 test라는 이름의 지역 변수가 선언되므로 함수의 첫 번째 console.log(test)에서 test가 지역 변수로 인식되는데 아직 지역 변수 선언 전이므로 undefined가 된 것이다. 만약 해당 라인에서 test를 전역 변수로 인식시키려면 this.test로 바꾸어야 한다.

만약 코딩 중 실수로 이미 선언된 변수와 같은 이름의 새 변수를 선언하는 경우를 방지하고자 한다면, 가급적 var 대신 ES6에 도입된 let으로 변수를 선언하는 게 안전하다. 물론 ES6 이후 버전의 JavaScript를 사용하는 경우에 한한다.

let test = 'a';

console.log(test);

function func() {
  console.log(test);

  let test = 'b'; // 에러 발생

  console.log(test);
}

func();

위와 같이 수정된 소스 코드를 실행해 보면 콘솔에서 func() 함수 내 let test = 'b' 라인에서 변수명 중복이라는 오류 메시지가 뜨면서 코드의 실행이 정지된다(그리고 대개 IDE에서 해당 라인이 오류임을 미리 알려 줄 것이다). 이에 따라 변수 선언 시 var 대신 let 키워드를 쓰는 게 개발 시 변수명 중복으로 인한 오류를 예방하고 손쉽게 디버깅이 가능함을 알 수 있다.

이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.