var, let, const

개발을 할 때 let과 const로 변수를 선언하는 경우만 봤지 var를 사용하는 경우는 보지 못했다.(ES6전에 작성된 코드 제외)
주위에서 let, const만 써라~ 해서 사용했지 왜 얘네를 써야하는진 몰랐다.
왜 let과 const를 쓰게 되었을까?

var

ES6전엔 모든 변수를 선언할 땐 var를 붙여서 사용했다.

var는 '함수 스코프'

여기서 스코프(scope)란 변수가 사용될 수 있는 영역을 의미한다.

var는 '함수 스코프'이기 때문에 함수 영역 밖에서 변수를 호출할 경우 error가 발생한다.

function test() {
  var a = 'hi';
	
  if(true) {
    console.log(a) // 'hi'
		
    a = 'bye'
    console.log(a) // 'bye'
  }
	
  console.log(a); // 'bye'
}

test();
console.log(a); //ReferenceError

위의 코드를 살펴보면 test 함수에서 처음으로 선언된 a는 'hi'이다.
블록 단위인 if문에서 console.log(a)를 하면 결과는 'hi'가 나온다. 그런 뒤 a에 'bye'를 대입하면 a는 'bye'가 되고 다음 줄의 결과도 'bye'가 나온다.

var는 '함수 스코프'라고 했다. if문에서 대입된 'bye'를 그대로 기억하고 있어 test 함수 내의 마지막 console.log(a)에서 'bye'라는 결과값을 가지게 되는것이다.
test 함수 밖에서 a를 사용하려하면 ReferenceError가 발생한다. 이는 var가 함수 스코프임을 알려주는 예시이다.

문제점

var는 함수 스코프이기 때문에 반복문에서 정의된 변수가 반복문이 끝나고 나서도 계속 남아있는 문제점이 있다.

  for(var i = 0; i < 10; i++){
    console.log(i);  
  }

  console.log(i); //10

var의 호이스팅

자바스크립트에선 특이하게 호이스팅이라는 개념이 존재한다.
호이스팅은 스코프의 최상단으로 변수를 끌어올릴 수 있는 개념이다.

console.log(a); //undefined

var a = 10;

위의 예제처럼 변수가 선언되기 전에 사용을 한다면 에러가 발생하지 않고 undefined가 뜨게 된다.

이는 다음 과정과 같다.

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

a = 10;

let, const

ES6부터 나온 문법이다. 이 둘은 유사하지만 재정의가 가능하냐 아니냐에 따라 사용이 달라진다.
상수 형식으로 재정의가 불가능한 변수는 const, 재정의가 가능한 변수는 let을 붙인다.

let과 const는 블록 스코프

function test() {
  let a = 'hi';

  if(true){
    let a = 'bye';
    console.log(a); // 'bye'
  }
  console.log(a); //'hi'
}

test();

var는 함수 스코프에서 작성한 코드랑 유사하다.
if문에서 a에 'bye'를 대입한 후 다음 줄의 결과를 보면 'bye'가 출력된다. 여기까진 var를 사용했을때와 같다.

하지만 if문 밖에서의 결과를 봤을땐 var와 다른 결과가 나왔다. var는 if문에서 대입된 'bye'가 출력되지만 여기선 'hi'가 출력된다.
if 블록에서 대입된 'bye'는 해당 블록에서만 유용하고 이를 벗어나면 사라지게 된다.

여기서 우리는 let이 블록 스코프인것을 알 수 있다.

var를 이용한 반복문의 문제점을 해결하기 위해 '블록 스코프'인 let을 사용한다.

또한 블록의 외부에서 선언된 변수명을 블록 내부에서도 사용할 수 있다!

  let name = 'jeong';
  console.log(name); //jeong

  if(name === 'jeong'){
    let name = 'eun';
    console.log(name); //eun
  }

  console.log(name); //jeong

let과 const의 호이스팅

var와 같이 let과 const도 호이스팅이 된다!
다만, 출력되는 값이 다른데

  console.log(name); //ReferenceError

  let name = 'jeong';

var는 undefined가 출력되지만 let과 const는 참조 에러가 발생한다.
변수가 정의된 위치와 호이스팅 된 위치 사이에 변수를 이용하려하면 에러가 발생한다. 이때의 구간을 임시적 사각지대(Temporal Dead Zone)이라 한다.