var, let and const

var name = "Velog";

name = "Eugene";

var를 사용하면 변수에 overwrite가 가능하다.
하지만, 협업하는 과정에서 다른 개발자가 다른 파일이나 같은 파일이지만 다른 위치에서 변수를 수정할 경우 의도치 않게 변수 값을 변경하는 불상사가 생길 수 있다.

따라서 의도하지 않은 overwrite을 막기 위해 const가 생겼다.

const name = "Velog";

name = "Eugene"; // error

Object의 경우 const를 사용해도 Object 명은 변경 불가능하지만 프로퍼티 값들의 변경은 가능하다.

const people = {
    name : "Velog"
};

people = "Blog"; // error
people.name = "Eugene"; // success

let은 이전의 var과 같이 overwrite이 가능하다.

let name = "Velog";

name = "Eugene";

Hoisting

Temporal Dead Zone (TDZ)

console.log(name);

var name = "Eugene"; // undefined

JS는 위에서부터 실행되기 때문에 정의되지 않았다는 결과를 출력한다.

console.log(name); // Uncaught ReferenceError

출력이 다른 이유는 JS에서 hoisting을 해주기 때문인데, hoisting은 변수 선언을 코드 상단으로 자동으로 이동 시켜주는 것인데

처음 예시를 든 코드를 출력 순서대로 나열해보자면,

var name;

console.(name);

name = "Eugene"; // Undefined

name은 선언되었지만 값을 지정해주지 않았기 때문에 Undefined을 출력하게 된다.

여기서 var 대신 let을 사용해보면다면

console.(name);

let name = "Eugene"; // ReferenceError

let은 hoisting을 막아준다.
이것이 let의 Temporal Dead Zone (TDZ)이다.

Block Scope

block scope, function scope

let과 const가 var과 다른 점은 block scope이 있다는 점이다.

우선 var은 block scope 내부에서 선언이 되었어도 외부에서 접근할 수 있다.

if(true) {
	var name = "Velog";
}

console.log(name); // velog

var은 block scope이 아닌 function scope을 따른다.

function examFunc(){
	var num = 10;
}

console.log(name); // ReferenceError

let, const는 block scope을 따르기 때문에 외부에서 접근할 수 없다.

if(true){
	let num = 10; // let or const
}

console.log(num); // ReferenceError

Reference