การวนลูปแบบ Asynchronous (รอ Promise ทีละรอบ) ทำได้ด้วย for...of + await ภายใน async function ไม่สามารถใช้ forEach กับ await ได้โดยตรง เพราะ forEach ไม่รอ Promise ตัวอย่างโค้ด setTimeout(resolve, ms)); async function asyncLoop() { for (let i = 0; i { asyncLoop(); }); </s

การว่างเปล่าอาร์เรย์ใน JavaScript มีหลายวิธี แต่พฤติกรรมต่างกัน: บางวิธีสร้างอาร์เรย์ใหม่ บางวิธีแก้ไขอาร์เรย์เดิม (Mutate) การเลือกขึ้นอยู่กับว่า Variable เป็น const หรือ let และว่ามี Reference อื่นชี้ไปที่อาร์เรย์เดิมหรือไม่ ตัวอย่างโค้ด 0) c.pop(); resEle.innerHTML += while pop → + c +

Callback Function คือฟังก์ชันที่ส่งผ่านอีกฟังก์ชันหนึ่ง (Higher-Order Function) เพื่อเรียกใช้ภายหลัง การส่งพารามิเตอร์ให้ Callback ทำได้ 2 วิธีหลัก: 1) Closure (ฟังก์ชันภายในเข้าถึงตัวแปรภายนอก) 2) Partial Application / Bind (สร้างฟังก์ชันใหม่ผูกพารามิเตอร์ไว้ล่วงหน้า) ตัวอย่างโค้ด { const

Fat Arrow Function (Block Body) ใช้ Curly Braces {} ครอบ Function Body ต้องใช้ return โดยตรง (Explicit Return) เหมาะสำหรับ Logic ที่ซับซ้อน หลาย Statement หรือมี Side Effects Syntax { let total = 0; for (const n of nums) total += n; return total; }; ตัวอย่างโค้ด { resEle.textContent

Concise Arrow Function (Concise Body) เป็นรูปแบบย่อของ Arrow Function ที่มีเพียง Expression เดียว — ไม่ต้องเขียน {} และ return ค่าจะถูกคืนอัตโนมัติ (Implicit Return) Syntax ({ name, age }); ตัวอย่างโค้ด { resEle.textContent = ผลรวม 32 + 19 = + add(32, 19); }); </script> </

Arrow Functions มี 2 รูปแบบหลัก: Fat Arrow (Block Body) และ Concise Arrow (Expression Body) ความแตกต่างคือการใช้ {} และ return Syntax Comparison ({ name, age }); ตัวอย่างโค้ด { resEle.innerHTML = บวก (Concise): 32 + 19 = + add(32, 19) + <br>; resEle.innerHTML += คูณ (Fat): 32

JavaScript ไม่มี Mandatory Parameters (พารามิเตอร์บังคับ) ในตัว แต่สามารถเลียนแบบได้ 2 วิธี: 1) Default Parameters (ES2015) กำหนดค่าเริ่มต้นใน Signature 2) Logical OR (||) ภายในฟังก์ชัน — วิธีเก่าที่ยังเห็นบ้าง ตัวอย่างโค้ด { resEle.innerHTML = Sum (default params) = + add() + <br>;

ใน JavaScript มีหลายวิธีตรวจสอบว่าอ็อบเจกต์มีพร็อพเพอร์ตี้หรือไม่: obj.hasOwnProperty(prop), prop in obj, Object.hasOwn(obj, prop) (ES2022) แต่ละอย่างมีความแตกต่างเล็กน้อย ตัวอย่างโค้ด { // วิธีที่แนะนำ (ES2022) if (Object.hasOwn(obj, firstName)) { resEle.textContent = มี firs

NodeList (จาก querySelectorAll, getElementsByClassName, ฯลฯ) เป็น array-like object ไม่ใช่ Array จริง — ไม่มี map, filter, reduce, forEach (ยกเว้น forEach ที่ NodeList มีอยู่แล้ว) ต้องแปลงเป็น Array ก่อนจึงจะใช้เมธอด Array ได้ครบ ตัวอย่างโค้ด { item.style.backgroundColor = red; });

Error TypeError: undefined is not an object เกิดขึ้นเมื่อพยายามเข้าถึงพร็อพเพอร์ตี้หรือเรียกเมธอดบนค่า undefined ข้อความนี้เฉพาะ Safari/WebKit (Chrome/Edge/Firefox แสดง Cannot read properties of undefined) ตัวอย่างโค้ด { try { alert(person.name); // ❌ TypeError } catch (err) {

switch statement สามารถมี return ได้ ก็ต่อเมื่ออยู่ภายในฟังก์ชัน การ return จะจบการทำงานของฟังก์ชันทันที โค้ดหลัง switch จะไม่ทำงาน — เหมาะสำหรับ mapping ค่า / lookup แบบไม่ต้อง break ตัวอย่างโค้ด { resEle.textContent = returnDay(parseInt(dayVal.value, 10)); }); </script> </b

จับเหตุการณ์ keydown บน document หรือ window ตรวจสอบ event.key (แนะนำ) หรือ event.keyCode (legacy) เพื่อเพิ่ม/ลดค่าตัวแปรเมื่อกดลูกศรขึ้น/ลง ตัวอย่างโค้ด { if (event.key === ArrowUp) { resEle.textContent = ++count; } else if (event.key === ArrowDown) { resEle.textConte

JavaScript ไม่มี Named Parameters (Keyword Arguments) ตรงๆ เช่น Python แต่เลียนแบบได้ด้วย Object Destructuring ในพารามิเตอร์ ส่งอ็อบเจกต์เข้ามา แล้ว destructuring ดึงค่าตามชื่อ — ทำให้เรียกฟังก์ชันอ่านง่าย ไม่ต้องจำลำดับพารามิเตอร์ และข้ามค่าเริ่มต้นได้ ตัวอย่างโค้ด { resultEle.textContent

การโหลดสคริปต์แบบไดนามิก (Lazy Loading) สร้าง <script> element ด้วย document.createElement() ตั้งค่า src แล้ว append เข้า <head> หรือ <body> ใช้สำหรับโหลดโค้ดเฉพาะตอนต้องการ (Code Splitting) ลดขนาด Initial Bundle ตัวอย่างโค้ด { resEle.textContent = โหลดล้มเหลว!;

ใช้ parentNode.removeChild(childNode) เพื่อลบโหนดลูก (child node) ออกจาก DOM เมธอดนี้คืนค่าโหนดที่ถูกลบ (สามารถนำไปใช้ต่อได้) และโหนดจะถูกนำออกจากต้นไม้ DOM ทันที ตัวอย่างโค้ด { // childNodes[0] มักเป็น text node (whitespace) ใช้ children[0] สำหรับ element const firstChild = animalLis

ใช้ Regular Expression ตรวจสอบว่าสตริงเป็นเลขทศนิยมที่ถูกต้อง: มีเครื่องหมาย + หรือ - ได้ จำนวนเต็มอย่างน้อย 1 ตัว จุดทศนิยม 1 ตัว และเศษทศนิยมอย่างน้อย 1 ตัว Pattern: /^[-+]?[0-9]+\.[0-9]+$/ ตัวอย่างโค้ด { const str = document.querySelector(.num).value; // [-+]? = เครื่องหมาย + หรือ

ใช้ Regular Expression (Regex) ตรวจสอบว่าสตริงประกอบด้วย ตัวอักษร (a-z, A-Z), ตัวเลข (0-9), และ Underscore (_) เท่านั้น ใช้ Pattern ^\w+$ โดย \w = [A-Za-z0-9_] (Word character) ตัวอย่างโค้ด { const str = document.querySelector(.txt).value; const regex = /^\w+$/; // ^ เริ่มต้น \w+ ตัวอ

Object.keys(obj) คืนอาร์เรย์ของชื่อพร็อพเพอร์ตี้ (keys) ที่เป็น Own Enumerable Properties ของอ็อบเจกต์ (ไม่รวม prototype chain, ไม่รวม Symbol properties, ไม่รวม non-enumerable) ตัวอย่างโค้ด { resEle.textContent = Keys: + Object.keys(obj).join(, ); }); </script> </body> &l

การลด/เพิ่มวันในอ็อบเจกต์ Date ทำได้ง่ายด้วย setDate() ร่วมกับ getDate() โดย JavaScript จัดการวันที่ล้น (overflow) อัตโนมัติ เช่น 1 มีนาคม - 1 วัน = 28/29 กุมภาพันธ์ ตัวอย่างโค้ด { date.setDate(date.getDate() - 1); resEle.textContent = วันที่ใหม่: + date.toLocaleDateString(th-TH);

วิธีที่ดีที่สุดและมาตรฐานในการผูกเหตุการณ์ (Event) กับอีเลเมนต์คือใช้ addEventListener() ข้อดี: ผูกหลาย handlers ได้, ควบคุม phase (capture/bubble), ลบได้ด้วย removeEventListener(), ทำงานกับทุกอีเลเมนต์ (รวม window, document) ตัวอย่างโค้ด { resEle.style.fontSize = 34px; }); </scrip