오래된 var

var 특

1. 블록 스코프가 없다.

var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다.

if (true) {
  var test1 = true; // var로 선언
  let test2 = true; // let으로 선언
}

alert(test1); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)
alert(test2); // Error: test2 is not defined

for (var i = 0; i < 10; i++) {
  // ...
}

alert(i); // 10, 반복문이 종료되었지만 'i'는 전역 변수이므로 여전히 접근 가능합니다.

코드 블록이 함수 안에 있다면, var는 함수 레벨 변수가 된다.

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // 제대로 출력됩니다.
}

sayHi();
alert(phrase); // Error: phrase is not defined

오래 전의 자바스크립트에선 블록 수준 렉시컬 환경이 만들어지지 않았기 때문이다.

2. 변수의 중복 선언을 허용한다.

var user = "Pete";

var user = "John"; // 이 "var"는 아무것도 하지 않습니다(이전에 이미 선언됨).
// ...에러 또한 발생하지 않습니다.

alert(user); // John

let user;
let user; // SyntaxError: 'user' has already been declared

3. 선언하기 전에 사용할 수 있다.

var 선언은 함수가 시작될 때 처리된다. 전역 변수라면 스크립트가 시작될 때 처리된다.
함수 또는 스크립트 내에서 var로 선언한 변수는 선언 위치와 상관없이 본문이 시작되는 지점에서 정의된다.

function sayHi() {
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();

이렇게 변수가 끌어올려지는 현상을 '호이스팅(hoisting)'이라고 부른다.

선언은 호이스팅되지만
할당은 호이스팅되지 않는다.

function sayHi() {
  alert(phrase);

  var phrase = "Hello";
}

sayHi(); //undefined

즉, var로 선언한 변수는 범위 내의 어디서든 참조할 수 있지만, 변수에 무언가를 할당하기 전까진 값이 undefined이다.

✍️ 정리

var 특
1. var로 선언한 변수는 블록 스코프가 아닌 함수 수준 스코프를 갖는다.
2. var 선언은 함수가 시작되는 시점(전역 공간에선 스크립트가 시작되는 시점)에서 처리된다.

var만의 특성은 대부분의 상황에서 좋지 않은 부작용을 만들어낸다.
let이 표준에 도입된 이유가 바로 이런 부작용을 없애기 위해서이다.

변수는 블록 레벨 스코프를 갖는 게 좋으므로 이제는 let과 const를 이용해 변수를 선언하는 게 대세가 되었다.