[JavaScript] 변수

📚 변수란 무엇인가요?

변수는 데이터를 저장하는 컨테이너로, 숫자나 문자와 같은 데이터를 저장할 수 있어요. 변수는 실제 데이터가 아니라, 데이터가 저장된 메모리의 주소를 가리키는 참조자에요.

 

변수는 마치 비어있는 상자와 같아서, 여러분이 원하는 어떤 값이나 정보를 넣어두고 필요할 때 다시 꺼내 쓸 수 있어요.

 

---

🖥️ 변수 선언

자바스크립트에서는 var, let, const 세 가지 키워드를 사용하여 변수를 선언할 수 있지만, 각각의 키워드에는 차이점이 있어요.

1. var

• 스코프: 함수 스코프. 함수 내에서 선언된 경우 해당 함수 내에서만 유효해요.
• 호이스팅: 선언된 위치와 상관없이 함수의 최상단으로 호이스팅 돼요.
• 재할당: 변수의 값을 재할당할 수 있어요.

console.log(x); // 호이스팅으로 인해 undefined 출력
var x = 5;
console.log(x); // 출력: 5
x = 10;
console.log(x); // 재할당 가능, 출력: 10

2. let

• 스코프: 블록 스코프. {}로 둘러싸인 블록 내에서만 유효해요.
• 호이스팅: 호이스팅이 발생하지만, 선언 전에 접근할 수 없는 '일시적 사각지대, TDZ(Temporary Dead Zone)'가 존재해요.
• 재할당: 변수의 값을 재할당할 수 있어요.

{
  console.log(y); // 오류! TDZ 때문에
  let y = 6;
  console.log(y); // 출력: 6
}
y = 11; // 오류! y는 블록 밖에서 접근 불가

3. const

• 스코프: 블록 스코프. {}로 둘러싸인 블록 내에서만 유효해요.
• 호이스팅: let과 유사하게 호이스팅이 발생하지만, 선언 전에 접근할 수 없어요.
• 재할당: 한 번 할당된 후에는 변수의 값을 변경할 수 없어요. 단, 객체나 배열 내부의 속성은 변경할 수 있어요.

{
  console.log(z); // 오류! TDZ 때문에
  const z = 7;
  console.log(z); // 출력: 7
}
z = 12; // 오류! z는 블록 밖에서 접근 불가, 재할당 불가

이러한 차이점들로 인해, var는 더 유연하지만 예측하기 어려운 동작을 일으킬 수 있어 현대 자바스크립트에서는 주로 let과 const를 사용하는 것이 권장돼요. let은 변할 수 있는 값을, const는 변하지 않는 값을 나타낼 때 사용해요.

반응형

---

🤔 변수 이름 짓기

변수의 이름을 식별자(identifier)라고 하며, 몇 가지 규칙을 따라야 해요.

• 변수 이름에는 영어 알파벳, 숫자, 밑줄(_), $를 사용할 수 있어요.
• 변수 이름은 숫자로 시작할 수 없어요.
• 변수 이름은 대소문자를 구분해요.
• 변수 이름을 길게 지을 경우에는 밑줄(_)이나 CamelCase를 사용해요.

1. 올바른 변수명 예시

// 영어 알파벳 사용
let name = "홍길동";

// 숫자 사용, 단 첫 글자는 숫자가 아니어야 함
let user1 = "김길동";

// 밑줄(_) 사용
let first_name = "이철수";

// $ 사용
let $price = 1000;

// 대소문자 구분
let age = 20;
let Age = 30;

// CamelCase 사용
let userName = "박영희";

// 밑줄(_) 사용하여 긴 변수명 작성
let user_address = "서울시 강남구";

2. 잘못된 변수명 예시

// 숫자로 시작
let 1number = 1; // 잘못됨

// 특수문자 사용 (밑줄(_)과 $를 제외한)
let user-name = "최진수"; // 잘못됨

// 공백 포함
let user name = "윤민수"; // 잘못됨

 

---

🚨 주의할 점

var, let, const 각각의 키워드는 독특한 특성을 가지고 있으며, 이를 잘 이해하고 사용하는 것이 중요해요.
특히 let과 const는 블록 스코프를 가지며, 호이스팅의 영향을 받지만 var와는 다르게 초기화 전에 접근할 수 없어요.

 

---

📖 결론

자바스크립트에서 변수를 사용하는 것은 프로그래밍의 기본이며, var, let, const의 차이점을 이해하는 것은 코드의 안정성과 가독성을 높이는 데 도움이 돼요.

 

---

🔗 추가 정보

• 자바스크립트의 변수에 대한 더 깊은 이해를 원하신다면, MDN Web Docs에서 자세한 정보를 찾아볼 수 있어요.
• 호이스팅에 대한 포스팅은 여기서 확인할 수 있어요.