[Web/Javascript] var, let, const 알아보기

안녕하세요.

JavaScript에서 변수를 선언하는 세 가지 주요 방법인 var, let, const에 대해 알아보도록 하겠습니다.

각 키워드의 특징과 장단점, 사용 예시 등을 자세히 살펴보겠습니다.  

변수 키워드 - var

var는 JavaScript에서 가장 오래된 변수 선언 방식입니다. var로 변수를 선언하면 가장 가까운 함수의 범위에 스코프가 지정됩니다. 이는 var로 선언된 변수가 함수 스코프를 갖는다는 것을 의미합니다. var 변수는 재선언과 재할당이 가능합니다. 

 

재선언
동일한 이름으로 새로운 변수를 선언하는 것
재할당
기존 변수에 새로운 값을 할당하는 것

특징

함수 범위
var변수는 함수 범위에서 유효합니다.
호이스팅 있음
var 변수는 함수의 맨 위로 올라가는 것처럼 작동합니다. 이는 예상치 못한 오류를 발생시킬 수 있습니다.
재선언, 재할당 가능
var 변수는 함수 외부에서도 사용할 수 있습니다. 이는 의도하지 않은 변수 재정의를 초래할 수 있습니다.

 

호이스팅
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 쉽게 말해서, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것으로 실제로 코드가 끌어올려지는 건 아니지만 내부적으로 끌어올려서 처리하는 것을 뜻합니다. 실제 메모리에서는 변화가 없습니다.

예시와 함께 보는 사례

var x = 10;
if (true) {
    var x = 20;
    console.log("A구간의 x의 값은:", x);  
}
console.log("B구간의 x의 값은:", x);

Result

A구간의 x의 값은: 20
B구간의 x의 값은: 20

 

변수 키워드 - let

ECMAScript 6(ES6)에서 소개된 let 키워드는 var와 관련된 몇 가지 문제에 대한 해결책을 제공합니다. 특히 스코핑과 관련된 문제입니다. let 변수는 블록 스코프를 갖습니다. 즉, 블록(중괄호 {}로 묶인 코드) 내에서 선언된 변수는 블록 외부에서 사용할 수 없습니다. let 변수는 재할당이 가능하지만 재선언은 불가능합니다.

특징

블록 범위
let 변수는 블록 범위에서 유효합니다. 이는 코드 가독성과 유지 보수성을 향상시킵니다.
호이스팅 없음
let 변수는 호이스팅되지 않습니다.
재할당 가능
let 변수는 값을 재할당할 수 있습니다.

예시와 함께 보는 사례

let y = 10;
if (true) {
	let y = 20;
	console.log("A구간의 y의 값은:", y);
}
console.log("B구간의 y의 값은:", y);

Result

A구간의 y의 값은: 20
B구간의 y의 값은: 10

 

변수 키워드 - const

 

let과 마찬가지로 ES6에서 소개된 const 키워드는 중요한 차이점을 갖고 있습니다. let과 같이 블록 스코프를 갖지만 재선언, 재할당이 불가능하다는 것입니다. const는 선언될 때 값이 초기화되어야 하며 이후 변경될 수 없습니다.

특징

블록 범위
const 변수는 블록 범위에서 유효합니다.
호이스팅 없음
const 변수는 호이스팅되지 않습니다.
불변성
const 변수는 값을 변경할 수 없습니다. 이는 코드의 안정성을 향상시킵니다.

예시와 함께 보는 사례

const z = 10;
if (true) {
	const z = 20;
	console.log("A구간의 z의 값은:", z);
}
console.log("B구간의 z의 값은:", z);
z = 30;
console.log("C구간의 z의 값은:", z);

Result

A구간의 z의 값은: 20
B구간의 z의 값은: 10
Uncaught TypeError: Assignment to constant variable.

 

정리: var, let, const의 주요 차이점

키워드	범위	재할당	재선언
var	함수 범위 (호이스팅)	가능	가능
let	블록 범위	가능	불가능
const	블록 범위	불가능	불가능

결론

새로운 코드에서는 var를 사용하지 않는 것이 좋습니다. 하지만, 호환성을 위해 legacy 코드에서 var를 사용해야 할 수도 있습니다. 성능적인 측면에서는 var, let, const 중 어떤 것을 사용하더라도 차이가 미미하지만 이들 중 어떤 것을 선택하느냐에 따라 코드 가독성과 유지 보수성에 영향을 줄 수 있습니다.

 

레퍼런스

JavaScript 공식 문서

MDN Web Docs

 

 

오타 혹은 잘못된 내용이 있다면 부담없이 댓글로 알려주세요 :)
문장을 다듬는데 ChatGPT의 도움을 받았습니다.