var let const 변수

var let const는 변수를 선언하는 키워드들이다. letconst는 ES2015(ES6)에서 등장했다.

변수가 생성되는 과정

  1. Declaration (선언) : 스코프와 변수 객체가 생성, 스코프가 변수 객체 참조
  2. Initialization (초기화) : 변수 객체가 가질 값을 위해 메모리 공간을 할당
  3. Assignment (할당) : 변수 객체에 값을 할당

var

  • 선언이 일어나는 동시에 초기화가 됨. 이때, undefined 값 선언, 아직 할당되지 않은 상태
function hoist () {
	console.log(foo); // undefined
  	var foo = 1;
  	console.log(foo); // 1
};
hoist();

let, const

  • 선언과 메모리 할당이 동시에 일어나지 않음
  • 선언 단계에서 아직 초기화되지 않은 상태이며 ReferenceError을 나타냄. TDZ(Temporal Dead Zone)에 들어있음. 즉, 변수에 담길 값을 위한 공간이 메모리에 할당되지 않은 상태를 말한다.
function hoist () {
	console.log(foo); // ReferenceError
  	let foo = 1;
  	console.log(foo); // 1
};
hoist();

var vs. let, const

  • var는 함수 스코프를 갖는다
  • let, const는 블록 스코프를 갖는다
  • var는 함수 스코프의 최상단으로 hoisting 되고 선언과 동시에 undefined로 초기화 된다
  • let/const는 블록 스코프의 최상단으로 hoisting 되고 선언만 되고 값이 할당되기 전까지 어떤 값으로도 초기화되지 않는다
  • var는 글로벌 스코프에서 선언되었을 경우 글로벌 객체에 바인딩된
var foo = 1
console.log(window.foo) // 1
  • let/const는 글로벌 스코프에서 선언되었을 경우 글로벌 객체에 바인딩 되지 않는다.
let foo = 1
console.log(window.foo) // undefined
  • var는 재선언이 가능하다
  • let/const는 재선언이 불가능하다
  • var/let는 재할당이 가능하다
  • const는 선언과 초기화가 동시에 일어나야하며 재할당이 불가능하다

** Hoisting :함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것. (var, 함수선언식)

좋은 웹페이지 즐겨찾기