สลับค่า Boolean (Toggle Boolean) ใน JavaScript

การสลับค่า Boolean (True ↔ False) เป็นการทำงานพื้นฐานที่ใช้บ่อย สามารถทำได้หลายวิธี ซึ่งง่ายที่สุดคือใช้ตัวดำเนินการ NOT (!)

วิธีการสลับค่า Boolean

1. ใช้ Logical NOT (!) - วิธีมาตรฐานและเร็วที่สุด

let boolVal = true;
boolVal = !boolVal; // false
boolVal = !boolVal; // true

2. ใช้ XOR (^) กับ 1

let boolVal = true;
boolVal = boolVal ^ 1; // false (true = 1, 1^1=0)
boolVal = boolVal ^ 1; // true

4. ใช้ Ternary Operator

boolVal = boolVal ? false : true;

ตัวอย่าง: Toggle Boolean แสดงผลบนหน้าจอ

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Boolean</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; text-align: center; padding: 50px; }
        .result { font-size: 48px; font-weight: bold; color: blueviolet; margin: 20px 0; }
        button { padding: 12px 24px; font-size: 18px; cursor: pointer; background: #667eea; color: white; border: none; border-radius: 4px; }
        button:hover { background: #5568d3; }
    </style>
</head>
<body>
    <h1>สลับค่า Boolean (Toggle)</h1>
    <div class="result" id="boolDisplay">true</div>
    <button class="Btn" id="toggleBtn">สลับค่า (Toggle)</button>
    <p>ค่า Boolean จะสลับระหว่าง true ↔ false ทุกครั้งที่กด</p>

    <script>
        let boolVal = true;
        const display = document.getElementById("boolDisplay");
        const btn = document.getElementById("toggleBtn");
        
        btn.addEventListener("click", () => {
            boolVal = !boolVal; // สลับค่า
            display.textContent = boolVal;
            display.style.color = boolVal ? "#28a745" : "#dc3545"; // เขียว/แดง
        });
    </script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: แสดง true
กดปุ่มครั้งที่ 1: แสดง false
กดปุ่มครั้งที่ 2: แสดง true
... สลับไปเรื่อยๆ

การประยุกต์ใช้จริง

1. Toggle Class (Show/Hide)

const toggle = document.getElementById("toggle");
const panel = document.getElementById("panel");
let isOpen = false;

toggle.addEventListener("click", () => {
    isOpen = !isOpen;
    panel.classList.toggle("hidden", !isOpen);
    // หรือ panel.style.display = isOpen ? "block" : "none";
});

2. Toggle Theme (Dark/Light Mode)

let isDarkMode = false;

function toggleTheme() {
    isDarkMode = !isDarkMode;
    document.body.classList.toggle("dark-theme", isDarkMode);
    localStorage.setItem("darkMode", isDarkMode);
}

3. Toggle Loading State

let isLoading = false;

async function fetchData() {
    isLoading = !isLoading; // true
    showSpinner(isLoading);
    
    try {
        const data = await api.getData();
        return data;
    } finally {
        isLoading = !isLoading; // false
        showSpinner(isLoading);
    }
}

4. Toggle Array Membership (Add/Remove)

const selectedIds = new Set();

function toggleSelection(id) {
    if (selectedIds.has(id)) {
        selectedIds.delete(id);
    } else {
        selectedIds.add(id);
    }
    // หรือ: selectedIds.has(id) ? selectedIds.delete(id) : selectedIds.add(id);
}