반응형
토스트데브입니다!
오늘은 JavaScript의 가장 기본 중 기본!
바로 변수 선언 방법에 대해 알아보겠습니다.
"변수 선언이 뭐가 어렵겠어?"라고 생각할 수 있지만, var, let, const의 차이를 제대로 이해하는 것은 굉장히 중요합니다.
🧾 변수란?
변수(variable)는 데이터를 저장할 수 있는 이름이 붙은 공간이에요.
JavaScript에서는 변수를 선언할 때 세 가지 키워드를 사용할 수 있습니다:
- var
- let
- const
이제 각각의 특징을 하나씩 살펴볼게요.
🟡 var – 과거의 변수 선언 방식
var name = "토스트";📌 특징
- ES5 이전의 방식 (오래된 코드에서 주로 사용됨)
- 함수 스코프(Function Scope): 함수 안에서만 유효함
- 중복 선언 가능 → 오류가 발생하지 않음
- 호이스팅 발생 → 선언이 코드의 최상단으로 끌어올려짐
console.log(a); // undefined
var a = 10;❗ 예상과 다르게 오류가 나지 않고 undefined가 출력됨!
🟢 let – 현재 가장 많이 사용하는 선언 방식
let age = 25;📌 특징
- ES6(ES2015) 이후 등장
- 블록 스코프(Block Scope): {} 중괄호 안에서만 유효
- 중복 선언 불가
- 호이스팅은 되지만 초기화 전 접근 불가 (TDZ)
let x = 10;
x = 20; // ✅ 가능let x = 10;
let x = 20; // ❌ 오류 발생: 중복 선언 불가
🔵 const – 상수 선언
const PI = 3.14;📌 특징
- 한 번 할당하면 값 변경 불가
- 블록 스코프(Block Scope) 사용
- 초기값 필수
const name = "토스트";
name = "감자"; // ❌ 오류 발생✅ 단, 객체나 배열은 내부 변경은 가능
const user = { name: "토스트" };
user.name = "감자"; // ✅ 가능!const는 “변수 자체의 재할당”만 막을 뿐, 객체의 내용 변경은 막지 않아요!
✅ var vs let vs const 요약 비교표
| 항목 | var | let | const |
| 스코프 | 함수 스코프 | 블록 스코프 | 블록 스코프 |
| 중복 선언 | 가능 | 불가 | 불가 |
| 재할당 | 가능 | 가능 | 불가 |
| 초기값 없이 선언 | 가능 | 가능 | ❌ 초기값 필수 |
| 사용 시기 | 오래된 코드 | 현재 권장 | 불변값에 권장 사용 |
🚀 어떤 걸 써야 할까?
💡 기본은 const, 필요한 경우만 let, var는 지양!
- 대부분의 경우 값 변경이 없는 const를 먼저 사용하세요.
- 값 변경이 필요한 경우에만 let 사용.
- var는 레거시 코드 유지보수 외에는 지양하는 것이 좋습니다.
🧭 마무리하며
변수 선언은 단순해 보이지만, 코드의 안정성과 버그 방지에 큰 영향을 주는 요소입니다.
let과 const의 스코프와 재할당 특성을 잘 이해하고, 상황에 맞게 선택하는 습관이 중요해요.
다음 글에서는 JavaScript의 데이터 타입에 대해 자세히 알아보겠습니다!
#JavaScript, #자바스크립트기초, #변수선언, #var, #let, #const, #프론트엔드개발, #웹개발, #코딩입문, #자바스크립트ES6, #ToastDev
반응형