자바스크립트는 동적 타입 언어로, 다양한 방식으로 변수를 선언할 수 있다. 이 글에서는 자바스크립트의 세 가지 주요 변수 선언 키워드인 const, let, var의 차이점을 이해하고, 언제 어떻게 사용해야 하는지에 대해 다루어 볼 것이다.
var
var는 자바스크립트 초기 버전부터 사용되던 변수 선언 방식이다. 그 특징은 다음과 같다
함수 레벨 스코프
var로 선언된 변수는 함수 내부에서만 유효하다. 함수 외부에서 선언된 경우 전역 변수가 된다.
호이스팅
선언된 위치와 상관없이 함수의 최상단으로 끌어올려지는 현상이다. 하지만 초기화는 호이스팅되지 않는다.
재선언 및 재할당 가능
동일한 스코프 내에서 변수를 여러 번 선언할 수 있으며, 값을 자유롭게 변경할 수 있다.
let
let은 ES6에서 도입된 변수 선언 방식으로, 보다 유연하고 현대적인 접근을 제공한다.
블록 레벨 스코프
let 변수는 선언된 블록(중괄호 {}) 내에서만 유효하다. 이는 더 안전하고 예측 가능한 코드 작성을 가능하게 한다.
임시 사각지대(TDZ)
선언 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. 이는 변수를 사용하기 전에 선언하도록 강제한다.
재선언 불가능, 재할당 가능
같은 스코프 내에서는 재선언할 수 없으나, 변수 값은 변경할 수 있다.
const
const는 let과 함께 ES6에서 소개된 또 다른 변수 선언 방식이다.
블록 레벨 스코프
const도 let처럼 블록 레벨 스코프를 가진다.
재선언 및 재할당 불가능
한 번 할당된 값은 변경할 수 없다. 이는 코드의 안정성을 높이는 데 기여한다.
예외: 객체나 배열과 같은 참조 타입을 const로 선언하면, 객체나 배열 자체는 변경할 수 없지만, 그 내용은 변경할 수 있다.
언제 어떤 키워드를 사용해야 할까?
변하지 않는 값
상수나 설정 값과 같이 변경되지 않는 값을 다룰 때는 const를 사용한다.
변할 수 있는 값
값이 변경될 수 있는 변수는 일반적으로 let을 사용한다.
구식 코드와의 호환성
기존의 오래된 자바스크립트 코드와 호환성이 필요한 경우에만 var를 사용하는 것을 고려할 수 있다.
let이 var보다 좋은 이유
알기 쉽게 코드로 예시를 들어보겠다.
var의 경우
for (var i = 0; i < 3; i++) {
console.log("저는 반복문 안에 있어요: " + i);
}
console.log("저는 반복문 밖에 있어요: " + i);var은 함수 레벨 스코프이다. 이는 함수 내부에서 var로 선언한 변수는 그 함수 내의 지역변수가 되지만, 함수 내부에서 작성되지 않은 모든 변수가 전역 변수가 되어버린다는 문제점이 있다.
콘솔 값의 결과를 보자.
저는 반복문 안에 있어요: 0
저는 반복문 안에 있어요: 1
저는 반복문 안에 있어요: 2
저는 반복문 밖에 있어요: 3
반복문 내부에서 정의한 변수 i가 조건문 바깥의 콘솔값에 출력되는 것을 알 수 있다. 이는 var을 내포하는 함수가 정의되지 않았기 때문에, 변수 i 가 전역변수가 되어버린 것이다. 이는 메모리의 낭비를 야기하며, 안정성을 저하시킬 수 있다.
let의 경우
for (let i = 0; i < 3; i++) {
console.log("저는 반복문 안에 있어요: " + i);
}
console.log("저는 반복문 밖에 있어요: " + i);블록 레벨 스코프를 갖는 let의 경우에는, 반복문 내부에서 정의된 i가 그 반복문 내부에서만 사용이 가능하다. 결과값을 보자.
저는 반복문 안에 있어요: 0
저는 반복문 안에 있어요: 1
저는 반복문 안에 있어요: 2
ReferenceError: i is not defined반복문 내에서 선언된 변수 i를 반복문 외부에서 사용하려고 하니 오류가 발생했다. 이는 변수의 유효 범위가 선언된 블록 내로 제한되어 있기 때문이다. 이러한 제한은 변수의 잘못된 사용을 방지하고 예기치 않은 버그를 줄이는 데 도움이 된다.
