[Javascript] var, let, const의 차이점 (비교)

자바스크립트를 사용하면서 변수를 선언 할 때, var, let , const를 사용한다. 

javascript의 변수선언 방식이라는 점에서 같은 기능을 하는 것처럼 보이지만 서로 다른 기능을 하고 있다.

 

3가지 선언방식의 차이점을 비교하기 앞서 변수, 변수선언, 변수할당, 호이스팅, 스코프에 대한 개념을 알고 있어야 차이점에 대한 이해를 쉽게 할 수 있다. 하기 링크를 통해 개념을 알아볼 수 있다. 

 

[Javascript] 변수 선언, 초기화, 할당, 호이스팅, 스코프 개념 및 설명

 

---

1. 변수 선언 방식

1 - 1. var [변수 중복 선언 가능]

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

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

var로 선언한 변수는 동일한 변수명을 여러번 중복 선언이 가능하다. 
때문에 변수를 유연하게 사용할 수 있다는 장점이 있지만, 코드량이 많아지고 여러 중복 선언으로 인해 값이 바뀌어 문제가 발생했을 경우 어느 부분에서 문제의 발생했는지 찾기가 힘들다는 단점이 있다. 이러한 단점을 보완하기 위해 SE6부터 let, const 변수 선언 방식이 생겼다. 

 

1 - 2. let [변수 중복 선언 불가능, 변수 재할당 가능]

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

let name = 'Lee';
console.log(name); //Uncaught SyntaxError: Identifier 'name' has already been declared

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

let은 최초 변수 선언 이후 변수를 재할당 하는 것은 가능하나, 동일한 변수명으로 중복해서 선언을 하는 것은 불가하다.

 

1 - 3. const [변수 중복 선언 불가능, 변수 재할당 불가능]

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

const name = 'Lee';
console.log(name); //Uncaught SyntaxError: Identifier 'name' has already been declared

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

const는 변수 중복 선언 및 변수 재할당이 불가능한 선언 방식으로 상수를 선언할 때 사용한다. 즉, cosnt는 한번 선언하면 값을 바꿀 수 없다.

 

2. 호이스팅(Hoisting)

2 - 1. var [호이스팅 발생]

//변수 호이스팅
console.log(name); // undefined
var name = 'Kim';
console.log(name); // Kim

//함수 호이스팅
func(); // undefined

function func() {
 console.log("hoisting");
}

var 선언방식으로 선언된 변수 name은 자바스크립트 내부에서 undifind로 초기화 했기 때문에 선언되기 전에 참조를 하면 에러 발생이 아닌 undifind가 나온다. 

 

2 - 2. let, const [호이스팅 다른 방식으로 발생]

//변수 호이스팅
console.log(name); // ReferenceError: name is not defined
let name = 'Kim';
console.log(name); // Kim

console.log(name); // ReferenceError: cannot access 'name' before initialization
const name = 'Lee';
console.log(name); // Lee

let 선언방식은 선언단계와 초기화단계가 분리 진행된다.

let으로 선언된 변수는 런타임 이전에 자바스크립트 엔진에 의해 선언단계가 먼저 실행되지만 초기화가 진행되지 않은 상태에서 변수를 참조하려고 하면 에러가 발생한다. 이때 호이스팅이 발생하지 않는 것이 아니라 변수 선언과 초기화 사이에 일시적으로 변수의 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone) 가 발생했기 때문에 보이는 현상이다. 

 

[Javascript] TDZ(Temporal Dead Zone)란?

const 선언방식은 let과 달리 선언단계와 초기화단계, 할당 단계가 동시에 진행된다. 
let은 위에서 말했듯이 런타임 이전에 선언단계가 먼저 실행되어 자바스크립트 엔진에 이미 존재하지만 초기화가 되지 않았기 때문에 name is not defined라는 문구가 뜨지만 const의 경우 선언단계와 초기화단계가 동시에 진행되어야 하는데, 선언, 초기화가 되어 있지 않아서 cannot access 'name' before initialization 문구가 뜨는 것이다.

(const또한 TDZ(Temporal Dead Zone) 가 발생한다.)

3. 스코프(Scope)

3 - 1. var [함수 레벨 스코프(function-level scope)]

var로 선언한 모든 변수는 함수 내부에서 선언한 변수는 지역 변수이고 함수외부에서 선언된 변수는 모두 전역변수로 취급한다.

var a = 5;

funtion func(){
 if(true){
   var a = 10;
   console.log(a);// 10
 }
 console.log(a);// 10
}
console.log(a);// 5

 

3 - 2. let,const [블록 레벨 스코프(block-leverl scope)]

let, const로 선언한 변수는 모두 코드블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

function func() {
	if (true) {
    	let a = 10;
        console.log(a); // 10
    }
    console.log(a); // ReferenceError: a is not defined
}
console.log(a); // ReferenceError: a is not defined