변수와 상수의 차이와 활용
JavaScript에서 변수(variable)와 상수(constant)는 데이터를 저장하고 관리하는 핵심 요소이다.
var, let, const는 각각의 특성과 용도가 다르며, 코드 작성 시 이를 적절히 사용하는 것이 중요하다.
변수와 상수 선언 방법
1. var
- 특징:
- 재선언 및 재할당 가능.
- 함수 스코프(Function Scope)를 가짐.
- 블록 스코프를 지원하지 않음.
- 사용 예:
var name = "John";
name = "Doe"; // 재할당 가능
주의: var는 의도치 않은 호이스팅 문제를 유발할 수 있으므로 현대 코드에서는 let과 const 사용이 권장된다.
2. let
- 특징:
- 재선언 불가능하지만 재할당 가능.
- 블록 스코프(Block Scope)를 지원.
- 사용 예:
let age = 25;
age = 26; // 재할당 가능
3. const
- 특징:
- 재선언 및 재할당 불가능.
- 반드시 선언 시 초기화 필요.
- 블록 스코프를 지원.
- 사용 예:
const PI = 3.14;
// PI = 3.15; // Error: 재할당 불가능
변수와 상수의 주요 차이점
| 특성 |
var |
let |
const |
| 재선언 가능 여부 |
Yes |
No |
No |
| 재할당 가능 여부 |
Yes |
Yes |
No |
| 초기화 필요 여부 |
No |
No |
Yes |
| 스코프 |
함수 스코프 |
블록 스코프 |
블록 스코프 |
스코프(Scope)와 호이스팅(Hoisting)
1. 스코프
- 함수 스코프: var로 선언된 변수는 함수 내에서만 유효.
- 블록 스코프: let과 const는 {}로 감싼 블록 내에서만 유효.
if (true) {
let x = 0;
}
console.log(x); // Error: x is not defined
2. 호이스팅
- JavaScript는 변수 선언을 코드의 상단으로 끌어올리는 호이스팅을 수행한다.
- var는 선언부만 끌어올려져 초기화되지 않은 상태로 처리된다.
console.log(a); // undefined
var a = 5;
console.log(b); // Error: Cannot access 'b' before initialization
let b = 10;
let과 const의 추천 사용법
1. const를 기본적으로 사용.
값이 변하지 않는 데이터를 선언할 때 사용
2. 필요할 때만 let 사용.
동적으로 변경되는 데이터에 적합
let userCount = 0;
userCount++;
3. var는 사용하지 않음.
var의 함수 스코프와 호이스팅 문제는 유지보수에 적합하지 않다.
객체와 배열의 상수 처리
const로 선언된 객체와 배열은 내부 데이터 변경이 가능하다.
const user = { name: "Alice" };
user.name = "Bob"; // 가능
const numbers = [1, 2, 3];
numbers.push(4); // 가능
하지만 참조 자체를 변경하는 것은 불가능합니다:
user = { name: "Charlie" }; // Error: 재할당 불가능
변수 선언 관련 유용한 팁
1. 명확한 변수 이름 사용:
변수의 목적을 쉽게 알 수 있도록 작성
let userAge = 30; // 명확한 변수명
2. 초기화와 함께 선언:
선언과 초기화를 동시에 하여 예측 가능한 코드를 작성
const isLoggedIn = false;
3. 스코프를 잘 이해하고 활용:
불필요한 전역 변수 사용을 지양
요약
- var 대신 let과 const를 사용
- const는 값을 변경하지 않을 때, let은 변경 가능성이 있을 때 사용한다.
- 스코프와 호이스팅의 작동 방식을 이해하면 코드 오류를 줄이고 가독성을 높일 수 있다.
최적의 코드 작성: 명확한 변수 선언과 스코프 활용은 코드 품질을 높이고, 협업 시 이해도를 향상시킨다.
참조:
https://tcpschool.com/javascript/js_intro_syntax#google_vignette
https://ko.javascript.info/variables
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EB%B3%80%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85#thankYou
