[JS] var let const 비교

중복 선언 허용

	var	let, const
중복 선언 허용	O	X

한 스코프에서 같은 변수를 let이나 const로 두 번 선언하면 에러가 발생한다.

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

var는 변수의 중복 선언을 허용한다. var로 같은 변수를 여러 번 중복으로 선언할 수 있지만 이미 선언된 변수에 var를 사용하면 두 번째 선언문은 무시된다.

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

alert(user); // John

스코프

	var	let, const
스코프	함수 스코프	블록 스코프

함수를 기준으로만 적용되는 스코프를 함수 스코프, 코드 블록({} 중괄호로 감싸진 부분)을 기준으로 적용되는 스코프를 블록 스코프라고 한다.

var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능하다.

if (true) {
  var test = true; // 'let' 대신 'var'를 사용함
}

alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

var는 코드 블록을 무시하기 때문에 test는 전역 변수가 된다. 전역 스코프에서 이 변수에 접근할 수 있다.

두 번째 행에서 var test가 아닌 let test를 사용했다면, 변수 test는 if문 안에서만 접근할 수 있다.

if (true) {
  let test = true; // 'let'으로 변수를 선언함
}

alert(test); // Error: test is not defined

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

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

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

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

호이스팅

let과 const로 선언한 변수는 선언되기 이전에 사용될 수 없다.

console.log(myVariable);
let myVariable; // Uncaught ReferenceError: Cannot access 'myVariable' before initialization

하지만, var 변수는 함수 스코프를 기준으로 선언되기 이전에도 변수에 접근이 가능하다.

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

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

따라서 아래 두 예제는 동일하게 동작한다.

function sayHi() {
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();

function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}
sayHi();

var phrase가 위로 이동한 것처럼 작동된다.