[JavaScript] #05 Javascript 기본문법, JavaScript 변수 선언 완전 정리! var, let, const 차이점은?

 

 

토스트데브입니다!
오늘은 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