JavaScript에서 `var`로 변수 선언에 대해 알아보기

JavaScript에서 var로 변수 선언에 대해 알아보기

소개

과거에는 JavaScript에서 변수를 선언할 때 var 키워드를 주로 사용했습니다. 그러나 let과 const가 도입된 이후, var는 사용되지 않는 경우가 많습니다. 그래도 여전히 기존 코드나 오래된 자료에서 var를 볼 수 있으니, var의 특징과 사용이 줄어든 이유에 대해 알아보겠습니다.

var 변수의 선언과 사용

var 키워드는 let과 유사하게 변수 이름을 지정하여 변수를 선언할 수 있습니다. 선언과 동시에 값을 할당할 수도 있습니다.

예시:

var myVariable;

myVariable = 'codeit';

var myVariable = 'codeit'; // 선언과 동시에 할당

var의 단점과 사용이 줄어든 이유

1. 중복 선언 허용

   • var 키워드로 선언된 변수는 중복 선언이 가능합니다. 기존 변수에 값이 재할당되는 것이 아니라 변수 선언 자체가 다시 이루어져 코드에서 오류를 유발할 수 있습니다.

   var myVariable = 'codeit';
   console.log(myVariable); // 'codeit'
   
   var myVariable = 'Codeit!';
   console.log(myVariable); // 'Codeit!'

   이처럼 중복 선언을 허용하면 변수 이름이 의도치 않게 중복되어 코드의 가독성과 안정성이 떨어집니다.

2. 함수 스코프

   • var 키워드는 함수 스코프만을 따르며, 블록 스코프를 따르지 않습니다.
   • 블록 스코프를 따르는 let과 const와 달리, var로 선언된 변수는 함수 블록에서만 구분됩니다.

   {
       var x = 3;
   }
   console.log(x); // 3
   
   function myFunction() {
       var y = 4;
   }
   console.log(y); // Uncaught ReferenceError: y is not defined

   이처럼 함수 스코프에 의존하면 블록 스코프를 활용할 수 없어 코드의 의도에 맞게 동작하지 않을 수 있습니다.

3. 호이스팅 (Hoisting)

   • var로 선언한 변수는 코드 실행 전에 스코프의 최상단으로 "끌어올려져" 사용됩니다. 이를 호이스팅이라고 부르며, 코드의 흐름을 혼란스럽게 할 수 있습니다.

   console.log(myVariable); // undefined
   var myVariable = 2;
   console.log(myVariable); // 2

   이처럼 var 변수는 선언되기 전에 접근이 가능하여 예상하지 못한 결과를 초래할 수 있습니다.

   • 함수 선언 역시 호이스팅이 적용됩니다.

   sayHi();
   function sayHi() {
       console.log('hi');
   }

   이 코드에서 함수 호출이 함수 선언보다 위에 위치해도 오류 없이 작동합니다. 하지만, 이는 코드 흐름을 방해할 수 있습니다.

결론

var 키워드는 과거 JavaScript에서 변수를 선언할 때 사용되었지만, 중복 선언 허용, 함수 스코프, 호이스팅 등의 이유로 현재는 잘 사용되지 않습니다. 코드를 작성할 때는 가능하면 let과 const를 사용해 안정성과 가독성을 높이세요.