[JavaScript] var, let, const 차이점 이해하기

이번 글에는 자바스크립트에서 변수를 선언할때 쓰는 키워드인 var,let,const의 차이점에 대해 알아보겠습니다.

우선 변수를 생성할때 알아야할 개념이 3가지가 있습니다.
그것은 선언, 할당, 스코프입니다.

우선 선언과 할당의 개념에 대해 알아보겠습니다.
예를들어 var name = '훈훈';
이라고 변수를 만들었다고 해봅시다.
그러면 여기서 선언은 var name 인거고 '훈훈'은 할당인것입니다.

---

선언

var name;
let name2;
const name3;

할당

name='hoon';
name2='hoon2';
name3='hoon3';

하지만 여기서 각 선언 키워드들의 차이점을 이해야합니다.

차이점

var - 재선언O, 재할당O
let - 재선언X, 재할당O
const - 재선언X, 재할당X

즉,

var name;
var name;

은 가능하지만

let name;
let name;

은 불가능합니다.

let 사용시 재선언을 하게 되면
15 Uncaught SyntaxError: Identifier 'name' has already been declared

이러한 에러가 뜨게 됩니다.
또한

const name = 'hoon';
name = 'shin';

이것도 불가능합니다. const는 재할당이 불가능하기때문이죠. 즉 const를 사용할때는 변하지 않는 값만 사용해야합니다.

이런 경우는 어떨까요?

const person = { name: "henry" };
      person.name = "kevin";
      console.log(person.name);
      //kevin

const를 사용했기때문에 name값 변경이 불가능할까요?
아닙니다. 객체안의 밸류값을 변경하는것은 상관없이 변경이 가능합니다.
객체 자체를 재할당하는것이 아니기때문이죠.

---

마지막으로 스코프(유효범위)의 차이점입니다.

스코프

프로그래밍언어에서
블록 레벨 스코프, 함수 레벨 스코프 라는 개념이 존재합니다.

블록 레벨 스코프

• 모든 블록(function, if, while 등) 내 선언 된 변수는 이 블록안에서만 유효합니다.

함수 레벨 스코프

• 함수 내에서 선언된 변수는 이 함수 내에서만 유효하며, 외부에서 참조가 불가능 합니다.

결론부터 말씀드리자면, var는 함수 레벨 스코프이며, let과 const는 블록 레벨 스코프입니다.

      var hoo = 123;
      let foo = 456;

      {
        var hoo = 321;
        let foo = 654;
      }
      console.log(hoo); //321
      console.log(foo); //456

즉, var는 함수 레벨 스코프이기때문에 {} 블록안에서 선언과 할당이 되어도 외부에서 참조가 가능하여 할당된 321이 출력되지만, let은 블록 레벨 스코프이므로 블록안에서 선언된 값은 외부에서 참조가 불가능하여 456이 출력됩니다.

참고자료
https://poiemaweb.com/es6-block-scope