[JS] var vs const, let

1. 변수 선언 in Javascript

var temp1;
let temp2;
const temp3 = document.querySelector('.temp3');

위와 같이 변수를 선언할 때 var, let, const를 사용하여 선언을 한다.

이 세 가지의 특징을 공부하고 기록한다.

1-1. var

var은 필자가 처음 javascript를 접했을 때, 많이 사용했었는데,
약간 다른 언어(python, java, c++ 등,,)의 전역 변수와 같이 여기면서 사용했었다.
정확한 개념을 말하자면 아래의 const, let과는 유효 스코프(범위)에서 차이가 난다.

1-2. const

const는 ES6 문법에서 처음 도입되었고, 한번 지정하고 나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드이다. 따라서 위의 코드에서도 var, let을 사용한 변수 선언과 달리 동적으로 사용할 수 없기 때문에 선언과 동시에 초기화를 진행하였다.

1-3. let

let 은 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드이다.

2. 호이스팅(hoisting) 관련 차이

var과 const, let은 호이스팅이 되었을 때 선언 후 초기화의 유무가 다른데 이와 관련한 내용은 아래의 링크를 들어가서 읽어보면 되겠다. 호이스팅에 대해 정리하여 자세히 설명해놓았다.

https://velog.io/@apro_xo/JS-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85hoisting

3. SCOPE 차이

3-1. var

function temp() {
  var a = 'apple';
  if(true) {
    var a = 'samsung'
    console.log(a) // samsung
  }
  console.log(a) // samsung
}

if문 바깥에서 apple로 선언하고 if문 내부에서 samsung으로 선언했다.
if문 내부의 console.log 값이 samsung이고,
if문 바깥의 console.log 값 또한 samsung인 것을 알 수 있다.

3-2. let

function temp2() {
  let a = 'apple';
  if(true) {
    let a = 'samsung';
    console.log(a); // samsung
  }
  console.log(a); // apple
}

if문 바깥에서 apple로 선언하고 if문 내부에서 samsung으로 선언했다.
if문 내부에서는 console.log 값이 samsung이지만
if문 바깥에서는 console.log 값이 apple 인 것을 알 수 있다.

4. 결론

var은 scope가 함수 단위이며 let, const는 블록 단위의 scope를 가지고 있다.