[javaScript] 2. 변수와 자료형 / 호이스팅(Hoisting) /연산자

변수와 자료형

동적 타입 언어

• JS는 변수의 타입을 명시적으로 지정하지 않음
• 실행 중에 값에 따라서 자동으로 타입이 결정됨

 

이해가 잘 안가니까  좀 더 쉽게 설명하자면 

 

1. 재할당 (값 바꾸기)

let으로 만든 변수는 이름표(변수명)는 그대로 두고, 그 안에 담긴 내용물(값)만 바꿔치기할 수 있다. 이것이 재할당

• 예시: name2라는 이름의 통에 처음에는 "최지원"을 담았다가, 나중에 "김수민"으로 바꿔 넣는 것과 같다. 통 이름은 그대로 name2 유지 
• 코드

let name2 = "최지원"; // 통 만들기
name2 = "김수민"; // 내용물만 바꿈 (성공)

 

2. 재선언 (중복 만들기)

반면 재선언은 같은 이름으로 똑같은 이름표를 또 만드는 행위.

자바스크립트는 이를 "이름이 겹쳐서 누가 진짜인지 헷갈리니까 안 돼!"라며 막아버리는 것

• 예시: 이미 name2라는 통이 있는데, "똑같이 name2라고 이름 붙인 통을 또 만들어줘!"라고 하면 프로그램이 고장남.

let name2 = "최지원";
let name2 = "김수민"; // 에러 발생! (이미 이 이름을 가진 변수가 있는데 또 만들려고 하니 차단)

요약하자면

• 재할당(name2 = "김수민"): 이미 있는 통의 내용물을 바꾸는 것 (가능).
• 재선언(let name2 = "김수민"): 같은 이름의 통을 또 하나 더 만들려고 하는 것 (불가능).

3.네이밍 규칙

• 영어를 사용하며 문자와 숫자 모두 사용 가능
• 특수문자는 언더스코어(_)와 달러($)만 사용 가능
• 숫자로 시작하면 안 됨
• 키워드를 변수명으로 사용하면 안 됨
• 변수명·함수명 → camelCase / class·id 속성명 → kebab-case

4.자료형 (Data Type)

• 여섯 개의 원시 타입과 한 개의 Object 타입이 있음
  • 원시: Number, String, Boolean, undefined, null, Symbol
  • Object: Object, Array, Function …

 

---

 

 

< 호이스팅(Hoisting)은 처음 접하면 매우 혼란스러운 이유?>

 

'끌어올려진다'는 말 때문에 코드가 물리적으로 이동한다고 생각하기 쉽지만,

사실은 자바스크립트 엔진이 코드를 실행하기 전 단계에서 발생하는 '사전 작업'이라고 이해하는 것이 가장 정확하다.

1. 호이스팅이 발생하는 이유

자바스크립트 엔진은 코드를 한 줄씩 실행하기 전에,

먼저 전체 코드를 훑으면서 var, let, const, function으로 선언된 변수나 함수를 찾아서 미리 '기억(메모리 등록)'해 둔다.

이 작업 때문에 코드 실행 시점에서는 선언문이 마치 위로 올라가 있는 것처럼 동작하게 되는 것.

2. 왜 var는 안 쓰고 let, const를 쓰나?

이 둘의 호이스팅 방식이 다르기 때문

var의 경우 (예측 불가능)

var는 선언과 동시에 undefined라는 값으로 초기화까지 해버린다.

이러면 개발자가 실수로 변수를 선언하기 전에 사용해도 에러가 안 나서 나중에 큰 버그가 됩니다.

let, const의 경우 (안전함)

let과 const도 호이스팅은 된다.

하지만 선언문 위치에 도달하기 전까지 "이 변수는 존재하지만 아직 사용할 수 없다"라는 상태(TDZ, 일시적 사각지대)에 가둔다.

이 덕분에 변수를 선언하기 전에 쓰려고 하면 바로 에러를 띄워주어, 개발자가 실수를 바로 잡을 수 있게 해줌

3. "선언만 끌어올리고 할당은 그대로 남는다"는 의미

이 부분이 가장 중요한데, 선언(변수의 이름만 만드는 것)과 할당(값을 넣는 것)을 분리해서 봐본다.

컴퓨터가 읽을 때는 실제로 이렇게 바뀐 것처럼 작동

 

요약

• 호이스팅: 코드를 실행하기 전 엔진이 선언문을 먼저 읽어 메모리에 등록하는 것.
• var: 선언과 함께 undefined로 초기화까지 해버려서, 선언 전에도 값이 있는 것처럼 보여 위험함.
• let/const: 호이스팅은 되지만 초기화는 안 해줌. 따라서 선언 전에 쓰면 에러가 나서 안전함.

처음 배우실 때는 "선언문(let, const, function)은 무조건 코드 가장 위쪽에서 작성하는 습관을 들이자"고 생각하면 호이스팅으로 인한 문제를 완벽히 피할 수 있다.

 

 

• var의 문제점:
  • 선언 전 참조: 에러 없이 undefined가 출력되어 버그를 찾기 어렵게 만든다.
  • 재선언 가능: 같은 이름으로 변수를 다시 만들어도 에러가 나지 않아 큰 혼란을 준다.
• let / const 의 장점:
  • TDZ(Temporal Dead Zone): 변수 선언문이 실행되기 전까지는 변수에 접근하는 것을 철저히 막는다.
  • 덕분에 "변수를 선언하지 않고 사용했다"는 사실을 바로 알 수 있어 매우 안전
  • 재선언 불가: 같은 이름으로 변수를 다시 만들려고 하면 즉시 에러를 띄워 실수를 방지

 

 

---

 

연산자는 거듭제곱(Exponentiation)을 계산하는 것

연산자	명칭	예시	결과
+	더하기	10 + 3	13
-	빼기	10 - 3	7
*	곱하기	10 * 3	30
/	나누기	10 / 3	3.333...
%	나머지	10 % 3	1
**	거듭제곱	2 ** 10	1024

 

 

 

 

비교 연산자

 두 개의 값(피연산자)을 비교하여 그 결과가 참(true)인지 거짓(false)인지를 판별하는 연산자

조건문이나 반복문에서 특정 조건을 검사할 때 주로 사용된다.

연산자	의미	설명
==	동등 연산자	두 값이 같은지 비교 (타입이 다르면 변환 후 비교)
===	일치 연산자	두 값과 타입이 모두 같은지 비교 (권장)
!=	부등 연산자	두 값이 다른지 비교 (타입이 다르면 변환 후 비교)
!==	불일치 연산자	두 값 또는 타입이 다른지 비교
>	크다	왼쪽 값이 오른쪽 값보다 큰지 확인
<	작다	왼쪽 값이 오른쪽 값보다 작은지 확인
>=	크거나 같다	왼쪽 값이 오른쪽 값보다 크거나 같은지 확인
<=	작거나 같다	왼쪽 값이 오른쪽 값보다 작거나 같은지 확인

 

 

핵심 주의사항:      == vs ===

자바스크립트에서 값을 비교할 때는 === (일치 연산자)를 사용하는 것이 좋다.

==는 비교 과정에서 자바스크립트가 자동으로 타입을 변환(Type Coercion)하기 때문에 예기치 않은 결과가 발생할 수 있기 때문

console.log(5 == '5'); // true (타입은 다르지만 값만 비교)
console.log(5 === '5'); // false (값은 같지만 타입이 숫자와 문자열로 다름)
console.log(0 == false); // true
console.log(0 === false); // false

비교 연산의 결과는 항상 불리언(Boolean) 데이터 타입인 true 또는 false로 반환된다.