~/VibeHandbook
PDF ฟรี

ภาษา

developer.mozilla.org

JavaScript

มันคืออะไร

JavaScript คือภาษาของเว็บ มันเป็นภาษาเดียวที่รันได้เองในเบราว์เซอร์ทุกตัวโดยไม่ต้องติดตั้งอะไรเพิ่ม ผ่าน Node, Deno และ Bun มันยังรันบนเซิร์ฟเวอร์ได้ด้วย จึงสามารถใช้สร้างแอปทั้งตัวด้วยภาษาเดียวได้ มันตรวจสอบข้อมูลของคุณเฉพาะตอนที่โปรแกรมกำลังทำงานเท่านั้น ไม่ใช่ก่อนหน้านั้น — เหมือนเขียนสูตรอาหารโดยไม่มีรายการเช็กวัตถุดิบ ซึ่งจะรู้ว่าขาดวัตถุดิบอะไรก็ต่อเมื่อลงมือทำอาหารไปแล้วครึ่งทาง (พฤติกรรมแบบนี้เรียกว่า "dynamically typed" หรือ "ตรวจชนิดข้อมูลแบบพลวัต") นอกจากนี้มันยังเป็นแบบ event-driven (ขับเคลื่อนด้วยเหตุการณ์) และมีอยู่ทุกที่ ทำให้มันเป็นภาษาโปรแกรมที่ถูกใช้มากที่สุดในโลก

จุดแข็ง

  • รันได้ทุกที่: เบราว์เซอร์ เซิร์ฟเวอร์ functions แม้กระทั่งอุปกรณ์ฝังตัว (embedded)
  • ไม่ต้องมีขั้นตอนคอมไพล์ (compile step); แก้โค้ดแล้วรีเฟรชก็เห็นผลทันที
  • ระบบนิเวศ npm (Node Manager) ที่ใหญ่โตมหาศาลและชุมชนขนาดใหญ่
  • รองรับการทำงานแบบ async ระดับเนื้อแท้ ด้วย promises และ async/await

ข้อแลกเปลี่ยน

  • ไม่มีการตรวจชนิดข้อมูลแบบสถิต (static types) — ข้อผิดพลาดหลายอย่างจะโผล่มาให้เห็นก็ต่อเมื่อโปรแกรมรันจริงเท่านั้น
  • ข้อบกพร่องเชิงประวัติศาสตร์: การเทียบเท่าแบบหลวม (==), การผูก this, การแปลงชนิดข้อมูลแบบโดยนัย (implicit coercion)
  • สร้างความยุ่งเหยิงของ callback หรือ ได้ง่ายหากขาดวินัยในการเขียน
  • การใช้ภาษาเดียวกันทั้ง / อาจทำให้เส้นแบ่งทางสถาปัตยกรรมพร่าเลือน

เมื่อไหร่ควรเลือกใช้

เลือกใช้ JavaScript ธรรมดาสำหรับสคริปต์เร็วๆ โปรเจกต์เล็ก การเรียนรู้ การทำต้นแบบ (prototype) หรือในสภาพแวดล้อมที่การเพิ่มขั้นตอน build เข้าไปไม่คุ้มค่า สำหรับสิ่งที่ใหญ่กว่าหรืออยู่ยาวนานกว่านั้น ทีมส่วนใหญ่มักเลือกใช้ TypeScript แทน — แต่ JS ก็ยังคงเป็นวิธีที่เร็วที่สุดในการทำให้บางอย่างรันได้จริงบนเบราว์เซอร์หรือเครื่องมือ Node เล็กๆ

ความเข้ากันได้กับ vibe coding

ผู้ช่วย AI จัดการ JavaScript ได้อย่างคล่องแคล่ว แต่การที่ไม่มีการตรวจชนิดข้อมูลหมายความว่าโค้ดที่ถูกสร้างขึ้นอาจแอบสมมติรูปแบบข้อมูล (data shape) ผิดไปโดยไม่มีใครรู้ ควรสั่ง AI ให้ใช้ไวยากรณ์สมัยใหม่ (const/let, arrow functions, async/await, modules) และการเทียบเท่าแบบเข้มงวด (strict equality) และขอให้มันเพิ่มการตรวจสอบเชิงป้องกัน (defensive checks) หรือคอมเมนต์แบบ JSDoc ในจุดที่รูปแบบข้อมูลมีความสำคัญ ระบุสภาพแวดล้อมของคุณให้ชัดเจน — เบราว์เซอร์หรือ Node, ESM หรือ CommonJS — เพื่อให้การ import ถูกต้อง เนื่องจากไม่มีคอมไพเลอร์ให้พึ่งพา ควรขอตัวอย่างโค้ดเล็กๆ ที่รันได้จริงหรือชุดทดสอบ (test) เพื่อให้คุณตรวจสอบพฤติกรรมของโค้ดได้ด้วยตัวเองโดยตรง

const fetchTitle = async (url) => {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const html = await res.text();
  return html.match(/<title>(.*?)<\/title>/i)?.[1] ?? "(no title)";
};

fetchTitle("https://example.com").then(console.log);