โค้ดตัวอย่างสำหรับการเปลี่ยนชื่อ Imports และ Exports ใน JavaScript ด้านล่างหมายเหตุ − ต้องรันผ่าน Localhost Server เพื่อให้ตัวอย่างนี้ทำงานตัวอย่าง<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" con

Accessor Property ช่วยให้เราสร้าง Getter และ Setter ฟังก์ชันใน JavaScript ได้ พวกมันจะทำงานเมื่อมีการอ่านหรือตั้งค่าคุณสมบัติมีแอตทริบิวต์ 4 ตัวสำหรับ Accessor Property ดังนี้get − เรียกเมื่ออ่านคุณสมบัติ ไม่รับอาร์กิวเมนต์set − เรียกเมื่อตั้งค่าคุณสมบัติ รับอาร์กิวเมนต์เพียง 1 ตัวenumer

Loose Equality Operator ‘==’ ใช้เปรียบเทียบอ็อพแลนด์ 2 ตัวขึ้นไป โดยแปลงค่าให้เป็นชนิดเดียวกันก่อน แล้วค่อยตรวจสอบความเท่าเทียมโค้ดตัวอย่างการใช้ Loose Equality ใน JavaScript ด้านล่างตัวอย่าง<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

Loose Equality Operator ‘==’ ใช้เปรียบเทียบอ็อพแลนด์ 2 ตัวขึ้นไป โดยแปลงค่าให้เป็นชนิดเดียวกันก่อน แล้วค่อยตรวจสอบความเท่าเทียมStrict Equality Operator ‘===’ ใช้เปรียบเทียบโดยตรวจสอบทั้งค่าและชนิดข้อมูล (Type) จะคืนค่า true ก็ต่อเมื่อค่าและชนิดข้อมูลตรงกันทั้งคู่โค้ดตัวอย่างเ

โค้ดตัวอย่างสำหรับการเข้าถึงอาร์เรย์ที่ส่งคืนจากฟังก์ชันใน JavaScript ด้านล่างตัวอย่าง<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <ti

โค้ดด้านล่างแสดงการใช้งาน Named Function Expression ใน JavaScriptตัวอย่าง<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docume

Object Initializer เป็นนิพจน์ที่อนุญาตให้เราเริ่มต้นออบเจ็กต์ที่สร้างใหม่ เป็นรายการคั่นด้วยจุลภาคของคู่ชื่อคุณสมบัติและค่าที่เกี่ยวข้อง ซึ่งอยู่ภายในคู่วงเล็บปีกกา {}โค้ดตัวอย่างสำหรับ Object Initializer ใน JavaScript ด้านล่างตัวอย่าง<!DOCTYPE html> <html lang="en"> <head&g

Optional Chaining Operator (?. ) ถูกนำเสนอใน ES2020 ช่วยให้เราเข้าถึงคุณสมบัติซ้อนกัน (Nested Property) ได้โดยไม่ต้องตรวจสอบว่าแต่ละขั้นในโซ่เป็น null หรือ undefined อย่างชัดเจน ก่อนหน้านี้เราใช้ && Operator แต่ตอนนี้สามารถใช้ ?. ได้โค้ดตัวอย่างสำหรับ Optional Chaining Operator ใน JavaScript

Spread Syntax ช่วยให้เราขยายอาร์เรย์หรืออีเทอรอบล (Iterable) ให้กลายเป็นอาร์กิวเมนต์หลายตัวในการเรียกฟังก์ชันโค้ดตัวอย่างสำหรับ Spread Operator ในการเรียกฟังก์ชัน JavaScript ด้านล่างตัวอย่าง<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> &

new.target เป็น Metaproperty ที่ช่วยให้เราตรวจสอบได้ใน Runtime ว่าฟังก์ชันหรือ Constructor ถูกเรียกใช้ด้วยคีย์เวิร์ด new หรือไม่โค้ดตัวอย่างสำหรับ new.target ใน JavaScript ด้านล่างตัวอย่าง<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <

ออบเจ็กต์ RegExp ใช้สำหรับการจับคู่รูปแบบ (Pattern Matching) ของข้อความ โดยการค้นหาและแยกส่วนของข้อความ ออบเจ็กต์ RegExp สร้างได้ 2 วิธี คือ ใช้ Constructor หรือ Literal Syntaxโค้ดตัวอย่างสำหรับออบเจ็กต์ RegExp ใน JavaScript ด้านล่างตัวอย่าง<!DOCTYPE html> <html lang="en"> <

Dot Notation ใช้สำหรับเข้าถึงคุณสมบัติ (Properties) ของออบเจ็กต์ใน JavaScript ตัวอย่างโค้ดด้านล่างแสดงการใช้งาน Dot Notationตัวอย่าง<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devi

ความแตกต่าง Dot notation และ bracket notation ใช้เข้าถึง object properties ทั้งคู่ Dot notation ใช้บ่อยกว่าเพราะอ่านง่าย เข้าใจง่าย และเขียนสั้นกว่า ความแตกต่างหลักคือ bracket notation อนุญาตให้เข้าถึง properties ผ่านตัวแปรได้ ตัวอย่างโค้ด <!DOCTYPE html> <html lang="en"> <

ตัวอย่างโค้ด ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่า object members แบบ dynamic: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl

JavaScript Objects เป็น Dynamic - สามารถเพิ่ม/แก้ไข/ลบ Properties ได้ตลอดเวลา รันไทม์ (Runtime) ทำให้ยืดหยุ่นมากสำหรับการจัดการข้อมูล ตัวอย่างโค้ด { resEle.innerHTML = student.displayInfo(); resEle.innerHTML += <br>หลังจากเปลี่ยน Properties<br>; // Dynamic Prop

JavaScript อนุญาตให้แก้ไข Prototype ของ Constructor Function ได้ตลอดเวลา (Runtime) การเปลี่ยนแปลงจะส่งผลต่อ Instance ทั้งหมดที่สร้างจาก Constructor นั้น รวมถึง Instance ที่สร้างก่อนการแก้ไข ตัวอย่างโค้ด { // ก่อนแก้ไข resEle.innerHTML = Before Modifying Prototype<br> + p

Conditional Statements ใช้ควบคุม Flow ของโปรแกรม ทำให้โค้ดทำงานต่างกันตามเงื่อนไข JavaScript มี 3 รูปแบบหลัก ตัวอย่างโค้ด { const num = Number(numInputEle.value); if (Number.isNaN(num)) { resEle.innerHTML = กรุณากรอกตัวเลข; return; } if (num %

Indexed Collections คือโครงสร้างข้อมูลที่เข้าถึง Element ผ่าน Index (Integer) โดย Array เป็น Indexed Collection หลักของ JavaScript ตัวอย่างโค้ด { resEle.innerHTML += `arr[${index}] = ${item}<br>`; }); }); </script> </body> </html> Array Characteristics

Keyed Collections คือโครงสร้างข้อมูลที่จัดเก็บข้อมูลด้วย Key-Value Pair และเรียงลำดับตาม Insertion Order หลักๆ มี 2 ตัว: Map และ Set (ES2015+) ตัวอย่างโค้ด (Basic Object Iteration) { const obj = { name: Rohan, age: 22, occupation: Student }; for (le

Dynamic Import ใช้ import() Function โหลด Module เมื่อต้องการ (Lazy Loading) คืนค่า Promise ช่วยลด Bundle Size เริ่มต้นและโหลดเฉพาะตอนจำเป็น โครงสร้างไฟล์ (ต้องรันบน Local Server) project/ ├── index.html ├── main.js (Entry Point) └── module.js (Lazy Module) index.html <!DOCTYPE html> <htm