HTML에서 JavaScript 변수 다루기: let vs var vs window

<script src='test.js'></script>
<script>
var userId = '늘푸른개발자';
</script>
<script src='test2.js'></script>

 

// test.js
console.log(‘@@TEST’, userId);

 

// test2.js
console.log(‘@@TEST2’, userId);

 

위 코드는 어떻게 동작할 것으로 예상하는가?

 

 test.js에서 userId가 선언되기도 전에 접근해서 에러가 날것처럼 보이지만 에러는 나지 않는다.

결과는 다음과 같다

undefined 
늘푸른개발자​

왜일까? 왜 에러가 나지 않고 정상적으로 동작했는가?

변수가 선언되기도 전에 호출했는데 어째서 동작하는가?

라는 질문이 나온다. 그게 정상이다.

그럼 자바스크립트가 비정상인가? 그렇다 자바스크립트의 var가 비정상적이다.

일반적이지 않게 즉 예상하지 않게 동작하기 때문에 var를 사용해서는 안된다. 

개념적으로 자바스크립트에는 호이스팅이라는 개념이 있어서 저렇게 동작하게 된다. (호이스팅은 따로 설명하겠다)

 

다른 경우를 보자. 

<script>
var userId = '늘푸른개발자';
console.log(userId);
console.log(window.userId);

let userNick = '늘푸른';
console.log(userNick);
console.log(window.userNick);
</script>

이번에는 어떻게 동작할 거 같은가?

결과는 다음과 같다

늘푸른개발자
늘푸른개발자
늘푸른
undefined

var로 선언하니까 window라는 전역변수에 프로퍼티로 들어가게 되었다. 

우리는 window의 전역변수에 넣을 생각은 없었는데 알아서 들어가 버렸다.

이게 무슨 일인가? 생각지도 못하는 일이 또 벌어졌다. 

 

<script>
 window.userId = '늘푸른개발자';
 delete window.userId;
 console.log(window.userId);
 
 var nickName = '소니아'
 delete window.nickName;
 console.log(nickName);
</script>

이번에도 어떻게 실행될 것 같은가?

둘 다 undefined가 되어야 할 거 같지 않은가? 놀랍게도 아니다.

undefined
늘푸른

nickName은 전역객체에서 사라지지 않고 영원히 남아 있는 것을 볼 수 있다.

 

지금까지 이야기했던 var에 대한 결과를 정리하면 다음과 같다

1. var를 script 태그 안에서 선언하면 전역변수인 window의 프로퍼티로 선언된다.

2. 선언하기도 전에 값에 접근할 수 있다.

3. window의 프로퍼티로는 제거할 수 없다.

 

1~3번의 모든 경우가 개발자가 예상하지 못하는 방향으로 동작하기 때문에 var는 절대로 써서는 안 된다.

전역으로 쓰고 싶은 경우가 있다면 window객체에 프로퍼티로 선언하여 사용하자.

var로 선언하면 window에 언제 할당되었는지도 모르는 변수가 삭제도 안된다는 게 말이 되는 일인가? 

 

결론 var를 사용하지 말고 값에 스코프에 맞게 let, const, window로 선언하자.