프론트엔드 스터디 5주차: JavaScript 시작 — 타입, 변수, 그리고 JS가 이상한 이유

// Java였다면: int x = 1;
// JS에서는
let x = 1; // 지금은 숫자
x = "hello"; // 이제 문자열 — 에러 없음
x = true; // 이제 불리언 — 에러 없음
x = null; // 이제 null — 에러 없음

0.1 + 0.2 === 0.3; // false
0.1 + 0.2; // 0.30000000000000004

Infinity - // 양의 무한대
  Infinity; // 음의 무한대
NaN; // Not a Number — 숫자가 아님을 나타내는 숫자(!)

1 / 0 - // Infinity
  1 / 0; // -Infinity
"hello" * 2; // NaN
NaN === NaN; // false — NaN은 자기 자신과도 같지 않음
Number.isNaN(NaN); // true — NaN 확인은 이걸 써야 함

let x; // undefined — 엔진이 자동 부여
let y = null; // null — 개발자가 의도적으로 "비어있음" 명시

// Java, Python이라면 블록 밖에서 x를 쓸 수 없음
// JS var는 다릅니다
if (true) {
  var x = 10;
}
console.log(x); // 10 — 블록 밖에서도 접근 가능!

// let은 예상대로 동작
if (true) {
  let y = 10;
}
console.log(y); // ReferenceError: y is not defined

console.log(x); // undefined — 에러가 아님!
var x = 5;
console.log(x); // 5

// JS 엔진이 실제로 실행하는 방식
var x; // 선언이 여기로 끌어올려짐
console.log(x); // undefined
x = 5; // 할당은 원래 위치에서 실행
console.log(x); // 5

var x = 1;
var x = 2; // 에러 없음, 그냥 덮어씀
console.log(x); // 2

let y = 1;
let y = 2; // SyntaxError: Identifier 'y' has already been declared

// + 연산자: 문자열이 있으면 문자열 연결 우선
"5" + 1; // "51"
1 + "5"; // "15"
1 + 2 + "3"; // "33" — 왼쪽부터 평가: 3 + "3" = "33"
"3" + 1 + 2; // "312" — "3" + 1 = "31", "31" + 2 = "312"

// -, *, / 연산자: 숫자 변환 시도
"5" - 1; // 4
"5" * "2"; // 10
"5" - "3"; // 2
"hello" - 1; // NaN

[] + []      // ""
[] + {}      // "[object Object]"
{} + []      // 0 (브라우저 콘솔에서는 다를 수 있음)
true + true  // 2
false + 1    // 1
null + 1     // 1
undefined + 1 // NaN

0 == false; // true
0 == ""; // true
"" == false; // true
null == undefined; // true
null == 0; // false  ← 이상하지 않나요?
NaN == NaN; // false  ← NaN은 자신과도 다름

// || : 왼쪽이 falsy면 오른쪽 반환, truthy면 왼쪽 반환
"hello" || "default"; // "hello"
"" || "default"; // "default"
null || "default"; // "default"
0 || 42; // 42

// && : 왼쪽이 falsy면 왼쪽 반환, truthy면 오른쪽 반환
"hello" && "world"; // "world"
"" && "world"; // ""
null && "world"; // null

// 기본값 설정
const name = userInput || "익명";

// 조건부 렌더링 (React에서 흔한 패턴)
isLoggedIn && <Dashboard />;

// null 병합 연산자 (??) — 0이나 ''도 유효한 값일 때 사용
const count = userCount ?? 0; // null, undefined일 때만 0으로 대체
// || 와 달리 0, ''는 그대로 유지됨