삼항 조건 연산자 (`? :`)와 타입 연산자 (`typeof`)

오늘은 삼항 조건 연산자 (? :)와 타입 연산자 (typeof)에 대해 공부했다.
삼항 연산자는 if-else를 간단하게 표현할 수 있는 연산자이며,
typeof 연산자는 값의 데이터 타입을 확인하는 데 사용된다.

---

🔹 삼항 조건 연산자 (? :)

📌 기본 개념

삼항 연산자는 조건식이 참이면 첫 번째 값을, 거짓이면 두 번째 값을 반환한다.

조건식 ? 참일 때 실행 : 거짓일 때 실행;

✅ 예제

let age = 20;
let result = (age >= 18) ? "성인" : "미성년자";
console.log(result);

• age가 18 이상이면 "성인"을 출력.
• 그렇지 않으면 "미성년자"를 출력.

---

🔹 삼항 연산자를 활용한 DOM 스타일 변경

<div class="box" style="width: 100%; height: 100px; background-color: orange;"></div>

<script>
    console.log(window.innerWidth);
    const boxEl = document.querySelector(".box");
    (window.innerWidth < 300) ?
        (boxEl.style.backgroundColor = 'green') && (boxEl.style.height = "50px")
        : console.log("거짓입니다.");
</script>

✅ 설명:

• window.innerWidth가 300px보다 작으면 배경색을 green으로 변경하고 높이를 50px로 설정.
• 그렇지 않으면 "거짓입니다."를 출력.

---

🔹 입력값을 조건에 따라 처리

const data = prompt("값을 입력하세요");
(data > 10) ? console.log("참입니다.") : console.log("거짓입니다.");

✅ 설명:

• 입력값이 10보다 크면 "참입니다."를 출력.
• 10 이하이면 "거짓입니다."를 출력.

---

📌 삼항 연산자의 장점

✅ if-else보다 짧고 가독성이 좋음
✅ 단순한 조건 분기에 적합
✅ 값을 직접 변수에 할당 가능

---

🔹 타입 연산자 (typeof)

📌 기본 개념

타입 연산자는 변수나 값의 데이터 타입을 문자열로 반환해.

console.log(typeof 값);

✅ 예제

console.log(typeof 10);      // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true);    // "boolean"
console.log(typeof {});      // "object"
console.log(typeof null);    // "object" (자바스크립트의 버그)
console.log(typeof undefined); // "undefined"
console.log(typeof function(){}); // "function"

---

📌 타입에 따른 처리 예제

let value = "Hello";
let result = (typeof value === "string") ? "문자열입니다." : "문자열이 아닙니다.";
console.log(result);

✅ 설명:

• value의 타입이 "string"이면 "문자열입니다."를 출력.
• 그렇지 않으면 "문자열이 아닙니다."를 출력.

---

🔹 오늘 배운 것 정리

• 삼항 연산자는 조건식이 참이면 첫 번째 값, 거짓이면 두 번째 값을 반환.
• typeof 연산자는 값의 데이터 타입을 문자열로 반환.
• 삼항 연산자를 활용하면 코드를 간결하게 작성할 수 있음.