SMALL
안녕하세요😊 코드카인 여러분!
프로그래밍을 처음 배우면 꼭 듣게 되는 단어들이 있습니다. 바로 변수와 상수입니다. 오늘은 var
, let
, const
를 중심으로 변수와 상수의 차이를 재미있게 알아볼게요!
🛠️ 변수란 무엇인가요?
변수(Variable)는 변할 수 있는 데이터를 저장하는 그릇이에요. 우리가 요리할 때 재료를 담는 볼처럼 생각해볼까요? 이 볼에 어떤 재료를 담을지는 바꿀 수 있죠. JavaScript에서는 데이터를 담는 그릇을 만드는 방법으로 var
, let
, const
를 사용합니다.
🚀 var
, let
, const
의 차이점
1. var
: 옛날 방식 그릇
var
는 오래된 JavaScript 방식이에요. ES6 이전에 주로 사용되었지만, 몇 가지 문제가 있어서 요즘은 잘 쓰지 않아요.
특징:
- 함수 스코프(Function Scope): 함수 안에서만 유효해요.
- 호이스팅(Hoisting): 선언하기 전에 사용할 수 있어요. 하지만 값은
undefined
가 됩니다.
예제:
console.log(x); // undefined (호이스팅) var x = 10; console.log(x); // 10
문제점: 같은 이름의 변수를 여러 번 선언할 수 있어서 코드가 복잡해질 수 있어요.
var x = 10; var x = 20; // 문제 없이 동작
2. let
: 현대적인 다용도 그릇
let
은 현대 JavaScript에서 가장 많이 쓰이는 변수 선언 방법이에요.
특징:
- 블록 스코프(Block Scope):
{}
블록 안에서만 유효해요. - 재선언 불가: 같은 이름으로 다시 선언할 수 없어요.
- 블록 스코프(Block Scope):
예제:
let y = 10; console.log(y); // 10 y = 20; // 값 변경 가능 console.log(y); // 20
호이스팅: 선언하기 전에 접근하면 에러가 발생해요.
console.log(z); // ReferenceError let z = 30;
3. const
: 변하지 않는 그릇
const
는 상수(Constant)를 선언할 때 사용해요. 한 번 값을 넣으면 절대 변경할 수 없어요.
특징:
- 값 변경 불가: 선언 후 값 변경이 불가능해요.
- 블록 스코프(Block Scope):
let
과 동일하게{}
안에서만 유효해요.
예제:
const pi = 3.14; console.log(pi); // 3.14 pi = 3.14159; // TypeError: Assignment to constant variable
참고: 객체나 배열은 값을 수정할 수 있어요. 상수는 참조만 고정됩니다.
const arr = [1, 2, 3]; arr.push(4); // 가능 console.log(arr); // [1, 2, 3, 4]
🍴 일상 속 비유: 그릇의 차이점
var
: 뚜껑 없는 그릇. 어디에나 열려 있어서 먼지가 들어갈 수 있어요.let
: 뚜껑이 있는 안전한 그릇. 필요한 곳에서만 열어요.const
: 밀봉된 용기. 내용물을 절대 바꿀 수 없어요.
📝 어떤 걸 사용해야 할까요?
- 값을 변경하지 않는 데이터:
const
- 변경 가능한 데이터:
let
- 새로운 코드 작성:
var
는 사용하지 않기!
💻 예제 코드와 결과
function variableExample() {
if (true) {
var a = "I am var";
let b = "I am let";
const c = "I am const";
}
console.log(a); // "I am var"
console.log(b); // ReferenceError
console.log(c); // ReferenceError
}
variableExample();
😊 마무리하며..
var
, let
, const
는 JavaScript에서 가장 기본적이지만 중요한 요소입니다. 각자의 특성을 이해하고 적절히 사용하는 것이 코드의 품질을 높이는 비결이에요. 꾸준히 연습하면서 이 개념을 꼭 잡아보세요!
여러분의 코딩 여정에 응원을 보냅니다! 🚀
728x90
반응형
SMALL
'JavaScript > JavaScript 기본 문법' 카테고리의 다른 글
"JavaScript 연산자 완전 정복! 쉽게 배우는 필수 개념 🚀 - 코드카인 티스토리" (0) | 2025.02.01 |
---|---|
조건과 반복의 마법? 제어문으로 코딩의 세계 정복하기! - 코드카인 티스토리 (0) | 2025.01.25 |
처음 배우는 자바스크립트 데이터 타입, 쉽고 간단하게 - CodeCaine 티스토리 (0) | 2025.01.22 |