Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 변수를 선언하지 않고 사용하면 어떻게 될까? 스코프 체인 동작 원리

JavaScript에서 변수 선언 없이 사용하면 어떻게 될까?

JavaScript에서는 var 키워드 없이도 변수를 사용할 수 있습니다. 전역 스코프(global scope)에서 변수를 선언하지 않은 채 값을 할당하면, 해당 변수는 자동으로 전역 객체(window)의 속성이 됩니다. 이처럼 선언되지 않은 변수에 접근할 때 JavaScript 엔진은 스코프 체인(scope chain)을 따라 올라가며 변수를 검색합니다.

즉, 함수 내부에서 var 없이 변수에 값을 할당하면 지역 변수가 아니라 상위 스코프, 최종적으로는 전역 스코프의 변수를 덮어쓰거나 새로 생성하게 됩니다. 아래 예제를 통해 그 동작 방식을 살펴보겠습니다.

예제 코드

<html>
<body>
<script>
var rank = 5;
points = 50;   // var 없이 선언 → 암묵적 전역 변수
marks = 300;   // var 없이 선언 → 암묵적 전역 변수

// 익명 함수(즉시 실행 함수)
(function() {
  points = 100;    // 지역 선언이 없으므로 전역 points를 덮어씀
  var rank = 4;    // 이 함수 스코프에 새로운 rank 변수 생성
  var marks = 900; // 이 함수 스코프에 새로운 marks 변수 생성
  document.write(rank + "\r\n");   // 4 출력
  document.write(points + "\r\n"); // 100 출력
  document.write(marks + "\r\n");  // 900 출력
})();

document.write('<br/>');
document.write('<br/>');
document.write(rank + "\r\n");   // 5 출력
document.write(points + "\r\n"); // 100 출력
document.write(marks + "\r\n");  // 300 출력
</script>
</body>
</html>

실행 결과 분석

익명 함수 내부:

  • rankvar로 지역 선언되었으므로 함수 안에서 4가 출력됩니다.
  • points는 함수 내부에 선언이 없기 때문에 스코프 체인을 따라 전역 변수를 찾아가 100으로 덮어씁니다.
  • marks 역시 var로 지역 선언되었으므로 함수 안에서 900이 출력됩니다.

함수 실행 이후(전역 스코프):

  • rank는 여전히 전역 값 5입니다. 함수 내부의 변경은 지역 변수에만 영향을 주었기 때문입니다.
  • points는 함수 내부에서 전역 변수를 직접 수정했으므로 100으로 바뀌어 있습니다.
  • marks는 전역 값 300 그대로 유지됩니다.

주의할 점

이러한 암묵적 전역 변수 생성은 의도치 않은 버그의 원인이 되기 쉽습니다. 코드 최상단에 'use strict';(엄격 모드)를 선언하면 선언되지 않은 변수에 값을 할당할 때 오류가 발생하여 이런 실수를 사전에 방지할 수 있습니다. 또한 ES6 이상 환경에서는 블록 스코프를 지원하는 letconst를 사용하는 것이 가장 안전하고 권장되는 방법입니다.