Array vs Set ใน JavaScript - ความแตกต่างและเมื่อไหร่ใช้แต่ละอย่าง

Array และ Set เป็นโครงสร้างข้อมูลสำหรับเก็บชุดข้อมูล (Collections) แตกต่างกันที่: Array สั่งลำดับ (Ordered), ซ้ำได้, เข้าถึงด้วย Index / Set ไม่ซ้ำ (Unique), ไม่มี Index, เรียงตามลำดับที่เพิ่ม

ตารางเปรียบเทียบ

ตัวอย่าง: เปรียบเทียบ Array และ Set

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array vs Set</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        .result, .sample { font-size: 18px; font-weight: 500; }
        .sample { color: rebeccapurple; }
        .result { color: red; }
        button { padding: 8px 16px; margin: 10px 0; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Array vs Set ใน JavaScript</h1>
    <div class="sample" id="sample"></div>
    <div class="result" id="result"></div>
    <button class="Btn" id="convertBtn">แปลง Array → Set</button>
    <button class="Btn" id="demoBtn" style="background: #667eea; color: white;">Demo Operations</button>
    <h3>กดปุ่มเพื่อเปรียบเทียบและทดสอบ Operations</h3>

    <script>
        const sampleEle = document.getElementById("sample");
        const resultEle = document.getElementById("result");
        
        const arr = [2, 3, 4, 2, 3, 4, "A", "A", "B", "B"];
        sampleEle.innerHTML = `Array: [${arr}] (Length: ${arr.length})`;
        
        document.getElementById("convertBtn").addEventListener("click", () => {
            const set1 = new Set(arr);
            resultEle.innerHTML = `Set: { ${[...set1].join(", ")} } (Size: ${set1.size})
`;
        });
        
        document.getElementById("demoBtn").addEventListener("click", () => {
            const set1 = new Set(arr);
            resultEle.innerHTML = "";
            
            // Has - O(1)
            resultEle.innerHTML += `set.has(2): ${set1.has(2)}
`;
            resultEle.innerHTML += `set.has(99): ${set1.has(99)}

`;
            
            // Add / Delete
            set1.add(99);
            resultEle.innerHTML += `หลัง add(99): { ${[...set1].join(", ")} }
`;
            set1.delete(2);
            resultEle.innerHTML += `หลัง delete(2): { ${[...set1].join(", ")} }

`;
            
            // Iterate
            resultEle.innerHTML += "forEach: ";
            set1.forEach(v => resultEle.innerHTML += `${v} `);
            resultEle.innerHTML += "
";
            
            // Convert back
            resultEle.innerHTML += `
กลับเป็น Array: [${[...set1]}]`;
        });
    </script>
</body>
</html>

ผลลัพธ์

Array: [2, 3, 4, 2, 3, 4, A, A, B, B] (Length: 10)
Set: { 2, 3, 4, A, B } (Size: 5)

เมื่อไหร่ควรใช้ Array?

• ต้องการ Index-Based Access (arr[5])
• ต้องการ Sorting / Reordering บ่อย
• ต้องการ map/filter/reduce แบบ Native
• ข้อมูลเล็ก หรือต้อง Serialize เป็น JSON บ่อย
• ต้องการ Duplicate Values

เมื่อไหร่ควรใช้ Set?

• ต้องการ Unique Values (Deduplication)
• ต้องการ has() บ่อย (O(1) vs O(n))
• ต้องการ Set Operations (Union, Intersection, Difference)
• Key เป็น Object/Function/NaN (Array ใช้ Index เท่านั้น)
• ไม่ต้องการ Random Access

Performance Comparison

const N = 100000;
const arr = Array.from({length: N}, (_, i) => i);
const set = new Set(arr);

// Search: Set ชนะมาก
console.time("Array includes");
arr.includes(99999); // ~O(n)
console.timeEnd("Array includes"); // ~2-5ms

console.time("Set has");
set.has(99999); // O(1)
console.timeEnd("Set has"); // ~0.01ms

// Insert: Set ชนะ (ถ้าไม่สน Index)
console.time("Array push");
arr.push(N);
console.timeEnd("Array push"); // ~0.01ms

console.time("Set add");
set.add(N+1);
console.timeEnd("Set add"); // ~0.01ms

// Memory: Array ใช้น้อยกว่า
// Set ใช้ Hash Table + Overhead

การแปลงระหว่างกัน

// Array → Set (Deduplicate)
const unique = [...new Set(array)];

// Set → Array
const array = [...set];
// หรือ
const array = Array.from(set);

// Array → Set → Array (Common Pattern)
function unique(array) {
    return [...new Set(array)];
}