Control Flow

1. if / else คืออะไร

if / else คือโครงสร้างที่ทำให้โปรแกรมตัดสินใจได้ว่าจะทำอะไรต่อ ขึ้นอยู่กับเงื่อนไขที่เรากำหนด ในชีวิตจริง เราตัดสินใจแบบนี้ทุกวัน: - ถ้าฝนตก → เอาร่ม - ถ้าไม่ตก → ไม่ต้องเอาร่ม ใน JavaScript ก็เหมือนกัน — เราเขียนเงื่อนไข แล้วโปรแกรมจะเลือกทำเฉพาะเส้นทางที่เงื่อนไขเป็นจริง คำว่า if แปลว่า "ถ้า" ส่วน else แปลว่า "มิฉะนั้น" — คือทางเลือกสำรองเมื่อเงื่อนไขไม่เป็นจริง

2. เปรียบเทียบกับชีวิตจริง

ลองนึกถึงทางแยกบนถนน เดินมาเจอทางแยก → มีป้ายบอกว่า "ถ้าฝนตก เลี้ยวซ้ายไปทางร่ม มิฉะนั้น เลี้ยวขวาไปทางแดด" คุณมองดูฟ้า (ตรวจเงื่อนไข) → ฝนตกไหม? - ตก → เลี้ยวซ้าย (ทำ block ใน if) - ไม่ตก → เลี้ยวขวา (ทำ block ใน else) ทางแยกนี้คือ Control Flow — โปรแกรมไม่ได้วิ่งเป็นเส้นตรงตลอด แต่เลือกเส้นทางได้ตามเงื่อนไข

if คือทางแยก: เงื่อนไขเป็นจริงเดินทางซ้าย, เป็นเท็จเดินทางขวา — โปรแกรมเลือกเส้นทางได้เอง

ขยายภาพแนวคิด

3. ไวยากรณ์ (Syntax) ของ if / else

JavaScript มี 3 รูปแบบหลักสำหรับเงื่อนไข: 1. if เดี่ยว ๆ — ทำเมื่อเงื่อนไขเป็นจริง ไม่ทำก็ผ่านไป 2. if + else — เลือกอย่างใดอย่างหนึ่ง 3. if + else if + else — เลือกหลายทางตามลำดับ สิ่งสำคัญที่ต้องจำ: - เงื่อนไขต้องอยู่ในวงเล็บ ( ) - โค้ดที่จะทำต้องอยู่ในวงเล็บปีกกา { } - เงื่อนไขจะถูกแปลงเป็นค่า Boolean อัตโนมัติ (Truthy / Falsy)

// 1) if เดี่ยว ๆ — ทำหรือไม่ทำ
if (เงื่อนไข) {
  // ทำเมื่อเงื่อนไขเป็นจริง
}

// 2) if + else — เลือกอย่างใดอย่างหนึ่ง
if (เงื่อนไข) {
  // ทำเมื่อเงื่อนไขเป็นจริง
} else {
  // ทำเมื่อเงื่อนไขเป็นเท็จ
}

// 3) if + else if + else — หลายทางเลือก
if (เงื่อนไขA) {
  // ทำเมื่อ A เป็นจริง
} else if (เงื่อนไขB) {
  // ทำเมื่อ A เป็นเท็จ และ B เป็นจริง
} else {
  // ทำเมื่อทุกเงื่อนไขข้างบนเป็นเท็จ
}

4. เงื่อนไขเป็นจริงหรือเท็จได้อย่างไร

เมื่อ JavaScript ตรวจเงื่อนไขใน if ( ) มันจะแปลงผลลัพธ์เป็นค่า Boolean สองค่า: true หรือ false ค่าที่แปลงแล้วได้ true เรียกว่า Truthy ค่าที่แปลงแล้วได้ false เรียกว่า Falsy ค่า Falsy มีไม่กี่ตัว — จำง่าย ๆ ว่า "ค่าว่างทั้งหมด" คือ Falsy นอกนั้นเป็น Truthy

// Falsy — ไม่เข้า if
if (0)        { console.log("ไม่ทำ"); }
if ("")       { console.log("ไม่ทำ"); }
if (null)     { console.log("ไม่ทำ"); }
if (undefined) { console.log("ไม่ทำ"); }
if (false)    { console.log("ไม่ทำ"); }

// Truthy — เข้า if
if (1)        { console.log("ทำ!"); }
if ("hello")  { console.log("ทำ!"); }
if ([])       { console.log("ทำ!"); } // ระวัง! array เปล่าเป็น Truthy
if ({})       { console.log("ทำ!"); } // ระวัง! object เปล่าเป็น Truthy

5. ตัวอย่างทีละขั้นตอน

ลองไล่ตามโค้ดทีละบรรทัด เห็นภาพว่าโปรแกรมตัดสินใจอย่างไร สมมติเราเขียนโปรแกรมตรวจสอบอายุว่าเข้าเล่นเครื่องเล่นได้ไหม

• 1) ประกาศตัวแปร age = 15
• 2) โปรแกรมเจอ if (age >= 18) → ตรวจ 15 >= 18 → false
• 3) ข้าม block ของ if ไปที่ else
• 4) ทำ block ของ else → แสดง "อายุไม่ถึง ต้องมีผู้ปกครอง"
• 5) จบ — โปรแกรมทำงานต่อด้านล่าง

const age = 15;

if (age >= 18) {
  console.log("เข้าเล่นได้เลย!");
} else {
  console.log("อายุไม่ถึง ต้องมีผู้ปกครอง");
}
// ผลลัพธ์: "อายุไม่ถึง ต้องมีผู้ปกครอง"

6. else if — หลายทางเลือก

เมื่อมีมากกว่า 2 ทางเลือก ใช้ else if เพิ่มเงื่อนไขกลางคัน JavaScript จะตรวจเงื่อนไขจากบนลงล่าง — เจออันไหนเป็นจริงก่อน ก็ทำ block นั้นแล้วข้ามที่เหลือทั้งหมด ตัวอย่าง: แปลงคะแนนเป็นเกรด

const score = 75;

if (score >= 80) {
  console.log("เกรด A");
} else if (score >= 70) {
  console.log("เกรด B");
} else if (score >= 60) {
  console.log("เกรด C");
} else if (score >= 50) {
  console.log("เกรด D");
} else {
  console.log("เกรด F");
}
// ผลลัพธ์: "เกรด B" (75 >= 70 เป็นจริงก่อน)

สังเกต: เมื่อ score = 75 - ตรวจ 75 >= 80 → false → ข้าม - ตรวจ 75 >= 70 → true → ทำ "เกรด B" แล้วหยุด - ไม่ตรวจ 60, 50, F แล้ว — เพราะเจอจริงแล้ว นี่คือเหตุผลที่ต้องเรียงเงื่อนไขจากมากไปน้อย (สูงไปต่ำ)

7. โอเปอเรเตอร์เปรียบเทียบและตรรกะ

เงื่อนไขใน if มักใช้โอเปอเรเตอร์เปรียบเทียบ (Comparison Operators) และโอเปอเรเตอร์ตรรกะ (Logical Operators) ร่วมกัน

ข้อสำคัญ: ใช้ === และ !== เสมอ ไม่ใช้ == และ != เพราะ == จะแปลงประเภทอัตโนมัติ (Type Coercion) ทำให้เกิด bug แปลก ๆ เช่น "1" == 1 เป็น true แต่ "1" === 1 เป็น false

const age = 20;
const hasTicket = true;

// && (AND) — ต้องเป็นจริงทั้งคู่
if (age >= 18 && hasTicket) {
  console.log("เข้าคอนเสิร์ตได้");
}

// || (OR) — ขอให้เป็นจริงอย่างใดอย่างหนึ่ง
const isMember = false;
const isVIP = true;

if (isMember || isVIP) {
  console.log("เข้าห้อง VIP ได้");
}

// ! (NOT) — กลับค่า
const isClosed = false;

if (!isClosed) {
  console.log("เปิดอยู่ ยินดีต้อนรับ");
}

8. การซ้อน if (Nested if)

เราสามารถใส่ if ข้างใน if ได้ เรียกว่า Nested if แต่ควรระวัง — ซ้อนเกิน 2-3 ชั้นจะอ่านยาก ให้พยายามใช้ && รวมเงื่อนไขแทนเมื่อเป็นไปได้

const age = 25;
const hasID = true;

// ❌ ซ้อนลึก — อ่านยาก
if (age >= 18) {
  if (hasID) {
    console.log("ผ่าน");
  } else {
    console.log("ต้องแสดงบัตร");
  }
}

// ✅ รวมเงื่อนไข — อ่านง่ายกว่า
if (age >= 18 && hasID) {
  console.log("ผ่าน");
} else if (age >= 18 && !hasID) {
  console.log("ต้องแสดงบัตร");
} else {
  console.log("อายุไม่ถึง");
}

9. จุดที่ผู้เริ่มต้นมักสับสน

• ลืมวงเล็บรอบเงื่อนไข — if score > 0 ต้องเป็น if (score > 0)
• ใช้ = แทน === — = คือกำหนดค่า, === คือเปรียบเทียบ (if (x = 5) จะกำหนดค่า 5 ให้ x แล้วได้ truthy เสมอ!)
• ลืมวงเล็บปีกกา — ถ้ามีหลายบรรทัดต้องใส่ { } ไม่งั้นจะทำแค่บรรทัดแรก
• ใช้ == แทน === — == แปลงประเภทอัตโนมัติ ทำให้ผลลัพธ์ผิดคาด เช่น null == undefined เป็น true
• คิดว่า [] และ {} เป็น Falsy — จริง ๆ array และ object เปล่าเป็น Truthy ต้องเช็ค .length หรือ Object.keys() แทน
• เขียน else if ผิดเป็น if ต่างหาก — ทำให้ตรวจเงื่อนไขซ้ำโดยไม่จำเป็น

10. สรุปท้ายบท

• if ทำเมื่อเงื่อนไขเป็นจริง, else ทำเมื่อเท็จ — โปรแกรมเลือกเส้นทางได้
• else if เพิ่มทางเลือกกลางคัน — ตรวจจากบนลงล่าง เจอจริงก่อนก็ทำแล้วหยุด
• เงื่อนไขถูกแปลงเป็น Boolean อัตโนมัติ — จำค่า Falsy 6 ตัว: false, 0, "", null, undefined, NaN
• ใช้ === และ !== เสมอ — หลีกเลี่ยง == และ != เพราะ Type Coercion ทำให้ bug หายาก
• ใช้ && (AND), || (OR), ! (NOT) รวมเงื่อนไข — อ่านง่ายกว่าซ้อน if หลายชั้น
• หลีกเลี่ยง Nested if เกิน 2 ชั้น — รวมเงื่อนไขด้วย && แทนเมื่อเป็นไปได้

Lab 1: ใช้ if เพื่อตรวจสอบเงื่อนไข

เป้าหมาย: ฝึกใช้ if แบบพื้นฐานเพื่อตรวจว่าเงื่อนไขเป็นจริงหรือไม่ มีให้แล้ว: ต้องประกาศตัวแปร age เป็น 20 สิ่งที่ต้องทำ: เขียน if ตรวจ age > 18 แล้วให้ console.log("ผู้ใหญ่") เมื่อเงื่อนไขเป็นจริง ผลที่ควรเห็น: หน้า output แสดงคำว่า "ผู้ใหญ่"

Lab 2: ใช้ else if จัดหลายเงื่อนไข

เป้าหมาย: ฝึกใช้ if / else if / else เมื่อต้องเลือกผลลัพธ์จากหลายช่วงคะแนน มีให้แล้ว: `const score = 75` สิ่งที่ต้องทำ: เขียนเงื่อนไขตามกติกา A, B, C, F และเรียงจากคะแนนสูงไปต่ำ ผลที่ควรเห็น: หน้า output แสดง "เกรด B"

Lab 3: ใช้ else if จัดเกรดคะแนน

เป้าหมาย: ฝึกเก็บผลจาก if / else if ลงตัวแปร แล้วค่อยนำไปแสดงทีหลัง มีให้แล้ว: starter code สำหรับ `score` และ `grade` สิ่งที่ต้องทำ: กำหนดค่า `grade` จากช่วงคะแนน A-F แล้วแสดงทั้งคะแนนและเกรดออกมา ผลที่ควรเห็น: output มีทั้ง "คะแนน: 75" และ "เกรด: B"

Lab 4: ใช้ || เพื่อเลือกเงื่อนไขอย่างใดอย่างหนึ่ง

เป้าหมาย: ฝึกใช้ || เมื่อให้ผ่านได้ถ้าเงื่อนไขใดเงื่อนไขหนึ่งเป็นจริง มีให้แล้ว: `total = 1200` และ `isMember = false` สิ่งที่ต้องทำ: ถ้า total ถึงเกณฑ์ หรือเป็นสมาชิก ให้แสดง "ส่งฟรี" ไม่เช่นนั้นแสดง "ค่าส่ง 50 บาท" ผลที่ควรเห็น: output แสดง "ส่งฟรี"

Lab 5: ใช้ && เมื่อต้องผ่านทุกเงื่อนไข

เป้าหมาย: ฝึกใช้ && เมื่อทุกเงื่อนไขต้องเป็นจริงพร้อมกัน มีให้แล้ว: `age = 20` และ `hasTicket = true` สิ่งที่ต้องทำ: ถ้าอายุถึงและมีตั๋ว ให้แสดง "เข้าได้" ไม่เช่นนั้นแสดง "เข้าไม่ได้" ผลที่ควรเห็น: output แสดง "เข้าได้"

Lab 6: ใช้ ! เพื่อกลับค่า Boolean

เป้าหมาย: ฝึกใช้ ! เพื่อกลับค่า Boolean ในเงื่อนไข มีให้แล้ว: `isClosed = false` สิ่งที่ต้องทำ: ถ้าร้านไม่ได้ปิด ให้แสดง "ร้านเปิด" ถ้าปิดอยู่ให้แสดง "ร้านปิด" ผลที่ควรเห็น: output แสดง "ร้านเปิด"

Lab 7: ตรวจ Truthy/Falsy ของข้อความ

เป้าหมาย: ฝึกใช้ค่า string ตรง ๆ ใน if เพื่อดูพฤติกรรม Truthy/Falsy มีให้แล้ว: `couponCode = ""` สิ่งที่ต้องทำ: ถ้ามีข้อความใน couponCode ให้แสดง "ใช้คูปอง" ถ้าเป็นข้อความว่างให้แสดง "ไม่มีคูปอง" ผลที่ควรเห็น: output แสดง "ไม่มีคูปอง"

Lab 8: เรียง else if จากเงื่อนไขสูงไปต่ำ

เป้าหมาย: ฝึกเรียงเงื่อนไขจากเฉพาะมากไปกว้าง เพื่อไม่ให้ผลลัพธ์ผิดลำดับ มีให้แล้ว: `score = 92` และตัวแปร `level` สิ่งที่ต้องทำ: กำหนดค่า level จากคะแนน โดยต้องเช็ก `>= 90` ก่อน `>= 60` ผลที่ควรเห็น: output แสดง "ระดับ: ยอดเยี่ยม"

Lab 9: ตรวจ username และ password

เป้าหมาย: ฝึกใช้ === และ && เพื่อตรวจหลายค่าพร้อมกัน มีให้แล้ว: `username = "non"` และ `password = "1234"` สิ่งที่ต้องทำ: ถ้าสองค่าตรงตามที่กำหนด ให้แสดง "เข้าสู่ระบบสำเร็จ" ไม่เช่นนั้นแสดง "ข้อมูลไม่ถูกต้อง" ผลที่ควรเห็น: output แสดง "เข้าสู่ระบบสำเร็จ"

Lab 10: สรุปสถานะจากหลายเงื่อนไข

เป้าหมาย: สรุปหลายเงื่อนไขเข้าด้วยกันในโจทย์เดียว มีให้แล้ว: `temperature = 38`, `hasCough = true` และตัวแปร `status` สิ่งที่ต้องทำ: ใช้ if / else if / else เพื่อเลือกสถานะสุขภาพให้ตรงกับอาการที่กำหนด ผลที่ควรเห็น: output แสดง "สถานะ: ควรพักผ่อน"