[javascript] let과 var의 차이 그리고 호이스팅이란?

javascript에서 자주 사용하는 let과 var에 사용방법과 차이에 대해 알아보겠습니다.

변수 선언

javascript에서 변수를 선언하는 방법으로는 const, let, var 이렇게 세 가지 방법이 있습니다.

const

변하지 않고 항상 같은 값을 나타낼 때 사용한다.

const id = "오늘의하루";
const password = "12345";
//id와 password는 절대 변하지 않는 상수입니다.

password = "asdf";
//이렇게 변경하려고 하면 에러가 나옵니다.

위에서 선언한 id와 password는 절대 변하지 않는 상수입니다.

호이스팅

javascript를 실행하기 전 선언된 변수 및 함수를 모두 모아 유효 범위 최상단에 선언하게 되고 이를 실행하는 것을 말한다.

• var의 경우 선언과 초기화를 동시에 하기 때문에 문제가 발생한다.

console.log(a);
var a = 1;
console.log(a);

/*결과값
undefined
1
*/

• let의 경우 TDZ라는 것을 만들어서 변수가 나오기 전까지는 접근할 수 없게 만들었다.

console.log(a);
let a = 1;
console.log(a);
/*결과는 오류
ReferenceError : Cannot access 'a' before initialization.
*/

var

• 변수가 중복되어도 오류 없이 실행된다.

var a = 1;
console.log(a);
var a = 2;
console.log(a);
//여기서 오류가 나지 않는다...

• 지역변수와 전역 변수의 경계가 모호하다.
  
  • function내에 있는 변수를 제외한 모든 변수를 전역 변수로 인지한다.

function test(){
	var a = 1;
	console.log(a);
}
test();
//결과값 : 1;
console.log(a);
//오류

for (var i = 1; i < 3; i++){
	console.log(i);
}
console.log(i);
//결과값 : 1 2 3

let

• 변수가 중복되지 않게 변경되었습니다.
• 지역변수와 전역 변수의 경계가 확실해졌다.

for (var i = 1; i < 3; i++){
	console.log(i);
}
console.log(i);
//결과값 : 1 2 까지만 나오고 에러 발생