JavaScript 입문 강의록

1. 변수 (Variable)

변수는 데이터를 저장하는 이름이 붙은 저장소다. 변수를 만드는 것을 선언이라고 하며, 키워드로 접근 범위를 지정한다.

키워드 종류

const로 선언한 변수에 다시 값을 할당하면 TypeError가 발생한다.

네이밍 규칙

• 알파벳, 숫자, _, $만 사용 가능
• 숫자로 시작 불가
• 예약어(if, let 등) 사용 불가
• 카멜케이스 사용 권장: userName, userAge
• 대소문자 구분: a와 A는 다른 변수

템플릿 리터럴

백틱(`)을 사용하면 문자열 안에 변수를 간편하게 삽입할 수 있다.

let userName = "panda";
let userAge = 20;
console.log(`${userName}은 ${userAge}살이다`);

---

2. 원시 데이터 타입 (Primitive Types)

원시 타입은 변경 불가능한(immutable) 값이다. 총 6가지가 있다.

종류

typeof null이 "object"를 반환하는 것은 JavaScript의 오래된 버그다. 수정되지 않고 유지되고 있다.

null vs undefined

• null: 개발자가 의도적으로 "값 없음"을 표현
• undefined: 변수를 선언했지만 아직 값을 주지 않은 상태 (자동 할당)

---

3. 타입 변환 (Type Coercion)

암묵적 타입 변환

자바스크립트 엔진이 자동으로 타입을 바꾸는 것. 예측하지 못하면 버그로 이어질 수 있다.

10 + '20'   // → '1020' (숫자가 문자열로 변환)
10 - '5'    // → 5      (문자열이 숫자로 변환)
+'true'     // → NaN
+''         // → 0
+true       // → 1

Falsy 값 — 조건식에서 false로 평가되는 값들:

Falsy 6총사 외의 모든 값은 **Truthy(참)**로 평가된다.

명시적 타입 변환

개발자가 의도적으로 타입을 바꾸는 것.

// → 문자열로
String(10)       // "10"  (null, undefined도 안전하게 처리)
(10).toString()  // "10"  (null/undefined에 사용하면 에러)

// → 숫자로
Number('10.01')  // 10.01
Number('10원')   // NaN  (완전한 숫자가 아니면 NaN)
parseInt('10.5') // 10   (정수만)
parseFloat('10.5') // 10.5

// → 불리언으로
Boolean(0)       // false
Boolean('hello') // true
!!0              // false  (! 연산자 두 번 사용)

---

4. 연산자 (Operator)

산술 연산자

10 + 3  // 13
10 - 3  // 7
10 * 3  // 30
10 / 3  // 3.333...
10 % 3  // 1  (나머지)
10 ** 3 // 1000 (거듭제곱)

할당 연산자

c += 3  // c = c + 3
c -= 2  // c = c - 2

증감 연산자

---

5. 비교 연산자 (Comparison Operator)

비교 연산자는 항상 불리언 값을 반환한다.

동등(==) vs 일치(===)

10 == '10'   // true  (암묵적 변환이 일어남)
10 === '10'  // false (타입이 다름)

예상치 못한 버그를 막기 위해 ===를 사용하는 것이 원칙이다.

문자열 비교

문자열은 유니코드 순서로 비교한다. 대문자가 소문자보다 앞에 온다.

'cat' >= 'Zoo'  // true ('c'의 유니코드가 'Z'보다 큼)

---

6. 논리 연산자 (Logical Operator)

단축 평가 (Short-circuit Evaluation)

평가 결과가 확정되면 나머지 연산을 건너뛴다. 그리고 결과를 결정한 값 자체를 반환한다.

'apple' || 'banana'  // 'apple'  (앞이 Truthy이므로 앞에서 확정)
false || 'banana'    // 'banana' (앞이 Falsy이므로 뒤로 넘어감)

'apple' && 'banana'  // 'banana' (앞이 Truthy이므로 뒤까지 평가)
false && true        // false    (앞에서 확정)

옵셔널 체이닝 (?.)

객체가 null 또는 undefined일 때 에러 대신 undefined를 반환한다.

let obj = null;
obj?.value  // undefined (에러 없음)

단축 평가(&&)와 달리, 0이나 ''같은 Falsy 값은 그대로 통과시킨다.

null 병합 연산자 (??)

좌항이 **null 또는 undefined**일 때만 우항을 반환한다. 0이나 ''는 유효한 값으로 취급한다.

null ?? '기본값'  // '기본값'
'' ?? '기본값'    // ''       (빈 문자열은 그대로 반환)
0 ?? '기본값'     // 0

---

7. 삼항 연산자 (Ternary Operator)

조건에 따라 두 값 중 하나를 선택한다.

조건 ? 참일 때 값 : 거짓일 때 값

let age = 20;
let result = age >= 20 ? "성인" : "미성년자";  // "성인"

중첩도 가능하지만, 과도하게 쓰면 가독성이 떨어지므로 주의한다.

let grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'D';

---

8. 조건문 (Conditional Statement)

if / else if / else

if (score >= 90) {
    console.log("매우 우수");
} else if (score >= 70) {
    console.log("양호");
} else {
    console.log("부족");
}

switch

하나의 변수를 여러 경우와 비교할 때 사용한다. 각 case 끝에 break를 빠뜨리면 다음 case로 계속 실행(fall-through)되므로 주의한다.

switch (fruit) {
    case '사과':
        console.log('사과입니다');
        break;
    case '바나나':
        console.log('바나나입니다');
        break;
    default:
        console.log('알 수 없는 과일');
}

---

9. 반복문 (Loop)

for

반복 횟수가 명확할 때 사용한다.

for (초기화; 조건식; 증감식) { ... }

// 1~10 중 짝수만 출력
for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) console.log(i);
}

---

부록

Q. ==와 === 중 뭘 써야 하나?
실무에서는 ===를 기본으로 쓴다. ==는 암묵적 변환 규칙이 복잡해 버그를 유발하기 쉽다.

Q. null과 undefined의 차이는?
null은 "없음"을 개발자가 직접 표현한 것, undefined는 JS가 자동으로 할당한 "아직 값이 없음"이다.

Q. ||와 ??의 차이는?
||는 Falsy(0, '', null, undefined 등) 전체를 걸러내고, ??는 오직 null과 undefined만 걸러낸다. 0이나 빈 문자열이 유효한 값인 상황에서는 ??를 써야 한다.

Q. ?.은 언제 쓰나?
객체나 중첩 프로퍼티에 접근할 때, 해당 객체가 null/undefined일 수 있는 상황에서 에러 없이 안전하게 접근하고 싶을 때 사용한다.