เมธอด Array.prototype.flat() ใช้สำหรับ ทำให้แบน (Flatten) อาร์เรย์ที่มีอาร์เรย์ซ้อนอยู่ภายใน โดยสร้างอาร์เรย์ใหม่ที่รวมค่าทั้งหมดอยู่ในระดับเดียว โดยไม่เปลี่ยนแปลงอาร์เรย์ต้นฉบับ ไวยากรณ์ arr.flat([depth]) depth (ไม่บังคับ): ความลึกที่ต้องการทำให้แบน ค่าเริ่มต้นคือ 1 ใช้ Infinity เพื่อทำให้แบน

เมธอด Array.prototype.sort() ใช้สำหรับเรียงลำดับสมาชิกในอาร์เรย์ โดยค่าเริ่มต้นจะเรียงตามลำดับตัวอักษร (Unicode) ซึ่งอาจไม่ตรงกับการเรียงตัวเลขที่คาดหวัง ตัวอย่าง: การเรียงลำดับอาร์เรย์ตัวเลข b - a); }); </script> </body> </html> ผลลัพธ์ อาร์เรย์ก่อนเรียง: [9, 1, 4,

Destructuring Assignment เป็นไวยากรณ์พิเศษที่ช่วยให้สามารถแยกคุณสมบัติของออบเจ็กต์หรือค่าของอาร์เรย์ แล้วมอบหมายให้กับตัวแปรต่างๆ ได้ในบรรทัดเดียว ทำให้โค้ดกระชับและอ่านง่ายขึ้น ตัวอย่าง: Destructuring กับอาร์เรย์และออบเจ็กต์ { resultEle.innerHTML = `a=${a} b=${b} <br>`;

Object Destructuring เป็นไวยากรณ์ที่สะดวกในการแยกค่าจากคุณสมบัติ (properties) ของออบเจ็กต์ไปเก็บในตัวแปรแยกต่างหาก ทำให้โค้ดอ่านง่ายและสะดวกกว่าการเข้าถึงแบบดั้งเดิม ตัวอย่าง: ถอดโครงสร้างออบเจ็กต์พื้นฐาน { resultEle.innerHTML += `firstName=${firstName} lastName=${lastName} age=${age}`

Destructuring แบบซ้อน (Nested Destructuring) ช่วยให้สามารถแยกค่าจากออบเจ็กต์หรืออาร์เรย์ที่มีโครงสร้างซับซ้อนได้อย่างสะดวก โดยสามารถเข้าถึงค่าลึกภายในได้ในบรรทัดเดียว ตัวอย่าง: ถอดโครงสร้างออบเจ็กต์และอาร์เรย์แบบซ้อน { resultEle.innerHTML += `firstName=${firstName} lastName=${lastName}

สามารถนำค่าที่คำนวณได้จาก JavaScript ไปแสดงใน Textbox โดยใช้คุณสมบัติ .value ขององค์ประกอบ input ตัวอย่าง: โปรแกรมบวกเลขสองจำนวนแสดงผลใน Textbox <!DOCTYPE html> <html lang=th> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scal

ใน JavaScript สามารถเข้าถึงตัวแปรทั่วไป (Global Variable) ได้แบบไดนามิกโดยใช้ชื่อตัวแปรในรูปแบบสตริงผ่านออบเจ็กต์ window ซึ่งเป็นออบเจ็กต์ระดับบนสุดในเบราว์เซอร์ ไวยากรณ์ window[ชื่อตัวแปร] ตัวอย่างการใช้งาน <!DOCTYPE html> <html lang=th> <head> <meta charset=UTF-8>

ใช้ HTML5 placeholder Attribute หรือ JavaScript จัดการ Focus/Blur สำหรับ Default Text แบบ Custom ตัวอย่าง (Vanilla JS - แนะนำ) { if (input.value === ) { input.value = defaultText; input.style.color = #999; } }); </script> </body> </html> คำอธิบา

ใช้ Regex กับ String.replace() และ Function Replacer จัดรูปแบบ String ให้เป็น ABC-1234 ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Format ABC-1234</title>

onchange บน <input type=color> ทำงานเมื่อ User เลือกสีเสร็จ (ปิด Color Picker) ไม่ใช่ตอน Drag เลือก ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Color Inp

ใช้ let และ const (ES2015) ประกาศตัวแปร Block-Scoped เข้าถึงได้เฉพาะใน Block { } ที่ประกาศ ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Block Scoped Variabl

Object Method คือ Property ที่มีค่าเป็น Function สามารถเพิ่ม/เข้าถึงได้แบบ Dynamic ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Object Methods</title>

let และ const (ES2015) เป็น Block-Scoped ต่าง var (Function-Scoped)let: Reassign ได้ | const: Reassign ไม่ได้ (แต่ Mutate Object/Array ได้) ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-sc

Array.includes(searchElement, fromIndex) ตรวจสอบว่า Array มี Element นั้นหรือไม่ คืน Boolean ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Array.includes()&l

Array.flat(depth) Flatten Nested Array ตาม Depth ที่ระบุ (Default=1) สร้าง Array ใหม่ ไม่ Mutate ต้นฉบับ ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Array.

ฟังก์ชัน array.flatMap() ใน JavaScript จะแบนอาร์เรย์ซ้อน (nested array) ให้กลายเป็นอาร์เรย์แบน (flat array) ใหม่ ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wi

Object.fromEntries(iterable) แปลง Iterable ของ Key-Value Pairs (Array, Map) ให้เป็น Object (คู่ของ Object.entries()) ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <tit

trimStart() ตัด Whitespace นำหน้า | trimEnd() ตัด Whitespace ท้าย | trim() ตัดทั้ง 2 ด้าน ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Trim Start End</ti

ES2019 อนุญาตให้ catch ไม่ต้องมี Parameter (Optional Catch Binding) ใช้เมื่อไม่ต้องใช้ Error Object ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Optional Ca

flatMap() = map() + flat(1) แปลง Element แล้ว Flatten ระดับ 1 ครั้งเดียว ตัวอย่าง <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>flatMap Example</title> <st