var / let / const 차이점

변수

간단하게 말하면 계속 변하는 자료의 값을 바로바로 받아들이는 수로,
변수는 컴퓨터 메모리에 존재하며 그 메모리 안에 정보를 저장하기 위하여 사용된다.

• 전역변수(Global)
• 지역변수(Local)

변수 선언 방식

JavaScript에서 변수선언방식은 var/let/const 세 가지가 있다.
이 세가지 변수선언방식에 대해 알아보자.

1. var

1. 변수 재선언이 가능하다.

var name = 'hi'
console.log(name); // hi

var name = 'Kim'
console.log(name); // Kim

같은 이름의 변수명을 여러번 선언해도 에러없이 코드가 실행된다.

2. 호이스팅이 가능하다.

   🤔 호이스팅(Hoisting)
   변수가 어디에 선언되었느냐와 상관없이 유효범위의 최상단으로 끌어올리는 행위이다.
   선언만 위로 끌어올려지고, 할당은 끌어올려지지 않으며, 선언과 할당의 분리라고 생각하면 쉽게 이해할 수 있을 것이다.

   2-1. 호이스팅 예제

  console.log(name); // undefined
  var name = 'hi'
  console.log(name); // hi

원래 처음의 conosle.log는 Reference Error가 발생해야 맞다.
아직 변수를 선언하지 않은 상태에서 console을 찍었으니 말이다.
하지만, name이란 변수명이 var로 선언되어 호이스팅이 되었기때문에 에러가 발생하지 않았다.
위의 코드 실행을 뜯어보면 아래와 같다.

var name; // 선언부분이 끌어올려짐
console.log(name); // undefined
name = 'hi'; // 할당
console.log(name); // hi

이처럼 호이스팅은 변수의 선언과 할당이 분리되었다.

2-2. 호이스팅 예제

console.log(a); // undefined
if(true){
  var a = 1;
}
console.log(a); // 1

호이스팅 후

var a; // 선언이 끌어올려짐
console.log(a); // undefined
if(true){
  a = 1; // 할당
}
console.log(a); // 1

위 코드도 선언과 할당이 분리되었다.

지금까지 본 var선언방식으로 변수를 선언하면 많은 문제가 발생할 수 있을 것이다.
이를 보완하기 위해 ES6부터 let, const가 추가되었다.

2. let [Mutable]

1. 변수 재선언 불가능, 변수 재할당 가능

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

name = 'kim'
console.log(name); // kim

let선언방식은 Mutable하기 때문에 재할당은 가능하다.
하지만, var선언방식처럼 재선언은 불가능하다.

• let 방식으로 재선언을 할 경우
  

3. const(Constants) [Immutable]

1. 변수 재선언 불가능, 변수 재할당 불가능
   let선언방식과 const선언방식의 가장 큰 차이점은 재선언과 재할당 불가능일 것이다.

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

name = 'kim'
console.log(name); // Uncaught TypeError: Assignment to constant variable.

2. 장점

• 보안성
• 스레드 안정성
  다양한 스레드들이 동시에 돌아가면서 변수에 접근할 때 변수의 값이 변경될 수 있지만, const를 사용하면 변수의 값이 변경되지 않기때문에 좋다.