[JavaScript] var, let, const의 차이점, 호이스팅이란?

var 변수란?

자바스크립트에서 var은 변수를 선언하는 키워드이다. 

 

var의 특징은 다음과 같다.

 

1. var의 scope

var은 함수 외부에서 선언되면 전역 변수로 취급된다. 반면, 함수 내에서 선언하면 함수 내에서만 접근이 가능하다.

 

var name = 'code-lab1';	// 전역변수

function funcA(){
    var hi = 'hi';
    console.log(name); // code-lab1 출력
    console.log(hi); // hi 출력
}

console.log(name);  // code-lab1 출력
console.log(hi);	// error: hi is not defined

 

예를 들어 위 코드에서 name은 전역 변수로써 코드 어디서든 접근이 가능하다.

 

하지만 funcA()에서 선언한 hi 변수는 오직 funcA()에서만 접근 가능하다.

 

function test(){
    if(true){
        var name = 'code-lab1';
    }
    console.log(name); // code-lab1 출력
}

 

var 변수는 함수레벨 scope이기 때문에 위와 같이 함수내의 어떤 변수라도 접근이 가능하다.

 

 

2. 재선언 및 재할당 가능

var name = 'code-lab1';
var name = 'code-lab2';

 

재선언이란 같은 이름의 변수를 다시 선언하는 것을 뜻한다.

var 변수는 위와 같이 재선언하더라도 에러가 발생하지 않는다.

 

var의 문제점이 여기에 있다. 재선언이 오류 없이 가능하기 때문에 기존에 선언한 변수의 존재를 까먹고 해당 변수를 재선언하며 디버깅이 까다로운 버그가 발생할 수 있다.

 

var name = 'code-lab1';
name = 'code-lab2';

 

또한 var 변수는 이미 존재하는 변수의 값을 수정하는 재할당이 가능하다.

 

let 변수란?

위에서 언급된 var의 문제점을 개선하기 위해 ES6부터 let, const 키워드가 추가되었다.

 

let의 특징은 다음과 같다.

 

 

1. let의 scope

let 변수는 블록 범위에서 유효하다. 여기서 블록 범위란 {} 중괄호로 감싸진 범위를 뜻한다.

 

function test(){
    if(true){
        let name = 'code-lab1';
    }
    console.log(name); // error : cannot find 'name'
}

 

var 변수는 함수 레벨 scope라서 위와 같은 코드에서 에러가 발생하지 않았겠지만,

let 변수는 블록 범위 scope기 때문에 위 코드에서 에러가 발생한다.

 

같은 함수 내 일지라도 if문에 감싸진 블록 범위에서만 let name 변수가 유효하기 때문이다.

 

 

2. 재선언 불가능, 재할당 가능

let name = 'code-lab1';
let name = 'code-lab2'; // error : Identifier 'name' has already been declared

 

let 변수는 위와 같이 재선언을 하려고 하면 이미 선언되었다는 에러가 발생한다.

즉, 재선언이 불가능하다.

 

let name = "code-lab1";
if (true) {
   let name = "code-lab2";
   console.log(name); // "code-lab2"
}
console.log(name); // "code-lab1"

 

다만, let은 블록 범위 변수이기 때문에 다른 블록이라면 같은 이름이더라도 에러가 발생하지 않는다.

 

let name = 'code-lab1';
name = 'code-lab2';

 

var와 마찬가지로 재할당은 가능하다.

 

 

const 변수란?

const 변수는 일정한 상수 값을 유지한다.

 

const의  특징은 다음과 같다.

 

1. const의 scope

const도 let과 동일하게 블록 범위 scope를 가진다.

 

 

2. 재선언 불가능, 재할당 불가능

const name = 'code-lab1';
const name = 'code-lab2'; // error : Identifier 'name' has already been declared

 

const 변수는 재선언이 불가능하다.

 

const name = 'code-lab1';
name = 'code-lab2';	// error : Assignment to constant variable

 

const 변수는 재할당도 불가능하다.

 

3. 선언과 동시에 초기화해야 한다.

const name;
console.log(name); // error : 'const' declarations must be initialized

 

const 변수는 선언과 동시에 초기화하지 않으면 에러가 발생한다.

var와 let 변수는 초기화하지 않더라도 undefined로 초기값이 설정되고 에러가 발생하지 않는다.

 

 

4. 객체의 속성은 재할당이 가능하다.

const object = {
    name: 'code-lab1',
    age: 3
}

 

와 같이 object라는 객체를 선언했다고 하자.

 

object.age = 4;
console.log(object.age); // 4 출력

 

위와 같이 객체의 속성을 재할당하는 것은 가능하다.

 

object = {
    name: 'code-lab2',
    age: 4
}	// error : cannot assign to 'object' because it is a constant

 

그러나 위와 같이 객체 그 자체를 재할당하는 것은 불가능하다.

 

 

호이스팅이란?

 

호이스팅이란 변수와 함수 선언이 맨 위로 이동되는 자바스크립트의 메커니즘을 뜻한다. 

 

예를 들어

console.log(name);	// undefined 출력
var name = 'code-lab1';

 

위와 같은 코드를 자바스크립트는 아래와 같이 해석한다.

 

var name;
console.log(name);	// undefined 출력
name = 'code-lab1';

 

 

마치 변수 선언이 맨 위로 이동한 것처럼 해석한다.

 

 

var 변수는 호이스팅 될 때 undefined로 초기화된다.

 

그러나 let과 const 변수는 선언만 될 뿐 초기화되지 않는다.

console.log(name);	// error : name is not defined
let name = 'code-lab1';

 

즉, 위와 같은 코드에서 에러가 발생한다.

 

 

총정리

	var	let	name
scope	함수 레벨	블록 범위	블록 범위
재선언	가능	불가능	불가능
재할당	가능	가능	불가능
초기화 필수	X	X	O
호이스팅	O, undefined로 초기화됨	O, 초기화는 안됨	O, 초기화는 안됨

 

 

그럼 var, let, const 중 어떤 키워드를 쓰는 게 좋을까?

 

var은 최대한 사용을 지양하는 것이 좋다. var은 재선언이 가능해 의도치 않은 버그를 발생시킬 가능성이 높다.

따라서 재할당이 필요한 변수를 선언한다면 var 대신 let 키워드를 사용하는 것이 좋다.

 

재할당이 필요 없는 변수를 선언한다면 const 키워드를 사용해 재할당의 가능성을 닫는 것이 좋다.

 

실제로 나는 실무에서 let과 const 키워드만 사용하고 있고, 웬만하면 const 키워드를 사용하려고 한다.

 

---

 

참고

 

1. https://www.freecodecamp.org/news/differences-between-var-let-const-javascript/

2. https://www.geeksforgeeks.org/difference-between-var-let-and-const-keywords-in-javascript/