자바스크립트에서 변수를 선언할 때 var, let, const를 사용할 수 있습니다. 하지만 각각의 차이를 제대로 이해하지 못하면 코드에서 예상치 못한 오류가 발생할 수 있습니다. 오늘은 이 세 가지 변수 선언 방식의 차이를 명확히 비교하고, 언제 어떤 방식을 사용해야 하는지 알려드리겠습니다.
var, let, const의 기본 개념
1️⃣ var
- ES6 이전부터 사용된 전통적인 변수 선언 방식입니다.
- 함수 스코프(Function Scope)를 가짐
- 변수 재선언이 가능
- 호이스팅(hoisting) 발생
- 예기치 않은 값 변경 위험이 있음
2️⃣ let
- ES6에서 도입된 변수 선언 방식
- 블록 스코프(Block Scope)를 가짐
- 변수 재선언 불가능하지만, 값 변경은 가능
- 호이스팅 발생하지만 초기화되지 않음 (Temporal Dead Zone 존재)
3️⃣ const
- 상수(Constant) 값을 선언할 때 사용
- 블록 스코프(Block Scope)를 가짐
- 변수 재선언 및 값 변경 불가능
- 객체나 배열의 속성 변경은 가능
var, let, const 비교 테이블
특징 | var | let | const |
스코프 | 함수 스코프 | 블록 스코프 | 블록 스코프 |
재선언 | 가능 | 불가능 | 불가능 |
값 변경 | 가능 | 가능 | 불가능 (객체/배열은 변경 가능) |
호이스팅 | O (초기화 undefined) | O (초기화 안됨) | O (초기화 안됨) |
사용 권장 | X (비추천) | O | O |
var, let, const 예제 코드 및 실행 결과
1️⃣ var 사용 예제 (예기치 못한 동작 발생)
function exampleVar() {
if (true) {
var test = "Hello, var!";
}
console.log(test); // 정상 출력 (함수 스코프라서 접근 가능)
}
exampleVar();
결과: "Hello, var!" (블록 내부에서 선언했지만 함수 스코프를 따라 동작)
2️⃣ let 사용 예제 (올바른 블록 스코프 적용)
function exampleLet() {
if (true) {
let test = "Hello, let!";
}
console.log(test); // 오류 발생 (ReferenceError)
}
exampleLet();
결과: ReferenceError 발생 (블록 스코프 내부에서만 접근 가능)
let text = "hellow";
text = "Hi";
console.log(text); // "Hi"
결과: let로 선언한 변수의 경우 값 변경 가능
3️⃣ const 사용 예제 (값 변경 불가)
const PI = 3.14;
PI = 3.1415; // TypeError: Assignment to constant variable.
결과: TypeError 발생 (const는 값 변경 불가능)
const person = { name: "John" };
person.name = "Jane"; // 정상적으로 변경됨
console.log(person.name); // "Jane"
하지만 객체나 배열의 속성은 변경 가능합니다.
var, let, const 언제 사용할까?
변수를 선언할 때 가장 중요한 포인트는 해당 변수가 변경될 가능성이 있는가? 입니다.
1️⃣ const: 값이 변하지 않는 경우 const를 사용하세요. 실수로 값을 변경하는 오류를 방지할 수 있어 코드의 안정성이 높아집니다.
const MAX_USERS = 100; // 변하지 않는 값
2️⃣ let: 값이 변할 가능성이 있는 경우 let을 사용하세요. 예를 들어, 반복문에서 카운터를 증가시키거나, 사용자 입력값을 저장할 때 사용됩니다.
let count = 0;
count += 1; // 변경 가능
3️⃣ var: var는 함수 스코프를 가지며, 예기치 않은 값 변경이 발생할 수 있기 때문에 사용을 지양하는 것이 좋습니다. 최신 자바스크립트 코드에서는 거의 사용되지 않습니다.
var messag립트 코드에서는 거의
var message = "World"; // 재선언 가능 (예기치 않은 동작 가능성)
'개발 > javascript&jQuery' 카테고리의 다른 글
[JQuery] 라디오, 체크박스, 셀렉트박스 선택 값 가져오기, 이벤트 처리 (0) | 2020.08.27 |
---|---|
[javascript/jQuery] id, name, class 값 가져오기 (12) | 2020.03.02 |