JavaScript에서 변수를 선언하는 방법으로 var, let, const 세 가지 키워드가 있다
각 키워드는 변수의 유효 범위(scope), 재선언(redeclaration), 재할당(reassignment) 측면에서 서로 다른 특징을 가지고 있다
이들의 차이점을 이해하는 것은 안정적이고 예측 가능한 코드를 작성하는 데 중요하다
1. var
- 유효 범위
- 함수 레벨 스코프(function-level scope)
- var로 선언된 변수는 선언된 함수의 전체에서 유효하다
- 함수 외부에서 선언된 경우 전역 변수가 된다
- 재선언 가능
- 같은 스코프 내에서 var를 사용하여 변수를 여러 번 선언할 수 있다
- 재할당 가능
- 선언된 변수에 새로운 값을 할당할 수 있다
예시:
var greeting = "Hello, world!";
console.log(greeting); // 출력: Hello, world!
greeting = "Hello, JavaScript!";
console.log(greeting); // 출력: Hello, JavaScript!
var greeting = "Hello, again!";
console.log(greeting); // 출력: Hello, again!
2. let
- 유효 범위
- 블록 레벨 스코프(block-level scope)
- let으로 선언된 변수는 선언된 블록(중괄호 {}로 둘러싸인 영역) 내에서만 유효하다
- 재선언 불가능
- 같은 스코프 내에서 let을 사용하여 변수를 재선언할 수 없다
- 하지만 다른 스코프에서는 같은 이름의 변수를 선언할 수 있다
- 재할당 가능
- 선언된 변수에 새로운 값을 할당할 수 있다
예시:
let message = "Hello, world!";
console.log(message); // 출력: Hello, world!
message = "Hello, JavaScript!";
console.log(message); // 출력: Hello, JavaScript!
// 아래 코드는 에러를 발생시킵니다.
// let message = "Hello, again!";
3. const
- 유효 범위
- 블록 레벨 스코프(block-level scope)
- const로 선언된 변수도 let과 마찬가지로 선언된 블록 내에서만 유효하다
- 재선언 불가능
- let과 같다
- 재할당 불가능
- 한 번 할당된 값을 변경할 수 없다
- 즉, 상수(constant)를 선언하는 데 사용된다
- 단, 객체나 배열의 내용은 변경할 수 있다
예시:
const greeting = "Hello, world!";
console.log(greeting); // 출력: Hello, world!
// 아래 코드는 에러를 발생시킵니다.
// greeting = "Hello, JavaScript!";
// 객체의 내용은 변경할 수 있습니다.
const obj = { message: "Hello" };
obj.message = "Hello, JavaScript!";
console.log(obj.message); // 출력: Hello, JavaScript!
결론
- var는 함수 레벨 스코프를 가지며 재선언 및 재할당이 가능하다
- 하지만 현대적인 JavaScript 개발에서는 가급적 사용을 피하는 것이 좋다
- let은 블록 레벨 스코프를 가지며 재할당은 가능하지만 재선언은 불가능하다
- 변수의 값이 변경될 수 있는 경우에 사용한다
- const도 블록 레벨 스코프를 가지며 재선언 및 재할당이 불가능하다
- 값이 변경되지 않는 상수를 선언할 때 사용
'Frontend' 카테고리의 다른 글
렉시컬 환경이란 (0) | 2024.03.04 |
---|---|
함수 선언형과 함수 표현식의 차이 (0) | 2024.03.04 |
콜백 지옥 해결법 - Promise 와 async/await (0) | 2024.03.04 |
Promise와 Callback 차이 (0) | 2024.03.04 |
비동기 함수 (0) | 2024.03.02 |