JavaScript - Var, Let, Const 차이점

본문은 freeCodeCamp의 YOUNGHYUN BAE님이 번역하신 글을 참고하여 작성한 내용입니다.

 

신입 개발자로 입사 후 프론트에 대해 공부할 필요가 있었다.

JavaScript 코드를 살펴보면서 몰랐던 내용들을 정리해보려고 한다.

 

코드 내에서 자주 보았던 var, let, const 변수들의 차이점에대해 정리해본다.

 

var, let, const는 JavaScript에서 변수를 선언하는데 사용되는 키워드이다.

세 키워드에는 몇 가지 차이점이 있다.

 

Var

• var은 함수 외부에서 선언되는 경우 전역 변수이다. 즉, 어디에서든 사용 가능한 변수라는 것.
• var을 함수 내부에서 선언되는 경우에는 함수 범위 내로 한정된다. 선언된 함수 내에서만 사용하고 접근할 수 있다.

var test = "전역에서 사용 가능!"

function newFunction() {
	var test2 = "함수 내에서만 사용 가능!";
}

console.log(test);	// "전역에서 사용 가능!" 출력
console.log(test2);		// error : test2 is not defined

 

• var 변수는 수정, 재선언이 가능하다.

var test = "변수";
var test = "재선언한 변수";

var test = "변수";
test = "수정한 변수";

 

• var의 호이스팅(Hoisting)이라는 동작을 수행해서 변수 선언이 스코프의 맨 위로 끌어올려진다.

console.log(test);
var test = "var 변수";

JavaScript에서는 아래와 같이 해석된다.

var test;
console.log(test);	// test is undefined
test = "var 변수";

호이스팅이란? 
호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언문이 해당 스코프의 맨 위로 끌어올려지는 동작을 말한다. 
즉, 코드 실행 전에 변수와 함수가 메모리에 할당되는 것처럼 동작하며, 선언 이전에 변수나 함수를 사용할 수 있는 특징이 있다.

 

Var의 문제점

var test = "var 변수"

if (true) {
	var test = "재선언한 var 변수";
}

console.log(test);	// "재선언한 var 변수" 출력

위 코드를 살펴보면 기존의 var 변수는 함수 내에서 재선언한 값에의해 덮어씌어진다. 

만약 의도한 것이라면 문제 없지만, 변수 greeter가 이미 정의되어 있다는 사실을 모르고 재선언한 것이라면 문제가 된다.

 

뜻밖의 출력 결과에 당황할 것이다. 이런 문제는 많은 버그를 발생시킬 수 있기 때문에 let과 const가 필요하게 되었다.

 

 

Let

let 변수는 var 변수의 문제점을 어떻게 해결할 수 있었을까?

• let으로 선언된 변수는 선언된 블록 내에서만 사용 가능하다.
• 아래 코드처럼 함수 내에서 선언한 let 변수를 함수 밖에서 사용하는 경우 에러가 발생한다.
• let 변수는 블록 범위이기 때문이다. 
• 블록("{ }") 안에서 변수를 선언하면, 해당 변수는 블록 스코프를 가지게 되고 블록 외부에서는 해당 변수에 접근할 수 없다.

if (true) {
	let test = "함수 내 let 변수";
    console.log(test);	// "함수 내 let 변수" 출력
}

console.log(test);		// test is not defined

 

• let 변수는 수정될 수 있지만, 재선언은 할 수 없다. 동일한 범위 내에서 다시 선언할 수 없는 것이다.

let test = "let 변수";
test = "수정된 let 변수";

let test = "let 변수";
let test = "재선언된 let 변수";	// error : Identifier 'test' has already been declared

 

• 다른 범위에 동일한 변수가 정의되어 있다면, 에러가 발생하지 않는다.
• 아래 코드를 보면 동일한 변수지만 다른 범위를 가지므로 서로 다른 변수로 취급 받는다.
• 이러한 특징 덕에 동일한 범위 내에서 동일한 변수를 두 번 이상 선언할 수 없기 때문에 var 변수를 사용할 때의 문제가 발생하지 않는다.

let test = "let 변수";

if (true) {
	let test = "함수내 let 변수";
    console.log(test);	// "함수내 let 변수" 출력
}

console.log(test);		// "let 변수" 출력

 

• let 선언도 호이스팅이 발생하지마, 변수가 선언된 위치까지 호이스팅된다.
• var 변수와는 다르게 초기화는 선언문에 도달했을 때 수행된다. 선언하기 전에 사용하려고 하면 Reference Error(참조 오류)가 발생한다. 

 

Const

• const 변수는 상수(constant) 선언 키워드이다.
• const 변수의 호이스팅도 let 변수와 동일하다.
• const 변수도 let 변수처럼 선언된 블록 범위 내에서만 접근 가능하다.
• const 변수는 수정, 재선언 모두 불가능하다. 

const test = "const 변수";
test = "수정한 const 변수";	// error : Assignment to constant variable.

const test = "const 변수";
const test = "재선언한 const 변수";	// error : Identifier 'test' has already been declared

 

• const 객체는 수정할 수 없지만, 속성(property)는 수정 할 수 있다. 

const test = {
	message: "const 변수",
    name: "김찬빈"
}
console.log(test);		// "{message: 'const 변수', name: '김찬빈'}" 출력

// 불가능
test = {
	message: "수정된 const 변수",
    name: "김찬빈2"
}						// error : Assignment to constant variable


// 가능
test.message = "수정된 const 변수";
console.log(test);		// "{message: '수정된 const 변수', name: '김찬빈'}" 출력