JavaScript 변수 (var)

자바스크립트는 변수를 선언하는 방법이 3가지가 있다.

우선 가장 먼저 존재하던 var에 대해 알아보고, let과 const가 나올 수밖에 없단 문제점에 대해 다루겠다.

 

 

Var

1. var로 선언된 변수는 전역 또는 함수 내에서 사용이 가능하다.

즉, 함수 외부에서 사용이 된다고 하면 전역에서 선언된 것이며

함수 내부에서 사용이 된다고 하면 함수 내에서 선언된 것이다.

var num1 = 0
function func(){
  var num2 = 0;
}

console.log(num1); // 0
console.log(num2); // ReferenceError: num2 is not defined

num1은 전역으로 선언된 변수라서 제대로 된 값을 출력하지만, 

num2는 func() 함수 내에 선언된 변수라서 함수 밖에서는 사용할 수 없어서 에러를 발생시킨다.

 

2. var로 선언된 변수는 재선언이 가능하며, 업데이트가 가능하다.

위에서 말한, 전역 또는 함수 내를 변수의 범위(scope)라고 한다.

만약 범위가 같다면 재선언을 해도 에러가 발생하지 않으며 업데이트 역시 가능하다.

var num = 0;
var num = 1;
num = 2;
console.log(num) // 2

 

3. 호이스팅

호이스팅이란, 변수와 함수 선언이 맨 위로 이동되어 실행되는 것 같이 보이는 자바스크립트의 기능이다.

다음 코드를 살펴보자.

console.log(num); // undefined
var num = 0;

이 코드에서 선언이 되지도 않은 num을 먼저 출력하고 뒤에 선언을 했다.

그럼에도 불구하고 에러가 발생하지 않는 것은 자바스크립트의 호이스팅 때문이다.

 

즉, 코드를 실행하기 전에 모든 선언에 대한 메모리 공간을 미리 할당하여 undefined로 초기화를 시켜놓기 때문이다.

따라서 에러 없이 위의 코드가 실행이 되는 것이다.

 

 

원래의 자바스크립트에는 변수는 var로만 선언이 가능했는데,

여러 문제들로 인하여 let과 const라는 개념이 생기게 된 것이다.

 

4. var의 문제점

첫 번째로는 var는 선언을 중복해서 할 수 있다는 점이다.

위의 2번에서 본 재선언이 이에 해당한다.

 

두 번째로는 범위가 전역 또는 함수에 그친다는 점이다.

if문, for문 등등의 블럭에서 쓰인 변수들은 전역으로 선언이 되는 것이라서 해당 블럭이 종료해도 블럭 내에서 쓰인 변수를 쓸 수 있다.

for(var i = 0; i < 2; i++){
  console.log(i);
}
console.log("for문 종료", i);

// 0
// 1
// for문 종료 2

위의 코드로 for문의 반복을 위해 쓰인 i 변수가 for문이 종료되어도 남아 있다는 것을 확인할 수 있다.

 

세 번째로는 위의 3번에서 언급한 호이스팅이다.

에러처럼 보이지만 실행이 된다는 것은 단점이 될 수밖에 없다.

 

 

이러한 문제점들 때문에 let과 const가 나오게 되었다.

다음 페이지에서는 let과 const에 대해서 다루도록 하겠다.

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)