Variables (변수)

 

🟨 Variables

데이터를 저장하기 위해 이름을 붙인 메모리 공간.

 

◼️ 변수의 기본 사용 방법 (3단계)

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

1️⃣ 선언 (Declaration)

변수를 생선하는 단계.

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

• let 또는 const 키워드를 사용하여 변수를 선언한다.

 

2️⃣ 할당 (Assignment)

변수에 값을 저장하는 단계.

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

• = (연산자)를 사용하여 오른쪽 값을 왼쪽 변수에 저장한다.

 

3️⃣ 참조 (Reference)

변수에 저장된 값을 사용하는 단계.

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

• 변수 이름을 작성하면 저장된 값을 가져올 수 있다.

 

◼️ 선언과 동시에 할당하기

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

• 변수는 선언과 할당을 한 줄에 함께 작성할 수 있다.

 

◼️ let 과 const 차이

🔹 let

let score = 10;

score = 20;

console.log(score); // 20

• 값을 다시 변경할 수 있는 변수이다. (재할당 가능)

 

🔹 const

const PI = 3.14;

PI = 5; // 에러 발생

• 한 번 저장한 값을 다시 변경할 수 없는 변수이다. (재할당 불가능)

 

❓ 변수를 왜 사용하나요 ❓

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

 

💥 변수의 생명주기 (Life Cycle) 💥

선언(Declaration) → 생성(Creation) → 초기화(Initialization) → 사용(Usage) → 스코프 종료 → 참조 확인 → 가비지 컬렉션(GC)

• 참조 있음 → 메모리 유지
• 참조 없음 → 가비지 컬렉션(GC) 대상

 

 

📋 자바스크립트 핵심 용어 정리 📋

용어	뜻	설명	예시 코드
Declare	선언	"이제부터 이런 이름의 상자를 쓸 거야!"라고 알리는 것	let box;
Assign	할당	만들어둔 상자에 값(물건)을 넣는 것	box = 10;
Initialization	초기화	변수를 선언하면서 처음 값을 넣는 것	let box = 10;
Reassign	재할당	이미 값이 있는 변수에 새로운 값을 넣는 것	box = 20;
Define	정의	변수나 함수의 의미와 값을 확정하는 것 (보통 선언 + 초기화)	let box = 10;
Redefine	재정의	이미 존재하는 식별자를 다시 선언하는 것 (var에서만 가능)	var a=1; var a=2;
Undefined	값이 없음	변수는 존재하지만 아직 값이 할당되지 않은 상태 (JS의 기본값).	let a; // undefined

 

📌 특히 헷갈리는 개념 📌

1️⃣ Declare vs Declaration

• Declare (동사): 변수를 선언하는 행동.
  • 예: "You need to declare a variable first."
• Declaration (명사): 선언문 자체.
  • 예: "Where is the variable declaration?"

2️⃣ Assign vs Assignment

• Assign (동사): 변수에 값을 넣는 행동.
  • 예: "Let's assign the value 5 to x."
• Assignment (명사): 할당문 또는 할당 과정.
  • 예: "This assignment causes an error."

3️⃣ Initialize vs Initialization

• Initialize (동사): 변수에 처음 값을 넣는 행동.
  • 예: "Initialize a with 10."
• Initialization (명사): 선언과 동시에 처음 값을 넣는 것.
  • 예: "This is the initialization of a."

👉 동사는 실제로 하는 행동이고, 명사는 그 행동의 결과나 개념을 의미한다.

 

🌟 꿀팁: 핵심 차이 요약

• Declare vs Define: 자바스크립트에서는 두 용어를 혼용하는 경우가 많지만, 엄밀히 구분하면 다음과 같습니다.
  • Declare (선언): 이름(식별자)을 등록하는 것.
  • Define (정의): 등록된 이름에 실제 값이나 로직(함수 등)을 부여하는 것.
• Const의 특징: const는 재할당(Reassignment)이 불가능한 변수입니다. 따라서 선언만 할 수 없고, 선언과 동시에 초기화(Initialization) 해야 합니다.

 

 

📍  POINT 📍 

✔️ 변수는 데이터를 저장하고 관리하기 위한 메모리 공간의 이름이다. ✔️

✔️ let은 값이 바뀔 수 있는 변수에, const는 값이 변하지 않는 상수에 사용한다. ✔️

✔️ 변수 이름은 그 안에 담긴 내용이 무엇인지 알기 쉽게 짓는 것이 좋은 습관이다. ✔️

 

---

 

⚙️ 실전 예제 코드 ⚙️

// 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