[Javascript]var, let, const 차이점

0. 목차

1. 개요

2. let, const

3. var

4. 결론

1. 개요

변수를 선언하는 예약어에는 var, let, const 세가지가 있다.

크게 나누자면,

ES6이전 즉, ES5까지 사용되던 var 와

ES6에 새롭게 추가된 let과 const가 있다.

모든 강의와, 모든 책에서 var사용을 지양하고,

let, const 사용을 권장한다.

세가지 예약어의 차이점과,

var 사용을 권장하지 않는 이유에 대해 알아보자.

2. let, const

2-1. let

let 은 const와 함께 ES6에서 추가된 기능이다.

변수를 선언한다는 점에선 동일하지만,

값의 재할당의 가능 여부에서 차이가 드러난다.

 

let 으로 선언한 변수는 재할당이 가능하다.

//선언&할당
let num = 1;
console.log(num); // 1

//재할당
num = 2;
//재할당된 값(=2)가 출력된다
console.log(num); // 2

 

2-2. const

const 역시 변수를 선언하는 예약어이지만,

const로 선언된 변수는 값이 재할당 되지 않는 상수이다.

즉, const로 선언된 변수는 값의 재할당이 불가능 하다.

 

//const 변수 선언 & 할당
const num = 1;
console.log(num); // 1

//재할당
num = 2; //TypeError: Assignment to constant variable.
console.log(num); // 윗줄에서 에러가 발생해서 실행되지 않음

3. var

var는 ES6 이전에 사용되던 예약어로,

let 과 마찬가지로 변수를 선언하고 재할당이 가능하다.

//const 변수 선언 & 할당
var num = 1;
console.log(num); // 1

//재할당
num = 2; 
console.log(num); // 2

3-1. 호이스팅이 발생한다.

호이스팅은 따로 포스팅을 할 예정이지만, 여기서 간략하게만 설명하자면,

런타임 실행이전 코드평가 단계에서 모든 식별자(변수, 함수, 클래스)들이 최상단으로 끌어올려진듯이 우선적으로 실행되는 것을 말한다.

 

let 과 const는 호이스팅이 발생하지 않지만(실제로는 발생하지만 발생하지 않는것처럼 보임),

var 는 호이스팅이 발생된다.

 

console.log(num); //ReferenceError: Cannot access 'num' before initialization
let num = 1;

 

console.log(num2); //ReferenceError: Cannot access 'num2' before initialization
const num2 = 2;

 

console.log(num3); // undefined
var num3 = 3;
console.log(num3); //3

예시를 보면,

let 과 const 는 변수를 선언하기 전에 참조를 하게 되면

ref error가 발생하지만,

 

var로 선언된 변수는 선언이 되기 이전이지만 undefined가 출력되는걸 확인 할 수 있다.

값이 할당 된 이후에는 3이 출력된다.

 

이는, var 로 변수를 선언할 시, TDZ(Temporal Dead Zone)가 발생하기 때문이다.

TDZ에 대해서는 호이스팅에 대해 포스팅 할 때 자세히 다루겠다.

3-2. 재선언이 가능하다.

let 과 const 는 재선언이 불가능하다.

let num = 1;
console.log(num); // 1
let num = 2; // SyntaxError: Identifier 'num' has already been declared

 

const num = 1;
console.log(num); // 1
const num = 2; // SyntaxError: Identifier 'num' has already been declared

이미 선언한 변수를 다시 let 과 const를 사용해 재선언 하려하면 syntaxError가 발생하는 것을 확인할 수 있다.

 

하지만 var는 재선언이 가능하다.

var num = 1;
console.log(num); // 1
var num = 2;
console.log(num); // 2

작은 규모의 프로젝트를 혼자서 진행하고, 본인이 선언한 모든 변수를 기억할 수 있다면 문제가 안 될 수도 있겠지만,

현실적으로 불가능하지 않을까 싶다..

3-3. 블록스코프 안에서 선언될 시 전역변수로 선언된다.

우선 블록스코프에 대해서 간략히 설명하자면,

지역스코프는 함수스코프와 블록스코프로 나눠지는데,

{
//블록스코프
}

if(){
// 블록스코프
}

for(){
//블록스코프
}

function test (){
//함수스코프
}

 

우선 이렇게만 알고있으면 당장 이해하는데는 크게 무리가 없을거다.

이를 명확히 설명하려면, 스코프 체인과, 렉시컬 스코프 까지 설명을 해야되는데...

나도 공부가 부족해서 명확히 이해하고 있지 못해서.. ㅎ

이 부분에 대해선 언젠가 공부가 된 뒤에 자세히 다뤄보겠다...언젠가는...

 

무튼 var선언은 함수스코프는 인정하지만

블록 스코프는 무시를 한다.

function test() {
  var a = 1;
}
console.log(a); //ReferenceError: a is not defined

var 선언이 함수스코프는 인정하기 때문에, 함수스코프 외부에서 a 변수를 참조 할 수 없다.

 

for (var i = 1; i < 6; i++) {
  console.log(i); // 1,2,3,4,5 차례대로 출력
}
console.log(i); // 6
// for문 마지막에 i++가 동작하고 i가 6으로 재할당 된 뒤,
// 조건이 false가 되어 for문을 탈출했기에 i를 출력하면 6이 나온다.

 

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

위 두개의 예시 코드 모두 var 선언이 블록스코프를 인정하지 않기 때문에 블록스코프 밖에서 참조가 가능한것을 보여준다.

 

반면 let 과 const는 함수스코프 뿐만 아니라 블록스코프 까지 모두 인정하기 때문에 지역스코프 밖에서는 참조가 불가능하다.

 

if (true) {
  const a = 1;
}
console.log(a); // ReferenceError: a is not defined

 

for (let i = 1; i < 6; i++) {
  console.log(i); // 1,2,3,4,5 차례대로 출력
}
console.log(i); // ReferenceError: a is not defined

 

let 과 const 모두 블록스코프를 인정에서 스코프 바깥에서 변수를 참조할시 

refferenceError가 발생한다.

4.결론

var에는 이러한 문제점 들이 존재하고,

그런 문제점들을 보완 하기 위해 만들어진 것이 let과 const다.

그러니까 var 말고 let과 const를 사용하자.

 

한가지 더 덧붙이자면, 값을 재할당 해야될 경우가 아니라면 const를 사용하는게 더 좋을듯하다.