มี 3 วิธีในการประกาศตัวแปรใน JavaScript: let - คีย์เวิร์ด let ที่นำมารองรับในปี 2015 ใช้สำหรับประกาศตัวแปรที่มีขอบเขตบล็อก (block-scoped) ตัวแปรที่ประกาศด้วย let จะไม่ถูก hoist var - คีย์เวิร์ด var ใช้สำหรับสร้างตัวแปรที่มีขอบเขตฟังก์ชัน (function-scoped) และจะถูก hoist const - การประกาศ cons

ตัวอย่าง ต่อไปนี้คือโค้ดสำหรับส่งค่าพื้นฐาน (primitive) และออบเจ็กต์ไปยังฟังก์ชัน: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &l

หมายเหตุ - เพื่อรันตัวอย่างนี้ คุณต้องรัน Localhost Serverโค้ดต่อไปนี้เป็นตัวอย่าง Exports และ Imports ใน JavaScriptINDEX.htmlตัวอย่าง<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <ti

ตัวอย่าง ใน JavaScript สามารถใช้ destructuring ในพารามิเตอร์ฟังก์ชัน เพื่อจำลอง named arguments ได้ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0

Promises ช่วยให้เราทำการดำเนินการแบบอะซิงโครนัส (asynchronous) ได้ โดยค่าจะไม่ทราบล่วงหน้าเมื่อสร้าง Promise Promise สามารถมี 3 สถานะคือ pending, fulfilled และ rejected ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta

ตัวดำเนินการจัดกลุ่ม (grouping operator) ใช้สำหรับจัดการลำดับความสำคัญของการประเมินนิพจน์ (precedence) ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initi

ออบเจ็กต์ Map ถูกนำมาใช้ใน ES6 เป็นคอลเลกชันของคู่คีย์-ค่า (key-value pairs) คีย์หรือค่าใน Map สามารถเป็นออบเจ็กต์หรือค่าพื้นฐาน (primitive) ได้ ตัวอย่าง <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

WeakMap คล้าย Map แต่ Key ต้องเป็น Object เท่านั้น และ Weak Reference - ถ้า Key Object ไม่มี Reference อื่นอ้างอิง จะถูก Garbage Collector ลบออกอัตโนมัติ เหมาะสำหรับ Metadata/Private Data คุณสมบัติหลักของ WeakMap คุณสมบัติMapWeakMap Key TypeAny (Primitive/Object)✅ Ob

การแปลง Array เป็น Set เป็นวิธีที่ง่ายและเร็วที่สุดในการลบค่าซ้ำ (Deduplicate) ออกจากอาร์เรย์ ใช้ Constructor new Set(array) แล้วแปลงกลับด้วย Spread Operator [...set] ตัวอย่าง: แปลง Array → Set → Array (Unique) { // 1. สร้าง Set จาก Array (ลบซ้ำอัตโนมัติ) const set1 = new S

Array และ Set เป็นโครงสร้างข้อมูลสำหรับเก็บชุดข้อมูล (Collections) แตกต่างกันที่: Array สั่งลำดับ (Ordered), ซ้ำได้, เข้าถึงด้วย Index / Set ไม่ซ้ำ (Unique), ไม่มี Index, เรียงตามลำดับที่เพิ่ม ตารางเปรียบเทียบ คุณสมบัติArraySet ค่าซ้ำ✅ ได้❌ ไม่ได้ (Unique) ลำ

JavaScript ฝั่ง Client (Browser) ไม่สามารถอ่าน IP Address ได้โดยตรง เพราะเหตุผลด้านความปลอดภัยและความเป็นส่วนตัว ต้องใช้ External Service (Third-party API) ที่คืนค่า IP กลับมาในรูปแบบ JSONP หรือ CORS ตัวอย่าง: ใช้ ipinfo.io API (JSONP) <!DOCTYPE html> <html lang=th> <head> <

Higher-Order Functions คือฟังก์ชันที่รับฟังก์ชันอื่นเป็นพารามิเตอร์ หรือคืนค่าฟังก์ชัน (หรือทั้งคู่) ใน JavaScript ฟังก์ชันเป็น First-Class Citizens จึงทำได้โดยธรรมชาติ Arrow Functions ทำให้เขียนสั้นกระชับขึ้น แนวคิดพื้นฐาน First-Class Functions: ฟังก์ชันเป็นค่า (Value) ได้ - assign ให้ตัวแปร,

การควบคุม Checkbox ด้วย JavaScript ทำได้โดยการตั้งค่าคุณสมบัติ checked เป็น true (ติ๊ก) หรือ false (ไม่ติ๊ก) ตัวอย่าง: Toggle Checkbox { checkbox.checked = !checkbox.checked; // สลับค่า updateStatus(); }); // ฟังการเปลี่ยนแปลงจาก UI ด้วย (User คลิกต

JavaScript Loop (for/while) ทำงานแบบ Synchronous ไม่มีการหน่วงเวลา (Delay) ในตัว ต้องใช้ setTimeout หรือ async/await ร่วมกับ Promise เพื่อสร้าง Delay ระหว่างรอบ วิธีที่ 1: setTimeout ใน Loop (Classic) { result.innerHTML = ; btn.disabled = true; for

Set เป็นโครงสร้างข้อมูลใหม่ใน ES2015 ที่เก็บค่า ไม่ซ้ำกัน (Unique Values) การแปลง Array → Set เป็นวิธีเร็วที่สุดในการลบค่าซ้ำ (Deduplicate) ตัวอย่าง: แปลง Array เป็น Set { // แปลง Array → Set (ลบค่าซ้ำอัตโนมัติ) const set1 = new Set(arr); // แปลงกลั

ใน JavaScript ฟังก์ชันเป็น First-class Citizens สามารถสร้าง คืนค่า และส่งผ่านฟังก์ชันอื่นได้ ฟังก์ชันที่คืนค่าฟังก์ชันอีกตัว เรียกว่า Higher-Order Function และมักเกี่ยวข้องกับ Closure (การจับ Scope ภายนอกไว้) ตัวอย่าง: ฟังก์ชันคืนค่าฟังก์ชันนับเลข (Counter) { // ต้องสร้างใหม่เพื่อ Rese

การตรวจสอบขนาดไฟล์ฝั่ง Client (Client-side Validation) ช่วยประหยัด Bandwidth และให้ UX ดีกว่า แต่ ต้องตรวจสอบฝั่ง Server อีกครั้งเสมอ (Client-side แก้ไขได้) ตัวอย่าง: ตรวจสอบขนาดไฟล์ก่อนอัปโหลด <!DOCTYPE html> <html lang=th> <head> <meta charset=UTF-8> <meta name=

หลายคนสับสนระหว่าง Undeclared (ไม่ได้ประกาศ) และ Undefined (ประกาศแต่ไม่มีค่า) ทั้งคู่เกี่ยวกับตัวแปรที่ ไม่มีค่า แต่ความหมายและพฤติกรรมต่างกันหมด ความแตกต่างพื้นฐาน ลักษณะUndeclared (ไม่ได้ประกาศ)Undefined (ไม่มีค่า) สาเหตุไม่เคยใช้ var, let, const ประกาศประกาศแล้วแ

ทั้ง innerHTML และ innerText ใช้สำหรับอ่าน/เขียนเนื้อหาภายใน Element แต่ทำงานต่างกันอย่างสิ้นเชิง ความแตกต่างหลัก คุณสมบัติinnerHTMLinnerText คืนค่าHTML String (รวม Tags)Plain Text (ข้อความบริสุทธิ์) RenderingParse และ Render HTMLแสดงข้อความตามตัวอักษร

Cookie เป็นข้อมูลเล็กๆ ที่เก็บไว้ในเบราว์เซอร์ JavaScript เข้าถึงได้ผ่าน document.cookie แต่รูปแบบเป็น String เดียว ต้อง Parse เอง รูปแบบของ document.cookie name1=value1; name2=value2; name3=value3 ตัวอย่าง: ตั้งค่าและอ่าน Cookie <!DOCTYPE html> <html lang=th> <head> <meta