ES Modules (ESM) ถูกนำเข้ามาใน ES2015 (ES6) เป็นระบบ Module อย่างเป็นทางการของ JavaScript ใช้ Keyword export และ import เพื่อแชร์โค้ดระหว่างไฟล์ ทำงานใน Strict Mode โดยอัตโนมัติ โครงสร้างไฟล์ (ต้องรันบน Local Server) project/ ├── index.html ├── script.js (main) └── sample.js (module) index.html &l

Destructuring Assignment สามารถใช้ในการกำหนดค่า Property ให้ Object ที่มีอยู่แล้วได้ โดยใช้รูปแบบ ({ prop: obj.prop } = source) ต้องห่อด้วยวงเล็บ () เพราะ { เริ่ม Statement ถูกตีความว่าเป็น Block ตัวอย่างโค้ด { for (let key in obj) { resEle.innerHTML += `key = ${key} : Value = ${obj[

Closure คือฟังก์ชันที่ จับ (Capture) ตัวแปรจาก Lexical Scope รอบนอกไว้ ใช้ได้แม้ Scope นั้นจบการทำงานแล้ว เป็นพื้นฐานของการสร้าง Private State ใน JavaScript ตัวอย่างโค้ด { try { resEle.innerHTML = count; // Error: count is not defined } catch (err) { resEle.innerHTML =

Object.keys().map() และ Array.map() ใช้ .map() เหมือนกัน แต่ Input ต่างกัน: Object.keys() คืน Array ของ Keys (Strings) ส่วน Array.map() ทำงานกับ Array Elements โดยตรง ตัวอย่างโค้ด x * 2).join(, ); }); </script> </body> </html> ความแตกต่างสำคัญ ด้านObject.keys().map

JavaScript ไม่มี Private Keyword อย่างอื่นๆ (ก่อน ES2022 #private fields) แต่สามารถสร้าง Private Members ได้ด้วย Closure ใน Constructor Function ตัวแปรที่ประกาศใน Constructor จะกลายเป็น Private และเข้าถึงได้เฉพาะผ่าน Methods ที่สร้างใน Constructor เดียวกัน ตัวอย่างโค้ด <!DOCTYPE html> <htm

การ Duplicate อาร์เรย์ (คัดลอกสมาชิกทั้งหมดต่อท้ายตัวเอง) สามารถทำได้หลายวิธี แต่ต้องระวังเรื่อง Reference และ Performance ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 />

การ Filter Array ตามเงื่อนไขหลายอย่างจาก Checkbox เป็นรูปแบบ UI ที่พบบ่อย ต้องจัดการ State ของ Checkbox และ Apply Filter แบบ Dynamic ตัวอย่างโค้ด num % 3 === 0); } } }); resEle.innerHTML = resArr.join(, ); }; </script> </body> </html> ⚠

ใน JavaScript ไม่มี Dictionary แบบ Python แต่มักใช้ Object ธรรมดาในรูปแบบ Key-Value การแปลงเป็น Array of Objects ทำได้ด้วย Object.entries(), Object.values(), หรือ Object.keys() ตัวอย่างโค้ด ({ key, ...value })); }); </script> </body> </html> Object Static Methods เปรียบเที

Array Methods ทั้งหมด (map, filter, reduce, forEach, find, push, pop, splice ฯลฯ) ใช้งานกับ Array of Objects ได้เหมือน Array ธรรมดา เพียงแต่ Callback จะได้รับ Object แทน Primitive Value ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta na

Deep Clone คือการสร้างสำเนาของออบเจกต์ทั้งหมด รวมถึงออบเจกต์ย่อย (Nested Objects) ทั้งหมด ทำให้สำเนาและต้นฉบับแยกจากกันสมบูรณ์ ไม่มีการ Shared Reference ตัวอย่างโค้ด (JSON Method) <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content

ตัวดำเนินการ new ใช้สำหรับสร้าง Instance (อินสแตนซ์) จาก Constructor Function หรือ Class ทำงาน 4 ขั้นตอน: สร้าง Object ใหม่ว่างเปล่า ผูก __proto__ ของ Object ใหม่ ไปที่ Constructor.prototype เรียก Constructor Function โดยให้ this ชี้ไปที่ Object ใหม่ คืนค่า Object ใหม่ (เว้นแต่ Constructor

JavaScript รองรับ Block Scope สำหรับตัวแปรที่ประกาศด้วย let และ const เท่านั้น ส่วน var เป็น Function Scope ไม่มี Block Scope ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /&

บทความนี้มีเนื้อหาเหมือนกับ ID 1004057933 สมบูรณ์แบบ จึงขออธิบายเพิ่มเติมเกี่ยวกับ Optional Chaining และ Nullish Coalescing ที่ช่วยทำให้โค้ดปลอดภัยกว่า โค้ดปรับปรุงให้ปลอดภัย (Safe Parsing) { resEle.innerHTML += `itemID: ${item.itemID} costNum: ${item.cost?.costNum ?? N/A}<br>`;

JavaScript มีฟังก์ชันหลัก 2 ตัวสำหรับจัดการทศนิยม: Math.round() สำหรับปัดเศษ และ Math.trunc() สำหรับตัดทศนิยมทิ้ง ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <ti

มีหลายวิธีในการเข้าถึงสมาชิกสุดท้ายของอาร์เรย์ใน JavaScript แต่ละวิธีมีข้อได้เสียต่างกัน ตัวอย่างโค้ด (ใช้ pop) <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Last Arr

Short-circuit Evaluation** คือพฤติกรรมของ Logical Operators (&& และ ||) ที่ประเมินค่าจากซ้ายไปขวา และหยุดทันทีเมื่อผลลัพธ์สามารถกำหนดได้แล้ว หลักการทำงาน Operatorชื่อหยุดเมื่อเจอคืนค่า &&Logical ANDFalsy แรกค่า Falsy นั้น (หรือค่าสุดท้ายถ้าทุกค่า Truthy) ||Logical ORTruthy แรก

บ่อยครั้งที่ต้องแปลงข้อมูลจากรูปแบบ Object ที่ซับซ้อน ให้เป็น Array ที่เรียบง่ายกว่า เพื่อนำไปใช้งานต่อ เช่น แสดงในตาราง Export CSV หรือส่ง API ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, in

Short-circuit Assignment ใช้ Operator && และ || ร่วมกับการกำหนดค่า (Assignment) เพื่อให้ค่า Default หรือเลือกค่าตามเงื่อนไขได้อย่างกระชับ ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-

Short-circuit Evaluation คือกลไกที่ JavaScript ประเมินค่าสมการตรรกะ (&&, ||) จากซ้ายไปขวา และหยุดประเมินทันทีเมื่อทราบผลลัพธ์แน่นอนแล้ว ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-sc

คำสั่ง continue ใช้สำหรับข้ามการทำงานของรอบลูปปัจจุบัน (Current Iteration) และกระโดดไปรอบถัดไปทันที ใช้เมื่อต้องการข้ามบางเงื่อนไขแต่ไม่ต้องการหยุดลูปทั้งหมด ตัวอย่างโค้ด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=de