Javascript - var

Javascript의 ES5까지는 var 키워드로 변수를 선언할 수 있는 유일한 방법이었습니다.

 

var의 특정을 살펴보면

• 어떤 scope에서도 참조하고, 변경할 수 있습니다.
• var는 함수 레벨 스코프(Function-level scope)이면서 전역 변수(globally-variable)입니다. 즉,  함수 안에 있는 코드 블 록만을 scope로 인정함과 동시에 함수 외부에 선언 할 경우 어떤 변수 영역 내에서도 접근할 수 있습니다.

전역 변수(globally-varialbe)

다음 예를 살펴봅시다. 

var x = 1;

console.log(x); // 1

var x = 2;

console.log(x); // 2

x = 3

console.log(x); // 3

 x의 값이 1 이라는 변수를 var에 할당했습니다. 하지만 중간에 x를 2나 3으로 바꾸어 주면 x의 값이 변하는 것을 할 수 있습니다. 

 

 이렇게 코드가 간단할 경우에는 변수 x의 값이 바뀌었다는 것을 알아차리기 쉽지만 복잡한 코드에 var를 사용하여 변수명이 겹치는 경우 코드가 엉키게 되는 것을 쉽게 예상해 볼 수 있습니다.

 

함수 레벨 스코프(Function-level scope)

Function-level scope가 어떤의미일까요?

예시로 한번 살펴봅시다.

 

var x = 1;
console.log(x) // 1

function func() {
  x = 3;
  var z = 2;
  console.log(x, z) // 3, 2
}

func();

console.log(x); // 3
console.log(z); // ReferenceError: z is not defined

 

 x를 전역변수로 값을 1로 주었습니다. 다음 코드로 func이라는 함수 안에 x의 값을 3으로 변경하였을 경우에 함수 밖에서의 변수 x의 값도 변경되는 것을 확인할 수 있습니다. 

 

 하지만 함수 안에서 할당된 변수 z는 함수 밖에서 Error가 발생하는 것을 볼 수 있습니다.

 

다음 예시에서 func이라는 함수 안에 변수들의 상황을 바꾸어 보면 재미있는 결과가 나오는 것을 확인할 수 있습니다.

var x = 1;
console.log(x) // 1

function func() {
  var x = 3;
  z = 2;
  console.log(x, z) // 3, 2
}

func();

console.log(x); // 1
console.log(z); // 2

위에 예시와 다른 점은 func 함수 안에 있는 x를 var에 할당해주었고 z를 아무것도 할당해주지 않았습니다. 이 경우 z는 전역변수로 할당이 됩니다. 즉, z가 func이라는 함수 안에 있지만 위 예시와는 다르게 함수 밖에서도 선언이 가능합니다

 

Hoisting

var에 대해서 공부하다 보면 Hoisting이라는 용어를 볼 수 있습니다.

Hoisting이란 쉽게 말해서 var를 나중에 선언하는 것이 가능하다라고 생각하시면 되겠습니다.

 

예를 한번 살펴 봅시다.

a //ReferenceError: a is not defined

당연히 코드를 a만 작성하면 Error가 발생합니다. 하지만 다음과 같은 상황을 살펴봅시다.

a
var a 
//undefined

a만 코드를 작성한 뒤 바로 다음 코드에 a에 var를 선언해주었더니 error가 발생하는 것이 아니라 undefined가 선언되었습니다.

b = 2
var b

// 위 선언은 아래과 같다고 이해하시면 됩니다.

var b =2
b

Hosting이란 신용카드로 물건을 산 뒤 나중에 신용카드 대금을 갚는거랑 비슷하다고 생각하시면 되겠습니다.

 

 

정리

 자바스크립트에 var에 특징들과 예시들을 살펴보았습니다. 사실 요즘에 var를 쓰는 경우는 잘 없는 것 같습니다. 그럼에도 var에 대한 특징을 살펴보니 흥미로운 부분들이 존재하고 현재 많이 사용되고 있는 변수인 let이나 const에 대한 이해도 더 깊어질 것 같습니다. 

 다음시간에는 let과 const의 특징들을 살펴보고 var, let, const 들을 각각 함께 살펴 차이점들을 살펴보도록 하겠습니다. 

출처

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d