기존 자바스크립트의 변수 선언은 var로만 가능했다고 한다. 하지만 문제점들이 많아 ES6부터 const와 let이 추가되었다.
그럼 대체 이게 무슨 차이가 있을 것일까?
지금부터 알아보자.
변수 생성 단계
① 선언 단계
- 변수를 실행 콘텍스트의 변수 객체에 등록한다.
- 이 변수 객체는 스코프가 참조하는 대상이 된다.
② 초기화 단계
- 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보.
- 이 단계에서 변수는 undefined로 초기화된다.
③ 할당 단계
- undefined로 초기화된 변수에 실제 값을 할당한다.
var
- 변수 중복 선언 가능.
- 재할당 가능.
- 하지만 큰 단점은 중복 선언했을 때 에러가 나오지 않고 각기 다른 값이 출력될 수 있음
- 코드량이 많아진다면 var변수를 쓰는 거는 추천하지 않음.
- 이를 보완하기 위해 let/const 변수가 나옴.
// 변수선언
var num = 1;
console.log(num); // output : 1
// 중복선언
var num = 2;
console.log(num); // output : 2
// 재할당
num = 3;
console.log(num); // output : 3
let
- 변수 중복 선언 불가 ( 중복 선언 시 아래와 같은 에러 메시지가 나옴)
- 재할당이 가능함.
// 변수선언
let num = 1;
console.log(num); // output : 1
// 중복선언
let num = 2;
console.log(num); // output : Uncaught SyntaxError: Identifier 'num' has already been declared
// 재할당
num = 3;
console.log(num); // output : 3
const
- 변수 중복 선언 불가.
- 재할당 불가.
- 변화하지 않는 변수를 선언할 때 사용.
//변수선언
const Number = 1;
console.log(Number); // output : 1
// 중복선언
const Number = 2;
console.log(Number); // output : Uncaught SyntaxError: Identifier 'Number' has already been declared
// 재할당
Number = 3;
console.log(Number); //output : Uncaught TypeError: Assignment to constant variable.
호이스팅
- 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미함.
- var로 선언한 변수의 경우 호이스팅 시, undefined로 변수를 초기화한다.
- let과 const로 선언한 변수의 경우 호이스팅 시, 변수를 초기화하지 않는다.
