자바스크립트 변수:
데이터 저장의 핵심 개념 총정리 (var, let, const 완벽 분석)
안녕하세요! 자바스크립트 개발을 시작하는 분들이라면 반드시 알아야 할 변수(Variable)에 대해 자세히 알아보는 시간을 갖겠습니다. 변수는 프로그램이 데이터를 기억하고 조작하는 데 필수적인 요소인데요. 자바스크립트에는 변수를 선언하는 세 가지 주요 방법이 있습니다: var, let, const. 각각 어떤 차이가 있고, 언제 사용해야 하는지 함께 살펴보시죠!
1. 변수란 무엇인가요?
변수는 말 그대로 '변할 수 있는 값'을 담는 공간 또는 '데이터를 저장하는 이름이 붙은 저장소'입니다. 마치 물건을 담는 상자처럼, 변수라는 상자에 숫자, 문자, 참/거짓 등의 다양한 데이터를 넣어두고 필요할 때마다 꺼내 쓰거나 내용을 바꿀 수 있습니다.
let userName = "김코딩"; // 'userName'이라는 변수에 '김코딩'이라는 문자열을 저장
let userAge = 25; // 'userAge'라는 변수에 25라는 숫자를 저장
console.log(userName); // 김코딩
console.log(userAge); // 25
2. 변수 선언 방식 3가지: var, let, const
자바스크립트에서 변수를 선언할 때는 세 가지 키워드 중 하나를 사용합니다. 각 키워드는 변수의 동작 방식에 중요한 차이를 만듭니다.
1) var: 오래된 방식, 하지만 알아둬야 할 특징
var는 자바스크립트 초창기부터 사용되던 변수 선언 방식입니다. 현재는 잘 사용되지 않지만, 기존 코드를 이해하기 위해서는 반드시 알아두어야 합니다.
- 함수 스코프(Function Scope):
var로 선언된 변수는 자신이 선언된 함수 안에서만 유효합니다. 함수 밖에서는 접근할 수 없죠. 만약 함수 밖에서 선언하면, 프로그램 전체에서 접근 가능한 전역 변수(Global Variable)가 됩니다.
function sayHello() {
var message = "안녕하세요!";
console.log(message); // "안녕하세요!" (함수 안에서는 접근 가능)
}
sayHello();
// console.log(message); // ReferenceError: message is not defined (함수 밖에서는 접근 불가)
var globalVar = "나는 전역 변수!";
console.log(globalVar); // "나는 전역 변수!" (어디서든 접근 가능)
var의 가장 큰 특징 중 하나는 같은 이름의 변수를 여러 번 선언해도 에러가 발생하지 않는다는 것입니다. 또한, 값도 자유롭게 재할당할 수 있습니다.
var myName = "Alice";
console.log(myName); // Alice
var myName = "Bob"; // 'myName'을 또 선언해도 에러가 안 나고 값이 변경됩니다.
console.log(myName); // Bob
myName = "Charlie"; // 재할당도 가능
console.log(myName); // Charlie
이러한 특징 때문에 코드가 복잡해질수록 의도치 않게 변수 이름이 중복되어 예상치 못한 버그를 유발할 수 있습니다.
var 변수는 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 '호이스팅'이라는 특성을 가집니다. 그래서 변수를 선언하기 전에 참조해도 에러가 나지 않고, undefined라는 초기값을 가집니다.
console.log(hoistedVar); // undefined (에러가 나지 않습니다!)
var hoistedVar = "호이스트됨";
console.log(hoistedVar); // 호이스트됨
이 역시 코드의 가독성을 해치고 혼란을 줄 수 있는 부분입니다.
var는 이제 사용하지 않는 것을 권장합니다! 위와 같은 문제점들 때문에 현대 자바스크립트 개발에서는 var 대신 let과 const를 주로 사용합니다.
2) let: 유연한 변수 선언, 현대 자바스크립트의 기본
let은 ES6(ECMAScript 2015)에서 도입된 새로운 변수 선언 방식입니다. var의 단점을 보완하기 위해 나왔으며, 현재 가장 일반적으로 사용되는 변수 선언 키워드입니다.
- 블록 스코프(Block Scope):
let은{}(중괄호)로 둘러싸인 블록 안에서만 유효합니다.if문,for문,while문 등 다양한 블록 안에서 선언된let변수는 해당 블록을 벗어나면 접근할 수 없습니다. 이는 코드의 예측 가능성을 높여줍니다.
if (true) {
let blockScopeVar = "나는 블록 안에서만 살아!";
console.log(blockScopeVar); // "나는 블록 안에서만 살아!"
}
// console.log(blockScopeVar); // ReferenceError: blockScopeVar is not defined (블록 밖에서는 접근 불가)
for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
// console.log(i); // ReferenceError: i is not defined
let은 var와 달리 같은 이름의 변수를 재선언할 수 없습니다. 이는 변수 이름 충돌로 인한 실수를 방지해줍니다. 하지만 변수에 저장된 값은 언제든지 새로운 값으로 재할당(변경)할 수 있습니다.
let car = "BMW";
console.log(car); // BMW
// let car = "Audi"; // SyntaxError: Identifier 'car' has already been declared (재선언 불가!)
car = "Mercedes"; // 값은 자유롭게 재할당 가능
console.log(car); // Mercedes
let 역시 호이스팅이 되긴 하지만, var와는 다르게 동작합니다. 변수가 선언되기 전에는 해당 변수에 접근할 수 없으며, 접근하려고 하면 ReferenceError가 발생합니다. 이 영역을 일시적 사각 지대(TDZ)라고 부릅니다.
// console.log(tdzVar); // ReferenceError: Cannot access 'tdzVar' before initialization (TDZ!)
let tdzVar = "TDZ를 경험해보세요!";
console.log(tdzVar);
3) const: 변하지 않는 상수를 선언할 때
const 또한 let과 함께 ES6에서 도입되었습니다. const는 '상수(Constant)'를 의미하며, 변하지 않는 값을 선언할 때 사용합니다.
- 블록 스코프(Block Scope):
let과 동일하게{}블록 스코프를 따릅니다. - 재선언 및 재할당 불가능:
const는let보다 더 엄격합니다. 한 번 선언되면 재선언도 안 되고, 재할당도 불가능합니다. 따라서const변수를 선언할 때는 반드시 초기값을 할당해야 합니다.
// const PI; // SyntaxError: Missing initializer in const declaration (초기값 필수!)
const PI = 3.14159;
console.log(PI); // 3.14159
// PI = 3.14; // TypeError: Assignment to constant variable. (재할당 불가!)
const: const로 객체나 배열을 선언했을 때는 조금 독특하게 동작합니다. 변수 자체를 다른 객체/배열로 재할당할 수는 없지만, 객체나 배열의 내부 속성(property)이나 요소(element)는 변경할 수 있습니다.
const user = {
name: "김철수",
age: 30
};
console.log(user.name); // 김철수
user.name = "이영희"; // 객체 내부의 'name' 속성 값은 변경 가능
console.log(user.name); // 이영희
// user = { name: "박보검" }; // TypeError: Assignment to constant variable. (객체 자체를 재할당하는 것은 불가!)
const numbers = [1, 2, 3];
numbers.push(4); // 배열에 새로운 요소 추가 가능
console.log(numbers); // [1, 2, 3, 4]
// numbers = [5, 6]; // TypeError: Assignment to constant variable. (배열 자체를 재할당하는 것은 불가!)
이 점을 잘 이해하는 것이 중요합니다. const는 "변수 바인딩 자체는 변하지 않는다"는 의미에 가깝습니다.
3. 변수 명명 규칙 (Variables Naming Rules)
변수 이름을 지을 때는 몇 가지 규칙을 지켜야 합니다.
- 문자, 숫자, 언더스코어(_), 달러 기호($)만 사용 가능합니다.
- 첫 글자는 숫자가 될 수 없습니다.
- 대소문자를 구분합니다. (
myVar와myvar는 다른 변수입니다.) - 자바스크립트의 예약어(Reserved Words)는 변수명으로 사용할 수 없습니다. (예:
if,for,function,return등) - 가독성을 위해 변수의 의미를 잘 나타내는 이름을 사용하는 것이 좋습니다. (
a,b보다는userName,totalPrice가 훨씬 좋습니다.) - 여러 단어를 조합할 때는 일반적으로 카멜 케이스(camelCase)를 사용합니다. (첫 단어는 소문자, 이후 단어의 첫 글자는 대문자. 예:
firstName,calculateTotalPrice)
4. 자바스크립트의 동적 타입 (Dynamic Typing)
자바스크립트는 동적 타입(Dynamic Typing) 언어입니다. 이는 다른 언어(예: Java, C++)와 달리, 변수를 선언할 때 데이터 타입을 미리 지정할 필요가 없다는 뜻입니다. 또한, 한번 선언된 변수에 다른 타입의 값을 자유롭게 재할당할 수 있습니다.
let data = 10; // 숫자를 할당
console.log(typeof data); // number
data = "안녕하세요"; // 문자열을 재할당
console.log(typeof data); // string
data = true; // 불리언 값을 재할당
console.log(typeof data); // boolean
이러한 유연성은 편리하지만, 때로는 예상치 못한 타입 오류를 유발할 수 있으므로 주의해야 합니다.
5. 그래서 언제 무엇을 사용해야 할까요? (가장 중요한 부분!)
현대 자바스크립트 개발에서 변수 선언은 다음과 같은 규칙을 따르는 것이 일반적인 권장 사항입니다.
- 기본적으로
const를 사용하세요.- 대부분의 값은 프로그램 실행 중에 변하지 않는 경우가 많습니다.
const를 사용하면 실수로 값을 변경하는 것을 막아 코드의 안정성을 높일 수 있습니다.
- 값이 변경될 수 있는 변수라면
let을 사용하세요.- 반복문(for loop)의 카운터 변수나, 사용자 입력에 따라 값이 변경되는 변수 등에
let을 사용합니다.
- 반복문(for loop)의 카운터 변수나, 사용자 입력에 따라 값이 변경되는 변수 등에
var는 사용하지 않는 것이 좋습니다.var의 함수 스코프, 재선언 가능, 복잡한 호이스팅 동작은 코드의 혼란과 버그를 유발할 가능성이 큽니다.- 새로운 프로젝트에서는
var를 완전히 배제하고let과const만 사용하는 것을 습관화하는 것이 좋습니다.
마무리
자바스크립트 변수에 대한 개념, var, let, const의 특징, 그리고 변수 명명 규칙까지 자세히 살펴보았습니다. 이 개념들은 자바스크립트 개발의 가장 기본적인 토대이므로, 확실하게 이해하고 넘어가는 것이 중요합니다.
이제 여러분도 let과 const를 적재적소에 활용하여 더욱 견고하고 읽기 쉬운 자바스크립트 코드를 작성할 수 있게 되셨을 겁니다. 궁금한 점이 있다면 언제든지 댓글로 남겨주세요! 다음 포스팅에서는 자바스크립트의 '데이터 타입'에 대해 알아보겠습니다. Happy Coding!
댓글 없음:
댓글 쓰기