Control Flow

โปรแกรมที่ทำงานทีละบรรทัดจากบนลงล่างเรียกว่าทำงานแบบ sequential ซึ่งทำงานได้ก็จริง แต่ตัดสินใจหรือวนซ้ำเองไม่ได้ Control flow คือเครื่องมือ ที่ทำให้โปรแกรม ตัดสินใจ และ ทำซ้ำ ได้

ถ้าเคยเขียน Python หรือ Java มา วิธีเขียนของบทนี้คุ้นเลย ใกล้เคียงกันมาก แต่จะมีกับดักของ JS ที่ต้องระวัง

if / else

ตัดสินใจตามเงื่อนไข ผลของเงื่อนไขต้องเป็น true หรือ false (ทบทวน truthy/falsy ใน lesson ก่อนหน้า)

const age = 20

if (age >= 18) {
  console.log("ผู้ใหญ่")
} else if (age >= 13) {
  console.log("วัยรุ่น")
} else {
  console.log("เด็ก")
}

Ternary คือ if/else แบบสั้น

ถ้าแค่จะ assign ค่าตามเงื่อนไข ใช้ ternary สั้นกว่าเยอะ ใช้เครื่องหมาย ?:

// แบบยาว
let label
if (age >= 18) {
  label = "ผู้ใหญ่"
} else {
  label = "เด็ก"
}

// แบบสั้น (ternary)
const label = age >= 18 ? "ผู้ใหญ่" : "เด็ก"

For loop ทำซ้ำตามจำนวน

สำหรับทำซ้ำ N ครั้ง for เป็นเครื่องมือคลาสสิก ลองเล่นข้างล่างดูว่ามันทำงานยังไง

for (let i = 0; i < 5; i++) {
  console.log(i)
}

วิธีเขียน for แบ่งเป็น 3 ส่วนใน (...)

• Initialize เช่น let i = 0 สร้างตัวแปรนับ ทำครั้งแรกครั้งเดียว
• Condition เช่น i < 5 ตรวจก่อนทุกรอบ ถ้า false หยุด
• Update เช่น i++ ทำหลัง body จบทุกรอบ

While ทำซ้ำจนกว่าเงื่อนไขจะเปลี่ยน

ใช้เมื่อไม่รู้จำนวนรอบล่วงหน้า เช่น “กรอกรหัสจนกว่าจะถูก”

let attempts = 0
let success = false

while (!success) {
  attempts++
  success = tryLogin()
}

For...of กับ For...in อย่าสับสน

JS มี for แบบใหม่ 2 ชนิดที่ทำงานบน array หรือ object ตรงๆ สำคัญมากที่ต้องแยกให้ออก

for (const v of arr) {
  console.log(v)
}

for (const k in arr) {
  console.log(k)
}

สรุปจำง่ายๆ

• for...of ใช้กับ array, string, Map, Set ได้ value
• for...in ใช้กับ object ได้ key (เป็น string)

Break กับ Continue

• break คือ ออกจาก loop ทันที ไม่ดูเงื่อนไขอีก
• continue คือ ข้าม body รอบนี้ กระโดดไปรอบถัดไป

for (let i = 1; i <= 10; i++) {
  if (i === 5) break       // ออกจาก loop ที่ i = 5
  if (i % 2 === 0) continue // ข้ามเลขคู่
  console.log(i)            // ปริ้น 1, 3 จบ
}

Switch เลือก case จากค่า

เมื่อต้องเทียบค่า 1 ตัวกับหลาย case switch อ่านง่ายกว่า if/else if ยาวๆ

const grade = "B"

switch (grade) {
  case "A":
    console.log("ดีมาก")
    break
  case "B":
    console.log("ดี")
    break
  case "C":
    console.log("พอใช้")
    break
  default:
    console.log("ตก")
}

Loop ไหนเลือกอันไหนดี

• รู้จำนวนรอบ ใช้ for
• รอเงื่อนไขเปลี่ยน ใช้ while
• วน array ใช้ for...of หรือ arr.forEach() (เรียนใน lesson 8)
• วน object key ใช้ for...in หรือ Object.keys(obj)

สรุป

• if / else if / else สำหรับตัดสินใจ ternary ?: ใช้ assign สั้น
• for เมื่อรู้จำนวนรอบ while เมื่อรอเงื่อนไข
• for...of ได้ value, for...in ได้ key อย่าสับสน
• break ออกทันที, continue ข้ามรอบนี้
• switch ระวัง fall-through ใส่ break ทุก case

จบ phase 1 (พื้นฐาน) แล้ว lesson ถัดไปเข้า phase 2 เริ่มที่ function ซึ่งเป็นเครื่องมือสำคัญที่จะใช้ทุกบรรทัดของโค้ดต่อจากนี้