[일일 기록] var let const

1. 유효한 시점의 차이

   밑에 코드를 보면 title이라는 변수를 만들기도 전에 콘솔창으로 title을 출력했는데 에러가 발생하는 것이 아니라 undefined가 출력된다. 선언이 나중에 되었지만 선언이 위로 올라간 듯한 현상을 호이스팅(hoisting)이라 한다.
   호이스팅은 선언 부분만 끌어올려짐!

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

console.log(title); // undefined
var title = 'hello world';
console.log(title); // hello world

var과는 다르게 let과 const는 변수 이전에 접근할 수 없기 때문에 예상치 못한 에러가 발생했을 때 원인을 파악하기 쉬움

1. 중복 선언(재선언)의 차이

   var는 중복 선언이 가능하다보니 실수로 이미 선언된 변수명을 중복 선언하면 선언되었던 값이 사라진다.
   let과 const는 중복 선언 불가능

2. ★ 변수의 유효 범위, 스코프(scope) 차이

   var의 스코프는 함수 단위로만 구분

var x = 3;  // 전역 변수

function myFunc() {
var y = 4; // 지역 변수
console.log(x);  // 3
console.log(y);  // 4
}

myFunc();
console.log(x);  // 3
console.log(y);  // ReferenceError

x는 전역 변수로 함수 안에서나 밖에서나 자유롭게 사용 가능하지만 y는 지역 변수로 함수 밖에서 사용할 수 없다.

그러나 var는 함수단위로만 구분되기 때문에 조건문이나 반복문 안에서 새로운 변수를 만들게 되더라도 모두 전역 변수로 평가된다. 그래서 어떤 조건문이나 반복문에서 고유하게 사용할 수 있는 지역변수를 만들 수 없는 문제가 있음

var x = 3;

if(x < 4) {
var y = 3;
}

for(var i = 0; i < 5; i++){
console.log(i); // 0 1 2 3 4
}

console.log(x); // 3
console.log(y); // 3
console.log(i); // 5

let과 const는 중괄호가 사용되는 부분(코드 블록)을 기준으로 변수의 유효 범위를 구분

let x = 3;

if(x < 4) {
let y = 3;
}

for(let i = 0; i < 5; i++){
console.log(i); // 0 1 2 3 4
}

console.log(x); // 3
console.log(y); // ReferenceError
console.log(i); // 

if문으로 선언된 변수 y는 if문의 코드 블록 안에 지역 변수로 평가 되었기 때문에 if문 밖에서 사용할 수 없다.