var vs let (const)

	var	let(const)
scope	function-scope	block-scope
hoisting	yes	no
global-object	yes	no
redeclaration	yes	no

1. function scope vs block scope

javascript에서 scope란 변수가 사용될 수 있는 범위를 뜻한다.

이를 근거로, function scope란 변수가 활용될 수 있는 범위가 function임을 뜻하고

block scope는 변수가 활용될 수 있는 범위가 { }(block)임을 뜻한다.

 

var로 선언된 변수는 function scope 속성을 가지고 있어 선언된 function 내에서라면 어디서든 사용할 수 있는 반면

let(또는 const)로 선언된 변수는 block scope 속성을 가지고 있어 선언된 block 내부에서밖에 사용할 수 없다.

See the Pen scope by zakelstorm (@zakelstorm) on CodePen.

2. Hoisting

hoisting은 변수가 초기화 되는 시점과 관련되어있다.

어떤 변수에 hoisting이 발생했다면 이는 코드 시작점에서 해당 변수가 undefined로 초기화 되었음을 뜻한다.

 

var로 선언된 변수는 hoisting 속성을 가지고 있어 선언된 function 내부에서라면 선언되기 이전이라도 사용될 수 있다.

반면에 let(또는 const)으로 선언된 변수는 hoisting 속성을 가지고 있지 않아 선언된 시점에 초기화되기 때문에 선언된 시점 이후부터 사용될 수 있다. 

See the Pen hoisting by zakelstorm (@zakelstorm) on CodePen.

3. create global object property

global object란 window object에 저장되어 있어 어디서든 사용가능한 object안 value를 뜻한다.

예를들어 대표적인 global object 중 하나는 alert가 되겠다.

 

코드의 top level에서 var로 선언된 변수는 global object가 되는 속성을 가지고 있어 전역변수 처럼 어디서든 쓸 수 있다. let으로 선언되었거나 함수 내부에서 선언된 var 변수는 window object에 추가되지않는다.

 

See the Pen global object property by zakelstorm (@zakelstorm) on CodePen.

4. Redeclaration

var 변수는 재선언이 가능하다.

반면 let변수는 재선언이 불가능하다.

var foo = "foo1";
var foo = "foo2"; // No problem, 'foo' is replaced.

let bar = "bar1";
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared