Programming Track
JavaScript
JavaScript Phase Overview
Loop Arrays & Objects
ภาพรวมของ phase นี้คือการเลือก loop และ bridge ให้ตรงกับโจทย์ ระหว่าง array, object และข้อมูล 2 ชั้น ก่อนลงมือทำ workshop รวมท้าย phase
Phase นี้พาคุณเลือก loop ให้ตรงกับ data structure
phase นี้ไม่ได้สอนแค่ว่า loop เขียนอย่างไร แต่สอนให้แยกให้ออกว่าโจทย์กำลังต้องการ **index**, **value**, **key**, **คู่ `[key, value]`** หรือข้อมูล 2 ชั้น ถ้าเลือกเครื่องมือถูกตั้งแต่ต้น โค้ดจะสั้น อ่านง่าย และลดความสับสนได้มาก
| กลุ่มโจทย์ | สิ่งที่ต้องสังเกต | บทที่ช่วยตอบโจทย์ |
|---|---|---|
| Array ที่ต้องใช้ตำแหน่ง | ต้องใช้ `i`, `arr[i]`, หรือดู element ข้างเคียง | `for loop กับ array (เมื่อจำเป็นต้องใช้ index)` |
| Array ที่อยากอ่านค่าทีละตัว | สนใจ value โดยตรง ไม่ต้องรู้ index | `for...of กับ array` |
| Object ที่อยากวน property | ต้องรู้ key, value หรือทั้งคู่ | `for...in`, `Object.keys()`, `Object.values()`, `Object.entries()` |
| ข้อมูล 2 ชั้น | มีแถวและสมาชิกย่อยในแต่ละแถว | `Nested loop` |
เลือกเครื่องมือให้ตรงกับโจทย์
| เครื่องมือ | ใช้เมื่อไหร่ | ไม่ควรใช้เมื่อไหร่ |
|---|---|---|
| `for` loop | โจทย์ต้องใช้ `index`, `arr[i]`, ดูค่าก่อนหน้า/ถัดไป, หรือแก้ค่ากลับเข้า array เดิม | เมื่อแค่อยากอ่านค่าทีละตัวจาก array |
| `for...of` | ต้องการ value ของ array ทีละตัวแบบตรง ๆ | เมื่อโจทย์ต้องใช้ index โดยตรง |
| `for...in` | ต้องการชื่อ key ของ object ทีละตัว | อย่าใช้เป็น default กับ array |
| `Object.keys()` | อยากได้รายชื่อ key แล้วค่อยวนต่อ | เมื่อโจทย์สนใจ value อย่างเดียว |
| `Object.values()` | อยากรวม หรือตรวจ value ทั้งหมด | เมื่อโจทย์ต้องใช้ชื่อ key ไปด้วย |
| `Object.entries()` | อยากได้ทั้ง key และ value พร้อมกัน | เมื่อโจทย์ต้องใช้แค่ key หรือแค่ value |
| `Nested loop` | ข้อมูลเป็น 2 ชั้น เช่น `grid[row][col]` หรือ pattern หลายบรรทัด | เมื่อโจทย์วนแค่ข้อมูลชั้นเดียว |
ลำดับบทเรียนใน phase นี้
- Overview: อ่านหน้านี้ก่อนเพื่อเห็นภาพรวมของเครื่องมือทั้งหมด
- for loop กับ array (เมื่อจำเป็นต้องใช้ index): เริ่มจากโจทย์แบบ index-first
- for...of กับ array: เปลี่ยน mindset ไปสู่การอ่าน value โดยตรง
- for...in กับ array: ดูให้ชัดว่าทำไมไม่ควรใช้เป็น default กับ array
- for...in กับ object: เรียน pattern ของการได้ key แล้วใช้ `obj[key]`
- Object.keys(), Object.values(), Object.entries(): เลือกสะพานจาก object ไปสู่ array ให้ตรงโจทย์
- for...of กับ object: รวมแนวคิดจากสามบทก่อนหน้าแล้วเลือก bridge ให้เป็น
- Nested loop: ขยับไปสู่ข้อมูล 2 ชั้นและโจทย์หลายบรรทัด
- Workshop: Loop Arrays & Objects: รวมทุก pattern ใน phase นี้เข้าด้วยกัน
ถ้าโจทย์ของคุณเป็นแบบนี้ ควรเริ่มที่บทไหน
| โจทย์ | เริ่มที่บทไหน |
|---|---|
| อยากแสดงลำดับข้อ หรือใช้ `arr[i]` | `for loop กับ array (เมื่อจำเป็นต้องใช้ index)` |
| อยากอ่านค่าทุกตัวจาก array แบบสั้นและตรง | `for...of กับ array` |
| สงสัยว่า `for...in` ใช้กับ array ได้ไหม | `for...in กับ array` |
| อยากวน key ของ object ทีละตัว | `for...in กับ object` |
| อยากเลือกให้ถูกว่าจะเอา key, value หรือทั้งคู่ | `Object.keys()`, `Object.values()`, `Object.entries()` |
| อยากใช้ `for...of` กับ object อย่างถูกวิธี | `for...of กับ object` |
| โจทย์มีแถวและคอลัมน์ หรือมี loop ซ้อนกัน | `Nested loop` |
เมื่ออ่าน overview จบแล้ว แนะนำให้เริ่มจากบทแรกของ phase นี้ใน sidebar เพื่อให้เห็นความต่างของแต่ละเครื่องมือแบบเป็นลำดับ