let - const - var

ES6 이전에는 변수를 선언하기 위해선 var를 사용하여 선언을 해주었다.
var를 사용하면 되는데 왜 ES6에서는 let과 const가 나왔을까?

이제 그 이유를 알아보자

var의 첫번째 문제점은 변수의 중복 선언이 가능하다는 것이다.

var a = "안녕";
console.log(a); // 안녕

var a = "잘가";
console.log(a); // 잘가

위의 코드를 보면 var는 처음에 변수를 선언하고 나중에 똑같은 변수명으로 선언해도 에러가 나지않으며 나중에 할당한 값으로 변하게 된다. 그래서 내가 의도치 않은 결과를 내게된다.

두번째 문제점은 var는 함수 레벨 scope를 가진다.

var a = "안녕";
{
  var a = "반가워";
  {
    var a = "잘가";
  }
}
console.log(a) // 잘가

위의 코드를 보게되면 var는 블록 레벨 scope가 없기 때문에 { }를 무시하고 가장 밑에 변수 값을 가져오게 된다.

function a() {
  var b = "안녕";
};

console.log(b); // b is not defined

반면 var는 블록 레벨 scope는 없지만 함수 레벨 scope는 있기 때문에 함수 안의 b를 참조하지 못한다.

세번째 문제점은 var키워드는 생략이 허용된다는 것 입니다.

a = "안녕";

console.log(a); // 안녕

위의 코드를 보면 var 없이 a라는 이름에 변수를 선언하고 안녕이라는 값을 줬는데 console.log(a)하면 안녕이라는 값이 출력되는걸 볼 수 있다.
별다른 문제가 없는것처럼 보이지만 var키워드 없이 선언하면 전역변수로 선언되게 되고 어딘가에서 해당 값이 바껴서 예상치못한 오류를 낼 수 있다.

네번째 문제점은 변수 호이스팅입니다.

console.log(a); // undefined
var a = "안녕";

위의 코드를 보면 console.log 후에 var를 선언하고 값을 할당하였는데 호이스팅이 발생하여 var키워드가 위로 끌어올려졌다. 하지만 console.log(a)가 "안녕"이 아닌 undefined가 출력되는걸 볼 수 있다.
왜냐하면 var키워드는 선언 단계와 초기화 단계가 한번에 이루어지기 때문이다.
즉, 위의 코드를 알아보기 쉽게 써보자면 아래 코드와 같다.

var a
console.log(a)
a = "안녕"

이러한 문제점들 때문에 ES6에서 let과 const가 도입되었다.

var 와 let,const의 차이점은
1. 블록 레벨 scope를 따른다.
2. 변수 중복 선언이 금지된다.
3. var의 호이스팅 결과와 다르게 let,const는 오류가 난다.

1. 블록 레벨 scope를 따른다.

블록 안에서 선언된 변수는 해당 블록안에서만 접근이 가능하며 블록 밖에서 접근하려고 하면 아래와 같이 오류가 발생한다.

{
  const a = "안녕"
  let b = "잘가"
}

console.log(a) // a is not defined
console.log(b) // b is not defined

2. 중복 선언 불가능
   let과 const 둘 다 중복선언이 불가능하며 아래와 같은 오류가 난다.

const a = "안녕"
const a = "잘가" // Identifier 'a' has already been declared

let b = "안녕"
let b = "잘가" // Identifier 'b' has already been declared

3. var의 호이스팅 결과와 다르게 let,const는 오류가 난다.
   var의 결과와 다르게 아래 코드에서는 정의되있지 않다는 오류가 나온다.

console.log(a); // a is not defined
const a = "안녕";

console.log(b); // b is not defined
const b = "안녕";

하지만 우리는 이 오류가 단순히 let과 const는 호이스팅이 되지않아서라고 생각하면 안된다. 자세한 설명은 링크(추후작성)!

참고한 사이트
https://poiemaweb.com/js-data-type-variable
https://ddb8036631.github.io/javascript/var,-let,-const-%ED%82%A4%EC%9B%8C%EB%93%9C/#4-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4-%EA%B0%80%EB%8A%A5
https://velog.io/@crewd/JS-%EC%8B%A4%EC%A0%84-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-var%EC%9D%98-%EB%AC%B8%EC%A0%9C%EC%A0%90
https://evan-moon.github.io/2019/06/18/javascript-let-const/