자바스크립트를 배우면서 가장 초반에 배우는 주요 개념은 let과 var의 차이점이다.
개념을 공부할 때는 이해가 되서 금방 지나갔지만 시간이 지나 잊어버리는 경우가 많아 복습도 할겸 let과 var의 차이첨을 정리해서 적어보고자 한다.

var

• var hoisting 덕분에 변수를 선언하기도 전에 값 할당이 가능하다.

  • var hoisting: 선언의 위치에 상관 없이 제일 위로 선언을 끌어올리는 것
  • hoisting: 인터프리터가 코드를 로드할 때 변수의 선언을 항상 코드 내의 최상위로 끌어올리는 것을 의미한다. 선언과 동시에 대입하는 코드는 호이스팅 하지 않는다. 즉 선언부는 호이스팅하지만 대입부는 호이스팅하지 않는다.

• var 키워드를 생략하고 사용할 수 있다.

• 중복 선언이 가능하다.

  var name = 'Hong';
  console.log(name); //Hong
  
  var name = 'GunWoo';
  console.log(name); //GunWoo

• 함수 레벨 스코프를 가진다.

   function func() {
  	  if (true) {
  		  var a = 5;
  		  console.log(a); //5
  	  }
  	  console.log(a); //5
   }
  
   func()
   console.log(a); //Uncaught ReferenceError: a is not defined

  • 함수 레벨 스코프 (Function-level scope)
    함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

let

• 호이스팅이 발생하지만 JS 내부에서 코드 실행 전 변수 선언만 해둘 뿐 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행한다. 즉 변수 선언 전에 값 할당이 불가능하다. (변수 선언문을 만나기 전까지는 변수 값을 참조할 수 없다.)

• 중복 선언이 불가능하다.

• 블록 레벨 스코프를 가진다.

  function func() {
  	  if (true) {
  		  var a = 5;
  		  console.log(a); //5
  	  }
  	  console.log(a); //5
  }
  
  func()
  console.log(a); //Uncaught ReferenceError: a is not defined

  • 블록 레벨 스코프 (Block-level scope)
    모든 코드 블록(함수, if 문, for 문, while 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉 코드 블록 내부에서 선언한 변수는 지역 변수이다.
    

var과 let의 블록 스코프 차이

scope란 쉽게 말해 밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있는 것을 말한다.

{
	var a = 3;
	console.log(a); //3
}

console.log(a); //3

{
	let a = 3;
	console.log(a); //3
}

console.log(a); //Uncaught ReferenceError: a is not defined

var vs let

거의 모든 문서나 자료를 보면 let과 const가 생긴 ES6부터는 var사용을 거의 금기시하고 있다.
그 이유는 위의 var의 특징에서 봤듯이 var의 함수 레벨 스코프와 var 키워드 생략 가능이라는 특징이 코드 개발에 어려움을 줄 수 있기 때문이다.
함수 레벨 스코프로 인해 for문의 변수 선언문에서 선언한 변수를 for문의 코드 블록 외부에서 참조할 수 있고, var 키워드 생략 가능 덕분에 암묵적인 전역 변수를 생성할 가능성이 크기 때문이다.
따라서 ES6 이후 사용자는 var 대신 let을 사용하여 개발에 어려움이 없도록 하자.