Back to notes
foundations-cs
Featured

Data Structures Mastery: เลือกอาวุธให้ถูกงาน Array, Map, Set, หรือ Object?

เลิกใช้ Array กับทุกอย่าง! ทำความรู้จักพลังของ Map และ Set ที่จะช่วยให้โค้ดของคุณเร็วขึ้น 100 เท่า พร้อมตารางเปรียบเทียบเชิงลึก

January 30, 20262 min read readNNexis by Seereen

🛑 1. The Problem First: วันที่ "Array" กลายเป็นตัวถ่วง

ลองดูโจทย์ยอดฮิต: "ตรวจสอบว่า User ID นี้ติด Blacklist หรือไม่"

HLJS JAVASCRIPT
// ❌ Naive Approach: ใช้ Array กับข้อมูลปริมาณมหาศาล
const blacklist = [101, 102, 105, 108, ... , 999999]; // 1 ล้านตัว
const isBlocked = (id) => blacklist.includes(id);

ปัญหา: ทุกครั้งที่คุณเรียก isBlocked, JavaScript ต้องเดินไล่หาตั้งแต่ตัวแรกไปจนตัวสุดท้าย (O(N)) ถ้า User เป็นคนลำดับสุดท้าย คอมพิวเตอร์ต้อง "คิด" 1 ล้านรอบ! ถ้าเว็บคุณมีคนใช้เยอะๆ CPU จะพุ่งกระฉูดจนเว็บหน่วง นี่คือความต่างระหว่างคนเขียนโค้ด "รันได้" กับคนเขียนโค้ด "เป็น" ครับ


💡 2. Real-Life Analogy: การจัดของในกระเป๋า vs ตู้ล็อกเกอร์

  • Array []: เหมือน "กระเป๋าโดเรม่อน". คุณโยนของลงไปตามลำดับ เวลาจะหาของชิ้นเล็กๆ คุณต้องเทกระเป๋าแล้วควานหาทีละชิ้น (ช้าถ้าของเยอะ) แต่ถ้าคุณอยากได้ "ของชิ้นที่ 3" คุณหยิบได้ทันที
  • Set new Set(): เหมือน "คลับสมาชิกวีไอพี". ใครจะเข้าคลับต้องมีชื่อในลิสต์ และ "ห้ามมีชื่อซ้ำ" เวลาใครมาเช็คชื่อ รปภ. จะมองปุ๊บรู้ปั๊บว่ามีชื่อไหม (ไม่ต้องไล่ดูทุกคน)
  • Object {}: เหมือน "ตู้ยาที่มีป้ายแปะ". คุณมีป้ายชื่อชัดเจนว่า "แก้ปวด", "แก้ไข้" คุณหยิบยาตามป้ายได้เร็วมาก (O(1))
  • Map new Map(): เหมือน "เคาน์เตอร์รับฝากของ". คุณเอาอะไรมาฝากก็ได้ (Key) ไม่จำเป็นต้องเป็นชื่อ (String) คุณเอา "รองเท้า" มาแลก "เสื้อ" ก็ได้ (Key เป็น Object) และพนักงานจะจำลำดับการฝากได้เป๊ะ

🚀 3. Execution Journey: พลังของ Hash Table

เมื่อคุณใช้ Map หรือ Set, เบื้องหลัง JavaScript จะไม่เดินไล่หาทีละตัว แต่จะใช้วิธี "คำนวณที่อยู่ (Hashing)"

🛠 Step-by-step:

  1. Input: ส่ง Key (เช่น ID 105) เข้าไป
  2. Hashing: ระบบคำนวณ "เลขที่อยู่" ในหน่วยความจำทันที (เหมือนคำนวณพิกัด GPS)
  3. Jump: ข้ามไปที่จุดนั้นเป๊ะๆ (O(1)) ไม่ต้องเดินผ่าน ID 1 ถึง 104
  4. Result: ส่งค่ากลับมาภายในเสี้ยววินาที
HLJS JAVASCRIPT
// ✅ Best Practice: ใช้ Set สำหรับเซ็ตข้อมูลที่เน้นการเช็ค "Membership"
const blacklistSet = new Set([101, 102, 105, ...]);
const isBlockedPro = (id) => blacklistSet.has(id); // 🛠 รู้ผลทันทีไม่ว่าข้อมูลจะมีกี่ล้านตัว

🪤 4. The Junior Trap: ความสับสนระหว่าง Object และ Map

จูเนียร์มักจะใช้ Object ในการเก็บข้อมูลทุกอย่าง:

HLJS JAVASCRIPT
// ❌ Junior Trap: ใช้ Object เก็บข้อมูลที่ต้องการลำดับ (Order) หรือคอลเลกชันที่เปลี่ยนบ่อย
const users = { id1: "Joe", id2: "Jane" };

ระวัง:

  1. Object ไม่การันตีลำดับ (แม้ใน Engine ใหม่จะเริ่มดีขึ้น แต่ก็ไม่เป๊ะ)
  2. การหาจำนวนข้อมูล (size) ใน Object ต้องทำ Object.keys(obj).length ซึ่งช้า (O(N))
  3. Key ของ Object เป็นได้แค่ String หรือ Symbol เท่านั้น

⚖️ 5. The Why Matrix: เลือกอาวุธให้ถูกงาน

ประเภทจุดเด่น (Pro)จุดด้อย (Con)เหมาะกับสถานการณ์
Arrayเรียงลำดับ, มี Built-in เยอะหาของช้า (O(N))รายการสินค้า, ข้อมูลที่มีลำดับ
Setห้ามซ้ำ, เช็คได้เร็วแสง (O(1))วนลูปยากกว่า Arrayลบตัวซ้ำ, Blacklist, Tag List
Objectเขียนง่าย, เร็วมากสำหรับ Schema คงที่Key จำกัด, นับ Size ยากConfig, User Profile, JSON API
MapKey เป็นอะไรก็ได้, การันตีลำดับ, นับ Size ง่ายเขียนยาวกว่าเล็กน้อยDictionary, Metadata ที่ต้องการลำดับ

🎓 6. Senior Mindset Summary

การเป็น Senior คือการรู้ว่า "ไม่มีโครงสร้างข้อมูลไหนดีที่สุด มีแต่โครงสร้างข้อมูลที่ 'เหมาะสม' ที่สุด" การเลือกใช้ Map/Set ในที่ที่ควรใช้ ไม่ใช่แค่เรื่อง Performance แต่คือการสื่อสารกับทีมว่า "ข้อมูลชุดนี้ฉันต้องการเช็คว่ามีไหม" หรือ "ข้อมูลชุดนี้ห้ามซ้ำนะ" โดยไม่ต้องเขียน Doc เพิ่มครับ!

Share this note

© 2026 My Notes by Seereen