표로 정리해보면 다음과 같은 특징을 가지고 있다

var는 global scope에 들어가므로 이는 built-in을 손상시킬 가능성을 높일 수 있다
따라서 우리는 var보다는 let을 권장하며 변하지 않는 데이터라면 const 사용도 권장한다

🖥 예제 코드 살펴보기

<script>
// console.log(v0, l0); 선언 전에 접근 할 수 없다.
var v0 = 'v0';	// -> global scope
let l0 = 'l0';	// -> script scope
console.log(v0, l0);

// var v0 = 'v00';
// let l0 = 'l00';

function fn1(){
    v0 = 'fn1-v0';
    l0 = 'fn1-l0';		// 키워드가 없이 할당된 것은 상위를 참조하여 변경
    console.log(v0, l0);	//fn1-v0 fn1-l0
}
fn1();
console.log(v0, l0);

function fn2(){
    var v0 = 'fn2-v0';
    let l0 = 'fn2-l0';	// 키워드가 존재하면 local에서 작동
    console.log(v0, l0);	// fn2-v0 fn2-l0
}
fn2();
console.log(v0, l0);		// fn1-v0 fn1-l0

{
    var v0 = 'block-v0';	// block scope 작동 안함
    let l0 = 'block-l0';	// block scope 작동
    console.log(v0, l0);	// block-v0 block-l0
}
console.log(v0, l0);		// block-v0 fn1-l0

var i = 'I';
for(var i=0; i<1; i++){
    console.log(i);			// 0 
}
console.log(i);				// 1

let j = 'J';
for(let j=0; j<1; j++){
    console.log(j);			// 0
}
console.log(j);				// J

</script>

🧐 알게 된 것

var는 블록 스코프를 가지지 않기에 블록 내부에서 선언하고 할당하여도 global scope로 올라간다. 예를 들어 반복문안에서 증감식에 영향을 주는 변수를 var로 선언하면 이는 원래 선언된 값을 바뀌게 하므로 주의가 필요하다. 또한 재선언과 재할당이 모두 가능하기에 이는 오류를 초래할 수 있다.

하지만 let은 재할당은 가능하지만, 재선언은 불가한 엄격적인 모드를 가지고 수행하기에 오류발생을 줄일 수 있다

debugger를 사용해 컨텍스트에 어떻게 할당되는지 살펴봄으로써 var, let, const에 대한 구분을 명확하게 할 수 있었다. 이를 제대로 사용하여 앞으로의 프로젝트를 수행해야 겠다고 다짐했다

이번 수업을 듣고 싶다면 🎥 생활코딩 - var VS let VS const를 참고하길 바란다