JavaScript

ส่วนหนึ่งของ Beginner Book

JavaScript = ภาษาของ Web — แต่ก็ใช้ทำ backend (เบื้องหลังฝั่ง server ด้วย Node.js), mobile (แอปมือถือ ด้วย React Native), desktop (โปรแกรมบนคอม ด้วย Electron), CLI (โปรแกรมสั่งงานผ่าน terminal/Command Line Interface), AI tool ได้

หมายเหตุสำหรับมือใหม่: เอกสารชุดนี้มีศัพท์อังกฤษเยอะ — ไม่ต้องกังวล ทุกคำจะ "กางความหมาย" (อธิบายเป็นไทย) ในครั้งแรกที่เจอ และคำที่ยังไม่ถึงเวลาเรียนจะมีลิงก์บอกว่า "เดี๋ยวเรียนบทไหน" — อ่านไปเรื่อย ๆ ได้เลย ไม่ต้องจำศัพท์ทั้งหมดตั้งแต่แรก

หนังสือเล่มนี้เป็น prerequisite (พรีเรควิสิต — สิ่งที่ต้องเรียนก่อน) ของ:

• Node.js (เอา JS ไปทำ backend ฝั่ง server)
• React (library สร้าง UI ของเว็บ)
• Angular (เฟรมเวิร์กสร้างเว็บแอปครบชุด)
• TypeScript (JS + ระบบตรวจชนิดข้อมูล)
• AI/LLM (ใช้ JS เยอะ)

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

หนังสือนี้พาคุณไปถึงไหน

อ่านจบ + ทำ checkpoint (จุดทบทวนท้ายบท) หมด คุณจะมีทักษะหลัก 6 ด้านนี้:

1. เข้าใจไวยากรณ์พื้นฐาน — syntax (วิธีเขียนโค้ดให้ถูกรูปแบบ) ของ JS ทั้งหมด ตั้งแต่ตัวแปร, function, control flow
2. เข้าใจการทำงานแบบไม่รอ — asynchronous (การทำงานแบบไม่รอผลก่อนทำงานต่อ) + event loop (กลไกจัดคิวงานเบื้องหลัง) ใช้ promise + async/await ได้ถูกต้อง
3. เขียน object และ array แบบมาตรฐาน — แนวที่ชาว JS นิยมใช้กัน (idiomatic = ตามสำนวนของภาษา) เช่น map/filter/reduce, destructuring, spread
4. เข้าใจ 3 จุดที่นักพัฒนา JS มักงง — closure, this, prototype (จุดที่บทเรียนเล่มอื่น ๆ มักข้าม แต่งานจริงเจอบ่อย)
5. จัดระเบียบโค้ดเป็นโมดูล — ES modules (วิธีแบ่งโค้ดเป็นไฟล์มาตรฐานปัจจุบัน) + รู้จัก bundling tool (เครื่องมือรวมไฟล์ก่อน deploy)
6. ควบคุมหน้าเว็บได้ — DOM manipulation (เปลี่ยนเนื้อหา HTML ผ่านโค้ด JS)

→ พร้อมขึ้น React/Angular ต่อโดยไม่ติด syntax

ก่อนเริ่ม — ต้องรู้อะไรก่อน

ไม่ต้องเลย — เริ่มจากศูนย์ได้

✅ ดีถ้ามี: เคยเขียนภาษาอื่น (เพื่อเปรียบเทียบ — อ่านได้เร็วขึ้น)

บทเรียน

หมวด JavaScript มีทั้งหมด 14 บท (บทที่ 0-13) — เรียงลำดับจากพื้นฐานไปขั้นสูง

ใช้เวลาอ่านครบประมาณ 1–2 เดือน ขึ้นกับว่าทำ checkpoint หรือไม่ (ถ้าลงมือทำ checkpoint ทุกบท จะกินเวลานานกว่าแต่เข้าใจลึกกว่า)

#	บท	สอนอะไร
0	JS คืออะไร	ประวัติ, ECMAScript, browser vs Node, runtime
1	Setup + Hello World	Node.js install, REPL, browser console, devtools
2	Variables + Types	let/const/var, primitive vs reference, typeof, conversion
3	Operators + Expressions	==/===, ??, ?., spread/rest, coercion ที่เจ็บ
4	Control Flow	if/switch, for/while, for...of vs for...in, break
5	Functions Deep	declaration/expression/arrow, closure, this, bind, IIFE
6	Objects + Prototypes	object, prototype chain, class, inheritance
7	Arrays + Iteration	map/filter/reduce, destructuring, spread, Set/Map
8	Strings + Regex + Date	tagged templates, regex, Intl, Date pitfalls
9	Async Deep	callback → promise → async/await, event loop
10	Modules	ESM vs CommonJS, dynamic import, import maps
11	Error Handling	try/catch, custom Error, Promise rejection
12	DOM + Events	querySelector, event listener, bubbling, delegation
13	Modern JS + Tools	ESLint, Prettier, Vite, package.json, monorepo

วิธีอ่านที่แนะนำ

1. เปิด browser DevTools ไว้ตลอด — DevTools คือเครื่องมือสำหรับนักพัฒนาที่มาพร้อม browser กด F12 (Windows/Linux) หรือ Cmd+Option+I (Mac) เพื่อเปิด แล้วคลิก tab Console เพื่อพิมพ์ JavaScript ได้ทันที
2. เปิด Node.js REPL (node ใน terminal) สำหรับโจทย์ที่ไม่ต้อง browser
3. อ่านเรียงทีละบท — async (บท 9) จะงงถ้าข้าม function/closure
4. ลงมือเขียนเอง ทุก checkpoint — อย่า copy-paste

---

← กลับสารบัญหลัก | ➡️ บทที่ 00: JS คืออะไร