JavaScript

Variables

lshjju 2026. 2. 14. 18:27

프로그래밍의 가장 기초이자 핵심인 **변수(Variable)**에 대해 알아보겠습니다.

변수는 데이터를 담아두는 '이름표가 붙은 상자'와 같습니다.


1. 변수란 무엇인가?

우리가 요리할 때 소금, 설탕을 각각의 통에 담아두고 필요할 때마다 꺼내 쓰는 것과 같습니다.

컴퓨터 메모리 어딘가에 데이터를 저장해 두고, 나중에 그 데이터를 다시 불러오기 위해 우리는 그 공간에 이름을 붙여주는데, 이것이 바로 변수입니다.


2. 변수의 기본 사용법 (3단계)

변수를 사용하려면 '선언', '할당', '참조'의 과정을 거칩니다.

① 선언 (Declaration)

컴퓨터에게 "이제부터 이런 이름의 상자를 사용할 거야"라고 알리는 단계입니다. let 또는 const 키워드를 사용합니다.

JavaScript
 
let myBox; // 'myBox'라는 이름의 변수를 선언함

② 할당 (Assignment)

선언한 변수 상자에 실제 값을 넣는 단계입니다. = (대입 연산자)를 사용합니다.

JavaScript
 
myBox = "사탕"; // myBox 변수에 "사탕"이라는 데이터를 저장함

③ 참조 (Reference)

변수에 담긴 값을 꺼내서 사용하는 단계입니다. 변수 이름만 적으면 그 안에 담긴 값이 튀어나옵니다.

JavaScript
 
console.log(myBox); // 출력: 사탕

3. 선언과 동시에 할당하기

보통은 선언과 할당을 따로 하지 않고 한 줄에 작성하여 코드를 간결하게 만듭니다.

JavaScript
 
let fruit = "사과"; // 선언과 할당을 동시에 수행
const PI = 3.14;   // 절대 변하지 않는 값(상수)은 const로 선언

4. 변수를 왜 사용하나요?

  1. 재사용성: 한 번 저장해두면 여러 번 반복해서 쓸 수 있습니다.
  2. 가독성: 숫자 1000000 대신 salary라는 이름을 쓰면 코드를 이해하기 훨씬 쉽습니다.
  3. 유지보수: 값이 바뀌었을 때 변수가 선언된 한 곳만 수정하면 그 변수를 쓰는 모든 곳에 자동으로 반영됩니다.

학습 정리

  • 변수는 데이터를 저장하고 관리하기 위한 메모리 공간의 이름이다.
  • **let**은 값이 바뀔 수 있는 변수에, **const**는 값이 변하지 않는 상수에 사용한다.
  • 변수 이름은 그 안에 담긴 내용이 무엇인지 알기 쉽게 짓는 것이 좋은 습관이다.

변수의 기초를 완벽하게 정복하셨습니다!



변수의 이름을 지을 때 반드시 지켜야 할 약속인 **명명 규칙(Naming Convention)**에 대해 알아보겠습니다.

변수 이름은 코드의 가독성과 협업의 효율성을 결정짓는 아주 중요한 요소입니다.


1. 반드시 지켜야 하는 필수 규칙 (Syntax)

이 규칙을 어기면 자바스크립트 엔진이 에러를 발생시켜 프로그램이 실행되지 않습니다.

  • 문자, 언더바(_), 달러 기호($)로 시작해야 합니다. (숫자로 시작할 수 없습니다.)
  • 대소문자를 엄격하게 구분합니다. (name과 Name은 완전히 다른 변수입니다.)
  • 예약어(Reserved Word)는 사용할 수 없습니다. (let, const, if, for, function 등 자바스크립트 문법으로 이미 정해진 단어들)

2. 개발자들의 약속: 카멜 케이스 (Camel Case)

자바스크립트에서는 여러 단어가 조합된 변수 이름을 지을 때 카멜 케이스 방식을 사용하는 것이 관례입니다.

  • 낙타의 등 모양: 첫 단어는 소문자로 시작하고, 두 번째 단어부터는 첫 글자를 대문자로 씁니다.
  • 예시: userName, userAge, myBestFriend, totalPrice

3. 좋은 변수 이름을 짓는 팁

코드를 읽는 사람(혹은 미래의 나)이 변수의 역할을 바로 알 수 있도록 지어야 합니다.

  • 의미 있는 이름을 사용하세요: a, b, x 보다는 userName, itemCount가 훨씬 좋습니다.
  • 상수는 대문자와 언더바를 활용하세요: 절대 변하지 않는 상수는 모두 대문자로 쓰고 단어 사이를 _로 연결합니다. (예: MAX_SIZE, API_KEY)
  • Boolean 변수는 is, has로 시작하세요: 참/거짓을 담는 변수는 질문 형태로 지으면 이해하기 쉽습니다. (예: isLoggedIn, hasToken)

📋 변수 이름 예시표

구분 좋은 예 나쁜 예 이유
필수 규칙 user1, _score 1user, score! 숫자로 시작 불가, 특수문자 제한
의미 전달 remainingTime t 변수의 역할을 알기 어려움
표기법(카멜) studentName studentname 가독성이 떨어짐
예약어 userLet let 문법 키워드는 변수명으로 사용 불가

🖥️ 실전 예제 코드

JavaScript
 
// 1. 대소문자 구분
let apple = "사과";
let Apple = "다른 사과";
console.log(apple === Apple); // false

// 2. 카멜 케이스 사용
let userLoginStatus = true;

// 3. 상수 표기법
const MAX_LOGIN_ATTEMPTS = 5;

// 4. 숫자로 시작하는 이름 (에러 발생)
// let 1stPlace = "Kim"; // SyntaxError

학습 정리

  • 변수 이름은 숫자로 시작할 수 없으며, 특수문자는 **_와 $**만 허용된다.
  • 자바스크립트의 표준 관습은 **카멜 케이스(camelCase)**이다.
  • 이름만 봐도 무엇을 하는 변수인지 알 수 있도록 구체적이고 의미 있게 지어야 한다.

변수 이름 짓는 법까지 마스터하며 기초 체력을 든든히 쌓으셨습니다!


'JavaScript' 카테고리의 다른 글

JS I/0  (0) 2026.02.15
JavaScript basic  (0) 2026.02.15
Data types  (0) 2026.02.14
Operator  (0) 2026.02.14
Conditional statement  (0) 2026.02.14