Mission 1: req.params — ค่าที่ฝังอยู่ใน URL

เป้าหมายของ Mission นี้: ใช้ req.params รับค่าที่ฝังอยู่ใน URL ได้อย่างมั่นใจ

---

1. Learning Objective

จบ Mission นี้คุณจะ

• อธิบายได้ว่า Route Parameter คืออะไร
• รับ parameter ได้มากกว่า 1 ตัวใน route เดียว
• รู้ว่า req.params ให้ค่าเป็นชนิดอะไรและต้องแปลงเมื่อไหร่
• ตรวจสอบความถูกต้องของ parameter ก่อนใช้งานได้

---

2. Theory — Route Parameter คือ "ช่องว่างใน URL"

เวลาเราเขียน "/books/:id" เครื่องหมาย : บอก Express ว่า "ตรงนี้เป็นช่องว่าง อะไรมาก็รับ แล้วเก็บชื่อว่า id"

      app.get("/books/:id", ...)
                     |
                     +-- ช่องว่างชื่อ id

   ยิง GET /books/7        ->  req.params = { id: "7" }
   ยิง GET /books/abc      ->  req.params = { id: "abc" }
   ยิง GET /books/หนังสือ    ->  req.params = { id: "หนังสือ" }

:id รับอะไรก็ได้ ไม่ได้จำกัดว่าต้องเป็นตัวเลข — นี่คือสาเหตุของกับดักลำดับ route ที่เจอมา 3 ครั้งแล้ว

---

3. Diagram — ข้อมูลไหลจาก URL เข้าโค้ดยังไง

flowchart LR
    A["GET /users/12/books/5"] --> B["route pattern<br/>/users/:userId/books/:bookId"]
    B --> C["req.params = {<br/>&nbsp;&nbsp;userId: '12',<br/>&nbsp;&nbsp;bookId: '5'<br/>}"]
    C --> D["Number() แปลงก่อนใช้"]
    style C fill:#1e3a5f,stroke:#38bdf8,color:#fff

ASCII แบบจับคู่ตำแหน่ง

   Pattern:   /users/:userId/books/:bookId
                      |            |
   URL จริง:   /users/  12   /books/  5
                      |            |
   ผลลัพธ์:    req.params.userId = "12"
              req.params.bookId = "5"

Express จับคู่ ตามตำแหน่ง ไม่ใช่ตามชื่อ — ชื่อหลัง : เป็นแค่ชื่อที่เราตั้งเองเพื่อเรียกใช้

---

4. Live Coding

ตัวอย่างที่ 1 — parameter เดียว (ทบทวน)

app.get("/books/:id", (req, res) => {
  const books = readBooks();
  const id = Number(req.params.id);
  const book = books.find((b) => b.id === id);
  if (!book) return res.status(404).json({ error: "ไม่พบหนังสือเล่มนี้" });
  res.json(book);
});

ทุก route ยังขึ้นต้นด้วย readBooks() เหมือน Chapter 3 — Chapter นี้เปลี่ยนแค่ วิธีรับค่าจาก Client ไม่ได้เปลี่ยนวิธีเก็บข้อมูล

ตัวอย่างที่ 2 — หลาย parameter

// GET /books/1997/แฮร์รี่  -> หาหนังสือปี 1997 ที่ชื่อมีคำว่า แฮร์รี่
app.get("/books/:year/:keyword", (req, res) => {
  const { year, keyword } = req.params;   // destructure ได้เหมือน object ปกติ

  const results = readBooks().filter(
    (b) => b.year === Number(year) && b.title.includes(keyword),
  );

  res.json(results);
});

ตัวอย่างที่ 3 — Validate parameter ก่อนใช้

ปัญหา: Number("abc") ได้ NaN ซึ่งเทียบกับอะไรก็ไม่ตรง แล้วเราจะได้ 404 — ซึ่งพอใช้ได้ แต่ถ้าอยากบอกผู้ใช้ให้ชัดว่า "id ต้องเป็นตัวเลข" ให้ตอบ 400 แทน

app.get("/books/:id", (req, res) => {
  const id = Number(req.params.id);

  if (!Number.isInteger(id)) {
    return res.status(400).json({ error: "id ต้องเป็นตัวเลขจำนวนเต็ม" });
  }

  const book = readBooks().find((b) => b.id === id);
  if (!book) return res.status(404).json({ error: "ไม่พบหนังสือเล่มนี้" });
  res.json(book);
});

Number.isInteger(NaN) เป็น false จึงใช้ดักได้ทั้ง "abc" และ "1.5" ในทีเดียว

400 vs 404 ในเคสนี้: ทั้งคู่ยอมรับได้

• /books/abc → 400 = "คุณส่งรูปแบบผิด"
• /books/999 → 404 = "รูปแบบถูก แต่ไม่มีของ" แยกแบบนี้ช่วยให้ Frontend แสดงข้อความต่างกันได้

---

5. Workshop เล็ก — จับคู่ URL กับ params

ลองตอบในใจว่า req.params จะได้อะไร

Route Pattern	URL ที่ยิงมา	req.params = ?
/books/:id	/books/42	{ id: "42" }
/books/:id	/books/42/reviews	ไม่ตรง → ไปหา route อื่น
/users/:uid/books/:bid	/users/3/books/9	{ uid: "3", bid: "9" }
/books/:id	/books/	ไม่ตรง (ต้องมีค่าอยู่ตรงนั้น)

---

6. Common Mistakes

ปัญหา	สาเหตุ	วิธีแก้
เทียบ id แล้วไม่เจอ	req.params.id เป็น string	Number() ก่อนเสมอ
ใช้ req.param.id (ไม่มี s)	พิมพ์ผิด	ต้องเป็น req.params มี s
/books/search ถูก :id ดักไป	ลำดับ route	ย้าย route เจาะจงขึ้นบน
ตั้งชื่อ param ซ้ำกันใน route เดียว	/books/:id/:id	ตัวหลังจะทับตัวหน้า — ตั้งชื่อให้ต่างกัน
คาดว่า /books/ (ไม่มีค่า) จะเข้า /books/:id	Express ต้องมีค่าอยู่จริง	ถ้าอยากให้ไม่บังคับใช้ /books/:id? (มี ?)
ลืม validate แล้วโดนยิง /books/../../etc	ไม่ตรวจ input	ตรวจชนิดข้อมูลก่อนใช้เสมอ

---

7. Summary

• req.params = ค่าที่ฝังอยู่ใน path ตามตำแหน่งของ :ชื่อ
• ใช้เมื่อค่านั้นคือ "ตัวระบุว่าเป็นชิ้นไหน" (identity) เช่น id
• ค่าที่ได้เป็น string เสมอ → แปลงก่อนใช้
• มีได้หลายตัวใน route เดียว
• Validate ก่อนใช้ → รูปแบบผิดตอบ 400, ไม่มีของตอบ 404