บทที่ 00 — JavaScript คืออะไร และทำไมมันถึงอยู่ทุกที่

สารบัญ | บทที่ 01: Setup →

บทนี้ยังไม่ต้องเขียนโค้ด — แต่ห้ามข้าม เพราะถ้าไม่เข้าใจว่า "JavaScript เป็นภาษาแบบไหน" และ "มันต่างจากภาษาอื่นยังไง" คุณจะงงตลอดทั้งเล่ม

อ่านจบบทนี้คุณจะตอบได้ว่า:

1. JavaScript คืออะไร มาจากไหน ทำไมถึงดังขนาดนี้
2. JavaScript ทำงานยังไง — engine (เครื่องยนต์ของภาษา), runtime (สภาพแวดล้อมตอนรัน), event loop (วงรอบจัดการเหตุการณ์) คืออะไร (คำศัพท์พวกนี้จะอธิบายทีละส่วนในบทนี้เอง — ไม่ต้องรู้ล่วงหน้า)
3. ทำไม JavaScript ถึงมี "พฤติกรรมแปลก ๆ" ที่คนชอบล้อ
4. JavaScript กับ TypeScript ต่างกันยังไง ควรเรียนอันไหนก่อน

ใช้เวลาอ่าน 45-60 นาที — อ่านช้า ๆ คิดตาม

---

Part 1: JavaScript คืออะไร

1.1 นิยามแบบเข้าใจง่าย

JavaScript = ภาษาเขียนโปรแกรมที่เกิดมาเพื่อ "ทำให้หน้าเว็บมีชีวิต" — แต่ตอนนี้มันรันได้แทบทุกที่บนโลก

ลองนึกย้อนไปสมัยเว็บยุคแรก ๆ — หน้าเว็บเป็นแค่ "เอกสารนิ่ง ๆ" มีแต่ข้อความกับรูป คลิกอะไรก็ไม่ได้นอกจาก link

แล้ว JavaScript ก็เกิดมา — มันคือภาษาที่ทำให้หน้าเว็บ "ตอบสนอง" ได้:

• คลิกปุ่มแล้วมีอะไรเกิดขึ้น
• กรอกฟอร์มแล้วเช็คความถูกต้องทันที
• โหลดข้อมูลใหม่โดยไม่ต้อง refresh หน้า
• ทำ animation (ภาพเคลื่อนไหว), เกม, แผนที่แบบ interactive (โต้ตอบได้)

แต่เรื่องน่าทึ่งคือ — ทุกวันนี้ JavaScript ไม่ได้อยู่แค่ในเว็บแล้ว มันออกไปอยู่ทุกที่

1.2 JavaScript ใช้ทำอะไรได้บ้าง

📌 คำที่จะเจอในตาราง:

• frontend (ฟรอนต์เอนด์) = ฝั่งหน้า/ฝั่งผู้ใช้ — ส่วนที่ผู้ใช้เห็นและกดในเบราว์เซอร์
• backend (แบ็กเอนด์) = ฝั่งหลัง/ฝั่ง server — โค้ดที่ทำงานบนเครื่อง server ที่ผู้ใช้มองไม่เห็น
• ส่วนชื่อเครื่องมือ/library อื่น ๆ ในตาราง (NestJS, Deno, Bun, LangChain.js, Phaser ฯลฯ) ไม่ต้องจำตอนนี้ — แค่รู้ว่า "มีของให้เลือกใช้เยอะ" ก็พอ

งาน	ใช้ JavaScript ผ่าน	คำอธิบาย
เว็บ frontend (ฝั่งหน้า)	React, Vue, Angular, Svelte	ส่วนที่ผู้ใช้เห็นและคลิกในเบราว์เซอร์
เว็บ backend (ฝั่งหลัง)	Node.js + Express หรือ NestJS (NestJS = เฟรมเวิร์กที่จัดโครงสร้างให้); ทางเลือกใหม่: Deno, Bun (ดูหมายเหตุด้านล่าง)	server ที่อยู่เบื้องหลัง — รับ request, คุยกับ database
mobile app	React Native	แอปบนมือถือ iOS/Android
desktop app	Electron	โปรแกรมบนคอม — VS Code, Slack, Discord สร้างด้วยตัวนี้!
CLI tool	Node.js	โปรแกรมที่ใช้ผ่าน terminal (เทอร์มินอล — หน้าจอดำที่พิมพ์คำสั่ง เช่น Command Prompt, PowerShell, bash)
AI/LLM	LangChain.js, OpenAI SDK (ชุดเครื่องมือสำหรับเรียก AI)	สร้างแอปที่ใช้ AI
เกม	Phaser (เอนจินเกม 2D), Three.js (เอนจินกราฟิก 3D)	เกมในเบราว์เซอร์

จุดสำคัญที่ต้องเข้าใจ: JavaScript เป็นภาษาเดียวที่ใช้ได้ทั้ง frontend และ backend — เรียนภาษาเดียว เขียนได้ทั้งหน้าบ้าน (frontend) และหลังบ้าน (backend) นี่คือเหตุผลหลักที่มันได้รับความนิยมมหาศาล

หมายเหตุ runtime ฝั่ง server (2024+): นอกจาก Node.js ยังมีทางเลือกอื่น — Node ยังเป็นมาตรฐานในงานจริงส่วนใหญ่ แต่รู้ไว้ว่ามีตัวเลือก:

• Deno — รัน TypeScript ได้ตรงโดยไม่ต้อง compile (แปลงโค้ด) ล่วงหน้า มีระบบ permission ที่จำกัดสิทธิ์โค้ดได้ละเอียดกว่า Node
• Bun — เน้นความเร็ว มีเครื่องมือ bundler (รวมไฟล์โค้ด) มาในตัว

คำพวก compile/bundler ตอนนี้ยังไม่ต้องเข้าใจลึก — บทที่ 13 จะอธิบายอีกครั้ง (last reviewed: 2026-06)

ตามผลสำรวจ Stack Overflow Developer Survey (เช่น ปี 2024) — JavaScript ครองอันดับภาษาที่มีคนใช้มากที่สุดในโลกติดต่อกันมาหลายปี (ตัวเลขอันดับเปลี่ยนได้ทุกปี — เช็คผลสำรวจปีล่าสุดก่อนอ้างอิง, last reviewed: 2026-06)

1.3 คุณสมบัติสำคัญของ JavaScript (ที่ต้องเข้าใจตั้งแต่แรก)

มี 4 คุณสมบัติที่ทำให้ JavaScript เป็นแบบที่เป็น — จำไว้ เพราะมันส่งผลกับทุกอย่างที่คุณจะเขียน:

1. Dynamic Typed (ไม่ต้องบอกชนิดข้อมูล)

ในภาษาอย่าง Java คุณต้องบอกว่าตัวแปรนี้เป็น "ตัวเลข" หรือ "ข้อความ" ตั้งแต่แรก:

int age = 25;        // Java — ต้องบอกว่าเป็น int

แต่ JavaScript ไม่ต้อง — คุณแค่บอกว่า "นี่คือตัวแปร" แล้วใส่ค่าอะไรก็ได้:

let age = 25;        // JavaScript — ไม่ต้องบอกชนิด
age = "ยี่สิบห้า";    // เปลี่ยนเป็นข้อความก็ได้! (ภาษาอื่นทำไม่ได้)

→ ข้อดี: เขียนเร็ว ยืดหยุ่น → ข้อเสีย: บั๊กบางอย่างไม่ถูกจับตอนเขียน — ไปเจอตอนรันโปรแกรม (นี่คือเหตุผลที่ TypeScript เกิดมา — เดี๋ยวอธิบาย Part 6)

2. Interpreted (ไม่ต้อง compile ก่อน)

ภาษาอย่าง Java ต้อง compile (คอมไพล์ — แปลโค้ดที่คนเขียนให้กลายเป็นภาษาที่เครื่องรันได้ ทำเป็นขั้นตอนแยกก่อนรัน) ก่อนถึงจะรันได้

JavaScript ไม่ต้อง — เขียนเสร็จก็รันได้เลย engine อ่านโค้ดแล้วทำงานทันที (จริง ๆ เบื้องหลังมีการ compile แบบฉลาด ๆ ที่เรียกว่า JIT ย่อจาก Just-In-Time — compile ขณะรัน ไม่ใช่ล่วงหน้า — Part 3 จะลงรายละเอียด)

สรุปสั้น ๆ ก่อนไปต่อ: compile = แปลงโค้ดล่วงหน้าก่อนรัน (แบบ Java), JIT = แปลงโค้ดระหว่างที่กำลังรันอยู่ (แบบ JavaScript) — จำสองคำนี้ไว้ก่อน ที่เหลือ Part 3 จะอธิบายลึกกว่านี้

→ ผล: วงจรเขียน-ทดสอบเร็วมาก — แก้โค้ด refresh เบราว์เซอร์ เห็นผลทันที

3. Multi-paradigm (เขียนได้หลายสไตล์)

JavaScript ไม่บังคับให้คุณเขียนแบบใดแบบหนึ่ง — มันรองรับหลายสไตล์:

• Procedural — เขียนเป็นขั้นตอน 1-2-3
• Object-Oriented (OOP) — จัดเป็น object, class
• Functional — เน้น function, ข้อมูลที่ไม่เปลี่ยนแปลง

→ คุณเลือกสไตล์ที่เหมาะกับงานได้

4. Single-threaded + Event Loop (เรื่องสำคัญที่สุด)

อันนี้สำคัญมาก — JavaScript ทำงาน "ทีละอย่าง" (single-threaded) — มันมี "มือ" เดียว ทำได้ทีละงาน

แต่... แล้วเวลามันต้องรอข้อมูลจาก server (ซึ่งใช้เวลา) — มันจะค้างไหม?

คำตอบคือ ไม่ — เพราะ JavaScript มีกลไกชื่อ Event Loop (วงรอบจัดการเหตุการณ์ — ทำงานอื่นต่อระหว่างรอผลของงานที่ใช้เวลา) ที่ทำให้มัน "ทำงานอื่นต่อระหว่างรอ" ได้ — เราจะลงลึกเรื่องนี้ใน Part 3 และบทที่ 09 (Async)

ตอนนี้แค่จำว่า: JavaScript ทีละงาน แต่ฉลาดเรื่องการรอ

---

Part 2: ประวัติย่อ — ทำไมต้องรู้

การรู้ประวัติ JavaScript ไม่ใช่แค่เรื่องเล่า — มันอธิบาย "ทำไมภาษานี้ถึงแปลก ๆ"

2.1 1995 — เกิดใน 10 วัน

ปี 1995 บริษัท Netscape (เจ้าของเบราว์เซอร์ดังในยุคนั้น) อยากได้ภาษาเล็ก ๆ ไว้ใส่ในเว็บ

พวกเขาจ้าง Brendan Eich ให้เขียนภาษาขึ้นมา — และให้เวลาแค่ 10 วัน

คิดดู — ภาษาโปรแกรมที่ทั้งโลกใช้ทุกวันนี้ ถูกออกแบบใน 10 วัน นี่คือเหตุผลที่ JavaScript มี "มุมแปลก ๆ" เยอะ เพราะมันถูกรีบทำ และพอปล่อยออกไปแล้วก็แก้ของเดิมไม่ได้ (เพราะจะทำให้เว็บเก่า ๆ พัง)

💡 เกร็ด: ตอนแรกชื่อ "LiveScript" — แล้ว Netscape เปลี่ยนเป็น "JavaScript" เพื่ออาศัยกระแสของภาษา Java ที่กำลังดังในยุคนั้น แต่ JavaScript กับ Java ไม่เกี่ยวข้องกันเลย เป็นคนละภาษาคนละแนวคิด ตัวอย่างเปรียบเทียบ: เหมือน "รถ" กับ "รถเข็น" — มีคำว่า "รถ" เหมือนกันแต่คนละอย่าง

2.2 1997 — กลายเป็นมาตรฐาน

พอ JavaScript ดัง — เบราว์เซอร์เจ้าอื่นก็อยากมีบ้าง แต่ต่างคนต่างทำ → ปัญหา: เว็บที่เขียนสำหรับเบราว์เซอร์หนึ่ง ใช้กับอีกเบราว์เซอร์ไม่ได้

แก้ด้วยการตั้ง "มาตรฐานกลาง" — องค์กรชื่อ ECMA เป็นคนดูแล มาตรฐานนี้ชื่อ ECMAScript

ดังนั้น:

• ECMAScript = สเปค/มาตรฐาน (เอกสารบอกว่าภาษาต้องทำอะไรได้บ้าง)
• JavaScript = การนำมาตรฐานนั้นไปทำจริง

→ เวลาเห็นคำว่า "ES6", "ES2020" — ES ย่อมาจาก ECMAScript — มันคือ "เวอร์ชันของมาตรฐาน"

2.3 เวอร์ชันที่ต้องรู้จัก

เวอร์ชัน	ปี	ใส่อะไรเข้ามา
ES5	2009	strict mode, JSON, Array methods พื้นฐานที่หนังสือเล่มนี้ใช้ทั้งเล่ม (map, forEach, filter, reduce ฯลฯ)
ES6 / ES2015	2015	การเปลี่ยนแปลงครั้งใหญ่ที่สุด — let/const, arrow function, class, Promise, module, template literal, destructuring
ES2017	2017	async/await (เขียน async ง่ายขึ้นมาก)
ES2020	2020	optional chaining (?.), nullish coalescing (??)
ES2022	2022	class fields (ประกาศ field ใน class ตรง ๆ ได้), top-level await (ใช้ await นอกฟังก์ชันได้ในระดับไฟล์)
ES2023–2024	2023–2024	array immutable methods (toSorted, toReversed), Object.groupBy, Promise.withResolvers, RegExp /v flag ฯลฯ

จุดที่ต้องจำ: ES6 (ปี 2015) คือเส้นแบ่ง — JavaScript ก่อน ES6 กับหลัง ES6 ต่างกันมาก. โค้ดสมัยใหม่ทั้งหมดใช้ feature ของ ES6 ขึ้นไป — หนังสือเล่มนี้สอนแบบ ES6+ ทั้งหมด

ตั้งแต่ ES6 เป็นต้นมา — มาตรฐานออกใหม่ทุกปี (เลยตั้งชื่อตามปี เช่น ES2020, ES2024)

2.4 2009 — JavaScript ออกจากเบราว์เซอร์

จุดเปลี่ยนสำคัญ — ปี 2009 มีคนชื่อ Ryan Dahl สร้าง Node.js

Node.js = "ตัวรัน JavaScript ที่อยู่นอกเบราว์เซอร์" — ทำให้ JavaScript เขียน server, เขียนโปรแกรม desktop, เขียน CLI ได้

นี่คือจุดที่ JavaScript เปลี่ยนจาก "ภาษาของเว็บ" เป็น "ภาษาที่ใช้ได้ทุกที่"

---

Part 3: JavaScript ทำงานยังไง (เบื้องหลัง)

ส่วนนี้สำคัญ — ถ้าเข้าใจว่า JavaScript ทำงานยังไง คุณจะ debug เก่งขึ้นมาก

3.1 Engine กับ Runtime ต่างกันยังไง

มือใหม่มักสับสน 2 คำนี้:

JavaScript Engine = "เครื่องยนต์" ที่อ่านโค้ด JavaScript แล้วทำให้มันทำงาน

• V8 — engine ของ Google (อยู่ใน Chrome, Edge, Node.js)
• SpiderMonkey — engine ของ Firefox
• JavaScriptCore — engine ของ Safari

Runtime = "engine + เครื่องมือเสริม" — เพราะ engine อย่างเดียวรันโค้ดได้ แต่ทำอะไรกับโลกภายนอกไม่ได้ (เปิดไฟล์ไม่ได้, เชื่อม network ไม่ได้)

• Browser runtime = V8 + เครื่องมือสำหรับเว็บ (document, fetch, การจัดการหน้าเว็บ) — หมายเหตุ: Firefox และ Safari ก็เป็น browser runtime แต่ใช้ engine คนละตัว (SpiderMonkey, JavaScriptCore) — V8 เป็นแค่ตัวอย่างหนึ่งของ engine ที่ browser ใช้
• Node.js runtime = V8 + เครื่องมือสำหรับ server (อ่าน/เขียนไฟล์, สร้าง web server)

💡 เปรียบเทียบ: Engine = "เครื่องยนต์รถ" — Runtime = "รถทั้งคัน" (เครื่องยนต์ + ล้อ + พวงมาลัย + ที่นั่ง) — เครื่องยนต์เดียวกัน เอาไปใส่รถเก๋ง (browser) หรือรถบรรทุก (Node.js) ก็ได้ ได้รถคนละแบบ

3.2 V8 ทำงานยังไง

ตอน V8 เจอโค้ด JavaScript — มันทำแบบนี้:

โค้ด .js
   ↓
แปลงเป็น "โครงสร้างต้นไม้ของโค้ด" (AST ย่อจาก Abstract Syntax Tree — โครงสร้างต้นไม้ที่ engine แปลงโค้ดของคุณให้กลายเป็น เพื่อให้มันวิเคราะห์และเดินตรวจโค้ดได้ง่ายขึ้น)
   ↓
เริ่ม "ตีความ" (interpret) ทันที — รันได้เลย แต่ช้าหน่อย
   ↓
ถ้าโค้ดส่วนไหนถูกเรียกบ่อย ๆ (เรียก "hot code")
   ↓
"compile" ส่วนนั้นเป็นภาษาเครื่องที่เร็วมาก (JIT — Just-In-Time)

ความฉลาดคือ — V8 ไม่ compile ทุกอย่างตั้งแต่แรก (จะช้า) มันเริ่มรันเลย แล้วค่อย ๆ optimize เฉพาะส่วนที่ใช้บ่อย

→ ผลคือ JavaScript สมัยใหม่เร็วพอที่จะใช้งานจริงในระดับ production ได้ — สำหรับโค้ดที่ทำงานซ้ำ ๆ บ่อยจน JIT optimize แล้ว ความเร็วจะเข้าใกล้ภาษาที่ compile เต็มตัว (แปลงเป็นภาษาเครื่องทั้งหมดก่อนรัน เหมือน Java ที่พูดถึงก่อนหน้านี้) แต่โดยทั่วไปยังช้ากว่าภาษาอย่าง C++/Rust ในงานที่หนักด้าน CPU

(last reviewed: 2026-06 — ตัวเลขเปรียบเทียบที่แน่นอนต้องดู benchmark เฉพาะ workload ดู V8 blog ทางการก่อนอ้างอิงตัวเลข)

อยากรู้เพิ่ม (ขั้นสูง — ข้ามได้)

ระวังเรื่องช่วงเริ่มรันที่ engine ยังไม่ optimize และการเก็บขยะหน่วยความจำ (garbage collection) ที่อาจสะดุดเป็นช่วง ๆ — ศัพท์เฉพาะอย่าง hot path, megamorphic call site, deoptimization, GC pause ค่อยเรียนตอนเขียนงาน performance จริง

3.3 Event Loop — หัวใจของ JavaScript

นี่คือ concept ที่สำคัญที่สุดของ JavaScript — และเป็นจุดที่มือใหม่งงที่สุด

ปัญหา: JavaScript ทำงานทีละอย่าง (single-threaded) — แล้วเวลามันต้องรอ (เช่น รอข้อมูลจาก server 2 วินาที) มันจะค้างทั้งโปรแกรมไหม?

ลองนึกภาพ — ถ้าเว็บค้าง 2 วินาทีทุกครั้งที่โหลดข้อมูล คลิกอะไรก็ไม่ได้ — ใช้ไม่ได้เลย

JavaScript แก้ด้วย Event Loop — มาดูภาพ:

📌 callback (คอลแบ็ก) = ฟังก์ชันที่เรา "ฝากไว้" ให้ระบบเรียกกลับทีหลังเมื่อมีอะไรเกิดขึ้น — เหมือนให้เบอร์โทรไว้ แล้วให้โทรกลับตอนข้อมูลพร้อม บทที่ 09 จะลงลึกเรื่องนี้

(ถ้าแผนภาพด้านบนไม่แสดงผล — อ่านแบบข้อความ: Call Stack → เจองานรอ → ส่งไป Web/Node APIs → พอเสร็จ → เข้า Callback Queue → Event Loop ดึงกลับมา Call Stack)

📌 callback ตามที่อธิบายก่อนแผนภาพ — เป็นกลไกหลักที่ทำให้ JavaScript จัดการงานที่ต้องรอได้ บทที่ 09 จะลงลึก

อธิบายเป็นเรื่อง:

ลองนึกว่า JavaScript เป็น "พ่อครัวคนเดียว" ในร้านอาหาร:

1. ลูกค้าสั่ง "ต้มน้ำ" (ใช้เวลา 5 นาที)
2. พ่อครัวไม่ได้ยืนจ้องหม้อ 5 นาที — เขา เปิดเตา ตั้งเวลา แล้วไปทำเมนูอื่นต่อ
3. พอเวลาครบ — มี "เสียงเตือน" บอกว่าน้ำเดือดแล้ว
4. พ่อครัว (พอว่างจากงานปัจจุบัน) ก็กลับมาจัดการน้ำเดือด

→ "ตั้งเวลาแล้วไปทำอื่นต่อ" = หลักการของ Event Loop. JavaScript ไม่ยืนรอ — มันส่งงานที่ต้องรอออกไป แล้วทำงานอื่นต่อ พอรอเสร็จค่อยกลับมาจัดการ

นี่คือเหตุผลที่เว็บไม่ค้างตอนโหลดข้อมูล — เราจะลงลึกเรื่องนี้มากในบทที่ 09

---

Part 4: ทำไม JavaScript ถึงมี "พฤติกรรมแปลก ๆ"

JavaScript ขึ้นชื่อเรื่องมี "ความแปลก" ที่คนชอบเอามาล้อ — มาดูว่าทำไม (และจะรับมือยังไง)

4.1 การแปลงชนิดอัตโนมัติ (Type Coercion)

JavaScript พยายาม "ช่วยเหลือ" เรามากเกินไป — มันแปลงชนิดข้อมูลให้อัตโนมัติ บางทีก็แปลกประหลาด:

"5" + 3        // ได้ "53"  — เห็น + กับ string เลยคิดว่าเป็นการต่อข้อความ
"5" - 3        // ได้ 2     — เห็น - เลยคิดว่าเป็นการลบเลข แปลง "5" เป็น 5

ทำไม + กับ - ให้ผลต่างกัน? — เพราะ + ใช้ได้ทั้งบวกเลขและต่อข้อความ JavaScript เลยเดาว่าเราต้องการต่อข้อความ ส่วน - ใช้ได้แค่ลบเลข มันเลยแปลงเป็นเลข

นี่คือ "ความช่วยเหลือ" ที่ทำให้เกิดบั๊ก — แต่ไม่ต้องกลัว เรามีวิธีรับมือ (Part 4.3)

4.2 ตัวอย่างความแปลกอื่น ๆ

0.1 + 0.2 === 0.3      // ได้ false! (ปัญหาเรื่องทศนิยม — บทที่ 02 อธิบาย)
typeof null            // ได้ "object" (บั๊กของภาษาตั้งแต่ปี 1995 แก้ไม่ได้แล้ว)
[] + []                // ได้ "" (string ว่าง — เพราะ + บังคับให้แปลงเป็น string ก่อน
                       //              และ Array ว่างเปล่าแปลงเป็น string ได้ "")

อย่าเพิ่งตกใจ — สิ่งเหล่านี้มีคำอธิบายทั้งหมด และเราจะเรียนวิธีหลีกเลี่ยงในบทต่อ ๆ ไป

4.3 ข่าวดี — JavaScript สมัยใหม่จัดการเรื่องพวกนี้ได้

ความแปลกเหล่านี้ส่วนใหญ่มาจาก JavaScript ยุคเก่า — JavaScript สมัยใหม่ (ES6+) มีเครื่องมือป้องกัน:

• ใช้ === แทน == (เปรียบเทียบแบบเข้มงวด ไม่แปลงชนิด — บทที่ 03)
• ใช้ "strict mode" (โหมดเข้มงวด — สั่ง JS ให้จับข้อผิดพลาดที่ปกติเงียบไว้ เช่น ลืมประกาศตัวแปร, แก้ readonly) หรือ ES modules (วิธีแบ่งโค้ดเป็นไฟล์แบบมาตรฐาน เปิด strict mode ให้อัตโนมัติ — บทที่ 10) เพื่อให้ JS จับ error มากขึ้น
• ใช้ TypeScript (จับ error เรื่องชนิดข้อมูลตั้งแต่ตอนเขียน)

→ ถ้าเขียนตามแนวทางสมัยใหม่ — คุณจะแทบไม่เจอความแปลกพวกนี้เลย หนังสือเล่มนี้จะสอนแนวทางที่ถูกต้องตั้งแต่ต้น

---

Part 5: Browser กับ Node.js — ที่ JavaScript รัน

JavaScript เดียวกัน รันได้ 2 ที่หลัก — และมันต่างกันนิดหน่อย ต้องเข้าใจ

5.1 ในเบราว์เซอร์

เมื่อ JavaScript รันในเบราว์เซอร์ — มันได้เครื่องมือสำหรับ "จัดการหน้าเว็บ":

• document — ตัวแทนของหน้าเว็บ ใช้แก้ไขเนื้อหา HTML
• window — ตัวแทนของหน้าต่างเบราว์เซอร์
• fetch — โหลดข้อมูลจาก server
• localStorage — เก็บข้อมูลในเบราว์เซอร์

แต่มัน ทำบางอย่างไม่ได้ เพื่อความปลอดภัย — เช่น อ่าน/เขียนไฟล์ในเครื่องผู้ใช้ตรง ๆ ไม่ได้ (ลองคิด — ถ้าทำได้ เว็บร้าย ๆ ก็ลบไฟล์เราได้)

5.2 ใน Node.js

เมื่อ JavaScript รันใน Node.js (บน server หรือเครื่องเรา) — มันได้เครื่องมือสำหรับ "จัดการระบบ":

• อ่าน/เขียนไฟล์ได้
• สร้าง web server ได้
• เข้าถึงระบบปฏิบัติการได้

แต่มัน ไม่มี document, window — เพราะ Node.js ไม่มีหน้าเว็บ

5.3 สรุป

	Browser	Node.js
มี document, window	✅	❌
อ่าน/เขียนไฟล์	❌ (เพื่อความปลอดภัย)	✅
สร้าง web server	❌	✅
fetch (โหลดข้อมูล)	✅	✅

→ พื้นฐานของภาษา (ตัวแปร, function, loop, ฯลฯ) เหมือนกันทุกที่ — ต่างกันแค่ "เครื่องมือเสริม" ที่แต่ละที่ให้

หนังสือเล่มนี้ บทพื้นฐาน (02-11) ใช้ได้ทั้ง 2 ที่ — บทที่ 12 (DOM) เน้นเบราว์เซอร์โดยเฉพาะ

---

Part 6: JavaScript หรือ TypeScript — เรียนอันไหนก่อน

คุณอาจเคยได้ยินว่า "เดี๋ยวนี้เขาใช้ TypeScript กัน" — มาทำความเข้าใจ

6.1 TypeScript คืออะไร

TypeScript = JavaScript + ระบบตรวจสอบชนิดข้อมูล

จำได้ไหม Part 1 — JavaScript เป็น dynamic typed (ไม่ต้องบอกชนิด) — ข้อเสียคือบั๊กเรื่องชนิดข้อมูลไม่ถูกจับตอนเขียน

TypeScript แก้ตรงนี้ — ให้เราบอกชนิดข้อมูลได้ แล้วมันตรวจสอบให้ตั้งแต่ตอนเขียน:

// JavaScript — บั๊กนี้ไม่ถูกจับ ไปเจอตอนรัน
function add(a, b) { return a + b; }
add("5", 3);        // ได้ "53" — ผิดความตั้งใจ แต่ไม่มีใครเตือน

// TypeScript — บอกชนิดได้ แล้วมันเตือนทันที
function add(a: number, b: number): number { return a + b; }
add("5", 3);        // ❌ TypeScript ขีดเส้นแดงเตือนทันทีตอนเขียน

6.2 แล้วควรเรียนอันไหนก่อน

คำตอบ: เรียน JavaScript ก่อน — แล้วค่อย TypeScript

เหตุผล: TypeScript คือ "JavaScript + ของเพิ่ม" — ถ้ายังไม่เข้าใจ JavaScript พื้นฐาน จะเรียน TypeScript ไม่รู้เรื่อง (เพราะมันต่อยอดจาก JavaScript ทั้งหมด)

→ อ่านหนังสือ JavaScript เล่มนี้ให้จบก่อน → แล้วไปต่อ หนังสือ TypeScript

ในงานจริงทุกวันนี้ — โปรเจกต์มืออาชีพส่วนใหญ่ใช้ TypeScript แต่ JavaScript ก็ยังเป็นรากฐานที่ต้องแน่นก่อน (last reviewed: 2026-06 — สัดส่วนแน่ชัดดูได้จาก State of JS / Stack Overflow Developer Survey ปีล่าสุด)

---

Part 7: เส้นทางของหนังสือเล่มนี้

หนังสือเล่มนี้พาคุณจากศูนย์ไปจนเขียน JavaScript เป็น:

บทที่ 0:   JavaScript คืออะไร (อยู่ตรงนี้)
บทที่ 1:   ติดตั้งเครื่องมือ + เขียนโปรแกรมแรก
บทที่ 2-3: พื้นฐานภาษา — ตัวแปร, ชนิดข้อมูล, operator
บทที่ 4:   ควบคุมการทำงาน — if, loop
บทที่ 5:   Function เชิงลึก — รวมถึง closure และ this (จุดสำคัญ)
บทที่ 6:   Object + Class
บทที่ 7:   Array + การวนข้อมูล
บทที่ 8:   String, Regex, วันเวลา
บทที่ 9:   Async — เรื่องที่ยากที่สุด แต่สำคัญที่สุด
บทที่ 10:  Module — แบ่งโค้ดเป็นไฟล์
บทที่ 11:  จัดการ Error
บทที่ 12:  DOM — ควบคุมหน้าเว็บ
บทที่ 13:  เครื่องมือสมัยใหม่

อ่านเรียงลำดับ — แต่ละบทต่อยอดจากบทก่อนหน้า อย่าข้าม

---

Part 8: แหล่งอ้างอิงที่ดี

• MDN Web Docs (developer.mozilla.org) — "พจนานุกรม" ของ JavaScript ที่น่าเชื่อถือที่สุด — เวลาสงสัยอะไร search "MDN [คำที่สงสัย]"
• JavaScript.info — tutorial ที่อธิบายละเอียด
• caniuse.com — เช็คว่า feature ใหม่ ๆ เบราว์เซอร์ไหนรองรับแล้ว

---

Part 9: Checkpoint

ตอบคำถามเหล่านี้ก่อนไปบทถัดไป — ถ้าตอบไม่ได้ กลับไปอ่านส่วนที่เกี่ยวข้อง:

1. JavaScript เกิดมาเพื่ออะไรตอนแรก? ตอนนี้ใช้ทำอะไรได้บ้าง?
2. ECMAScript กับ JavaScript ต่างกันยังไง?
3. ทำไม ES6 (2015) ถึงเป็น "เส้นแบ่ง" ที่สำคัญ?
4. Engine กับ Runtime ต่างกันยังไง? (ลองอธิบายด้วยคำเปรียบเทียบของคุณเอง)
5. "Single-threaded" แปลว่าอะไร? แล้วทำไม JavaScript ไม่ค้างตอนรอข้อมูล?
6. Event Loop ทำงานยังไง? (ใช้ตัวอย่างพ่อครัว)
7. "5" + 3 กับ "5" - 3 ได้ผลต่างกัน — เพราะอะไร?
8. JavaScript ในเบราว์เซอร์ กับใน Node.js ต่างกันยังไง?
9. TypeScript คืออะไร? ควรเรียนก่อนหรือหลัง JavaScript?
10. JavaScript เป็น dynamic typed — ข้อดีและข้อเสียคืออะไร?

---

Part 10: สรุปบทนี้

• JavaScript = ภาษาที่เกิดมาเพื่อเว็บ ตอนนี้รันได้ทุกที่ (frontend, backend, mobile, desktop)
• เป็นภาษาเดียวที่ใช้ได้ทั้งหน้าบ้านและหลังบ้าน — เหตุผลหลักที่มันดัง
• ECMAScript = มาตรฐาน, JavaScript = การนำมาตรฐานไปทำจริง
• ES6 (2015) = เส้นแบ่งสำคัญ — โค้ดสมัยใหม่ใช้ ES6+ ทั้งหมด
• Engine (V8) รันโค้ด — Runtime = engine + เครื่องมือเสริม (browser หรือ Node.js)
• Single-threaded + Event Loop = ทำงานทีละอย่าง แต่ฉลาดเรื่องการรอ (ไม่ค้าง)
• JavaScript มี "ความแปลก" จากการที่ถูกออกแบบเร่งรีบ — แต่แนวทางสมัยใหม่จัดการได้
• เรียน JavaScript ก่อน แล้วค่อย TypeScript

บทต่อไป — เราจะติดตั้งเครื่องมือ และเขียนโปรแกรม JavaScript แรกของคุณ

---

สารบัญ | ➡️ บทที่ 01: Setup →

---

🔤 Glossary · 📋 Style guide · 📅 last_verified: 2026-06-12