변수를 다시 선언한다고 해서 기존 값이 곧바로 사라지는 것은 아닙니다. 해당 변수에 새로운 값이 할당되기 전까지는 원래 값이 그대로 유지됩니다.
값이 대체되는 경우: 재선언 후 재할당
다음 예제에서 변수 x와 y에는 각각 4와 8이 할당되어 있습니다. 이후 같은 이름으로 변수를 다시 선언하고 새로운 값(7과 10)을 할당하면, 이전 값은 새 값으로 대체되어 출력 결과에 반영됩니다.
예제
<html>
<body>
<script>
var x = new Number(4);
var x = 7; // 재선언 후 새 값 할당
var y = 8;
var y = 10; // 재선언 후 새 값 할당
document.write(x);
document.write("</br>");
document.write(y);
</script>
</body>
</html>
출력 결과
7 10
위 출력에서 볼 수 있듯이, 재할당된 새로운 값이 이전 값을 완전히 덮어쓰게 됩니다.
값이 유지되는 경우: 재선언만 하고 재할당하지 않음
반면 아래 예제에서는 변수를 다시 선언하기만 했을 뿐, 새로운 값은 할당하지 않았습니다. 이 경우 변수들은 처음에 가졌던 원래 값(4와 8)을 그대로 유지합니다.
예제
<html>
<body>
<script>
var x = new Number(4);
var x; // 재선언만 수행, 값 미할당
var y = 8;
var y; // 재선언만 수행, 값 미할당
document.write(x);
document.write("</br>");
document.write(y);
</script>
</body>
</html>
출력 결과
4 8
참고: let과 const에서는 재선언이 불가능합니다
위 예제는 ES5 방식인 var의 동작입니다. var는 같은 스코프 내에서 중복 선언이 허용되기 때문에 이런 결과가 나타납니다. 하지만 ES6에서 도입된 let과 const는 같은 스코프 안에서 동일한 이름으로 다시 선언하면 SyntaxError가 발생합니다. 따라서 현대적인 JavaScript 개발에서는 의도치 않은 값 덮어쓰기를 방지하기 위해 let 또는 const 사용이 권장됩니다.