เมื่อข้อมูลมีโครงสร้างซ้อนหลายชั้น (Nested) เช่น อาร์เรย์ของออบเจกต์ ที่แต่ละออบเจกต์มีอาร์เรย์ของออบเจกต์อีกที การคำนวณผลรวมต้องใช้การวนลูปซ้อน (Nested Loops) ตัวอย่างโค้ด acc + item.cost.costNum, 0); resEle.innerHTML += `Total CostNum = ${sum}<br>`; }); </script> &

IIFE (Immediately Invoked Function Expression) คือฟังก์ชันที่ถูกประกาศและเรียกใช้ทันทีในบรรทัดเดียวกัน ใช้สำหรับสร้าง Scope แบบ隔离 (Isolated Scope) ป้องกันการปนเป้อนของตัวแปรใน Global Scope ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta

ทุกฟังก์ชันใน JavaScript จะมี property prototype ถูกเพิ่มโดย JavaScript engine โดยอัตโนมัติ Property นี้เป็นออบเจกต์ที่มี property constructor ชี้กลับมาที่ฟังก์ชันตัวเอง ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport cont

Prototype เป็นกลไกหลักของ JavaScript สำหรับการสืบทอด (Inheritance) การเพิ่มเมธอดที่ prototype ทำให้ทุกอินสแตนซ์ที่สร้างจาก Constructor นั้นเข้าถึงเมธอดได้โดยไม่ต้องสร้างใหม่ซ้ำ ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewpo

Rest Destructuring (...rest) ช่วยให้เราแยกคุณสมบัติบางส่วนออกมา และรวมคุณสมบัติที่เหลือทั้งหมดไว้ในออบเจกต์ใหม่ ได้ในบรรทัดเดียว ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0

JavaScript อนุญาตให้แก้ไข prototype ของ built-in objects ได้ (เช่น Array.prototype, String.prototype, window.alert) แต่ ไม่แนะนำ เพราะอาจก่อให้เกิดความขัดแย้งกับโค้ดอื่นหรือไลบรารี ตัวอย่างโค้ด (เพื่อการศึกษาเท่านั้น) <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8

เมื่อใช้เมธอดของออบเจกต์เป็น Event Handler ต้องระวังเรื่อง this context เพราะใน callback function this จะชี้ไปที่ element ที่ trigger event ไม่ใช่ออบเจกต์ต้นทาง ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width

ใน JavaScript สามารถแชร์เมธอดระหว่างอินสแตนซ์หลายตัวได้โดยการกำหนดเมธอดไว้ที่ prototype ของ Constructor Function ทำให้ประหยัดหน่วยความจำ เพราะไม่ต้องสร้างเมธอดใหม่ทุกครั้งที่สร้างออบเจกต์ ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta

ฟังก์ชันใน JavaScript สามารถเรียกตัวเองได้ ซึ่งเรียกว่า Recursion หรือการทำซ้ำแบบเรียกตัวเอง เทคนิคนี้เหมาะสำหรับปัญหาที่สามารถแบ่งเป็นย่อยได้ในรูปแบบเดียวกัน ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=d

เมื่อข้อมูล JSON มีโครงสร้างซ้อนกัน (nested) เช่นออบเจกต์ที่มีอาร์เรย์ของออบเจกต์ ซึ่งแต่ละออบเจกต์ก็อาจมีอาร์เรย์ของออบเจกต์อีกที จะต้องใช้การวนลูปซ้อนกันเพื่อเข้าถึงข้อมูล ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport

JSON (JavaScript Object Notation) เป็นรูปแบบข้อมูลมาตรฐานที่นิยมใช้แลกเปลี่ยนข้อมูล การ parse JSON array ใน JavaScript ทำได้ง่ายด้วย JSON.parse() ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width,

ลูป for...in ใช้สำหรับวนลูปผ่านทุกคุณสมบัติ (properties) ของออบเจกต์ รวมถึงคุณสมบัติที่สืบทอดมาจากโปรโตไทป์ ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>

Default Parameters และ Rest Parameters ช่วยให้เราสร้างฟังก์ชันที่ยืดหยุ่นและจัดการพารามิเตอร์ได้หลากหลายรูปแบบมากขึ้น ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> &l

ไวยากรณ์ Spread (...) ช่วยให้เราขยายออบเจกต์ที่วนซ้ำได้ (iterable) เช่นอาร์เรย์ ในตำแหน่งที่คาดหวังอาร์กิวเมนต์ 0 ตัวขึ้นไป ทำให้สามารถส่งจำนวนพารามิเตอร์เป็นอาร์เรย์ไปยังฟังก์ชันได้ ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=

ตัวอย่างโค้ด ตัวอย่างต่อไปนี้แสดงการ import object ที่มี sub-objects และ arrays: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

ตัวอย่างโค้ด ตัวอย่างต่อไปนี้แสดงการใช้ template strings (backticks) สำหรับ formatted strings: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0&q

ข้อควรระวัง Arrow functions ไม่ควรใช้เป็น object method เพราะ arrow function ไม่มี this ของตัวเอง มันจะใช้ this จาก lexical scope ที่ล้อมรอบ (โดยปกติคือ window object) แทนที่จะเป็น object เอง สิ่งนี้อาจทำให้เกิดปัญหา เพราะเราจะกำหนดและเข้าถึง properties ของ window object แทน object ที่ต้องการ ตัวอย่

ตัวอย่างโค้ด ตัวอย่างต่อไปนี้แสดงการใช้ {} ใน JavaScript imports สำหรับ named exports: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g

ความหมายของ Closures Closures ใน JavaScript ช่วยให้เราสามารถเข้าถึง scope ของฟังก์ชันภายนอกจากฟังก์ชันภายในได้ แม้ว่าฟังก์ชันภายนอกจะทำงานเสร็จและ return แล้วก็ตาม หมายความว่าฟังก์ชันภายในจะเข้าถึงตัวแปรของฟังก์ชันภายนอกได้ตลอดเวลา ตัวอย่างโค้ด <!DOCTYPE html> <html lang="en">

ตัวอย่างโค้ด ตัวอย่างต่อไปนี้แสดงวิธีสร้าง private properties โดยใช้ closures: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &l