แยกฟังก์ชัน JS ตามงาน
ตัวอย่างการย่อย (สมุดบันทึก / รายการกรอง)
• render() — วาดรายการจากอาร์เรย์ลง DOM
• addItem(...) — แก้ข้อมูลแล้วเรียก render
• removeItem(id) — ลบแล้ว render
• getFiltered(list, query) — คืนอาร์เรย์ใหม่ ไม่ mutate มั่ว
• ผูก event หลังประกาศฟังก์ชัน
const notes = [];
function render() {
/* เคลียร์ list → สร้าง li จาก notes */
}
function addNote(title) {
notes.push({ id: Date.now(), title });
render();
}
เทคนิค: ให้ render เป็นทางเดียวที่แตะรายการใน DOM — ลดบั๊ก “ลืมอัปเดตหน้า”