JavaScript

ภาษาที่ขับเคลื่อนเว็บ

JavaScript ทำให้หน้าเว็บโต้ตอบได้และขับเคลื่อนแอปพลิเคชันทั้งตัว ตัวแปร ฟังก์ชัน อาร์เรย์และอ็อบเจกต์ จากนั้นก็ DOM โค้ดแบบอะซิงโครนัส คลอเชอร์ และเครื่องมือสมัยใหม่ ทั้งหมดนี้คือกระดูกสันหลังของนักพัฒนาเว็บทุกคน

พื้นฐาน

ผู้เริ่มต้น - เรียนพื้นฐานทีละขั้น

• ตัวแปร (let, const) และชนิดข้อมูลพื้นฐานมาดูวิธีเก็บข้อมูลด้วย let และ const พร้อมทำความรู้จักชนิดของค่าพื้นฐานใน JavaScript
• ตัวดำเนินการและเงื่อนไข (if/else, การเปรียบเทียบ, ===)เรียนรู้การคำนวณ การเปรียบเทียบค่าด้วย === และทำให้โปรแกรมตัดสินใจได้ด้วย if และ else
• ลูป: for, while, for...ofทำคำสั่งซ้ำ ๆ โดยไม่ต้องเขียนซ้ำ ด้วยลูป for, while และ for...of
• ฟังก์ชัน: การประกาศ พารามิเตอร์ และ returnสร้างบล็อกโค้ดที่นำกลับมาใช้ซ้ำได้ด้วย function ส่งพารามิเตอร์เข้าไป และรับผลลัพธ์กลับมาด้วย return
• อาร์เรย์และอ็อบเจกต์: การสร้าง การอ่าน การแก้ไขเก็บค่าหลายค่าไว้ในอาร์เรย์ อธิบายสิ่งต่าง ๆ ด้วยอ็อบเจกต์ แล้วเรียนรู้วิธีอ่านและแก้ไขพวกมัน

ก้าวหน้า

ระดับกลาง - สร้างโปรเจกต์จริง

• เมธอดของอาร์เรย์: map, filter, reduce, findเรียนรู้การแปลง กรอง และรวมข้อมูลด้วยเมธอดอาร์เรย์สี่ตัวที่ใช้มากที่สุดในโปรเจกต์จริง
• อาร์โรว์ฟังก์ชัน, ขอบเขต และ template literalsเชี่ยวชาญไวยากรณ์อาร์โรว์ ขอบเขตแบบบล็อก และคลอเชอร์ แล้วสร้างสตริงแบบไดนามิกด้วย template literals
• Destructuring และ spread/restแยกข้อมูลออกจากออบเจกต์และอาร์เรย์อย่างสะอาดตา แล้วคัดลอกและรวมโครงสร้างด้วยตัวดำเนินการ spread
• การจัดการ DOM: querySelector, event listenersเลือกอิลิเมนต์บนหน้าเว็บ ตอบสนองต่อการคลิก และนำการมอบหมายเหตุการณ์ (event delegation) มาใช้เพื่อโค้ดที่มีประสิทธิภาพ
• JSON, localStorage และ fetch ครั้งแรกของคุณแปลงข้อมูลของคุณให้อยู่ในรูป JSON เก็บถาวรไว้ในเบราว์เซอร์ด้วย localStorage และดึงข้อมูลจากระยะไกลด้วย fetch

ขั้นสูง

ชำนาญ - แพตเทิร์นขั้นสูงและประสิทธิภาพ

• Closure และขอบเขตแบบเล็กซิคัลเชี่ยวชาญวิธีที่ closure จับตัวแปรเอาไว้ เพื่อให้คุณห่อหุ้มสถานะและหลีกเลี่ยงกับดักเรื่องขอบเขตได้
• this, โปรโตไทป์ และคลาสทำความเข้าใจว่า this ถูกกำหนดค่าแบบไดนามิกอย่างไร โปรโตไทป์เชนทำงานอย่างไร และคลาสเพิ่มอะไรเข้าไปในโมเดลของอ็อบเจกต์กันแน่
• อะซิงโครนัสเชิงลึก: promise, async/await, การจัดการข้อผิดพลาดใช้ประโยชน์จาก event loop, ทำให้ promise ของคุณทำงานคู่ขนานอย่างถูกต้อง และทำให้การจัดการข้อผิดพลาดแบบอะซิงโครนัสเชื่อถือได้
• ES module: import/export, การจัดโครงสร้างโปรเจกต์จัดโครงสร้างโปรเจกต์ของคุณด้วย ES module โดยใช้ประโยชน์จากการวิเคราะห์แบบสถิตและหลีกเลี่ยง barrel ที่เป็นพิษและการพึ่งพาแบบวงกลม
• การดีบักและความทนทาน: try/catch, console ขั้นสูง, ข้อผิดพลาดที่กำหนดเองสร้างกลยุทธ์จัดการข้อผิดพลาดที่ชัดเจนด้วยคลาสเฉพาะทาง จุดดักจับ (catch boundary) ที่วางไว้อย่างเหมาะสม และ console ที่ใช้อย่างเต็มศักยภาพ

เชี่ยวชาญ

ผู้เชี่ยวชาญ - สถาปัตยกรรม กลไกภายใน และกรณีขอบ

• Event loop: call stack, microtask, macrotaskทำความเข้าใจว่าเอนจินจัดลำดับการทำงานของโค้ดแบบซิงโครนัส microtask และ macrotask อย่างไรจริง ๆ
• Iterator, generator และโปรโตคอลการวนซ้ำเชี่ยวชาญโปรโตคอลที่อยู่เบื้องหลัง for...of, spread และ destructuring แล้วใช้ generator เพื่อสร้างลำดับแบบ lazy
• Proxy, Reflect และเมตาโปรแกรมมิงดักจับการดำเนินการพื้นฐานของภาษาด้วย trap ของ Proxy และมอบหมายพฤติกรรมเริ่มต้นอย่างสะอาดด้วย Reflect
• หน่วยความจำและประสิทธิภาพ: GC, WeakMap/WeakRef, debounce/throttleทำความเข้าใจว่า garbage collector ทำงานอย่างไร ใช้ weak reference เพื่อหลีกเลี่ยงการรั่วไหล และปรับงานที่มีต้นทุนสูงให้ราบรื่นด้วย debounce และ throttle
• Functional pattern: currying, composition, immutabilityจัดโครงสร้างโค้ดของคุณด้วย currying การประกอบฟังก์ชัน และข้อมูลที่ไม่เปลี่ยนแปลง เพื่อให้ได้ความคาดเดาได้และการทดสอบได้