โปรแกรมที่มีประโยชน์ทุกโปรแกรมย่อมต้องมาถึงจุดที่ต้องตัดสินใจในที่สุด ปุ่มนี้ควรจะส่งฟอร์มหรือแสดงข้อผิดพลาด? ผู้ใช้...

ทุกโปรแกรมที่มีประโยชน์ย่อมต้องถึงจุดที่ต้องตัดสินใจ ไม่ว่าจะเป็นปุ่มนี้ควรจะส่งฟอร์มหรือแสดงข้อผิดพลาด? ผู้ใช้คนนี้ควรเห็นแดชบอร์ดผู้ดูแลระบบหรือมุมมองสำหรับแขก? JavaScript ตอบคำถามเหล่านี้ด้วยประโยคเงื่อนไข (conditional statements) ซึ่งเปรียบเสมือนวาล์วควบคุมโค้ดของคุณ: เปิดเส้นทางหนึ่ง ปิดอีกเส้นทางหนึ่ง ทั้งหมดขึ้นอยู่กับว่านิพจน์ (expression) นั้นมีค่าเป็นจริง (true) หรือเท็จ (false) หากไม่มีสิ่งนี้ สคริปต์ของคุณก็จะทำงานไล่จากบนลงล่างโดยไม่ตอบสนองต่อผู้ใช้งานเลย

ทางเลือกที่ง่ายที่สุด: if

คำสั่ง if คือประตูบานแรกที่คุณต้องผ่าน คุณจะวางเงื่อนไขไว้ภายในวงเล็บ หากเงื่อนไขนั้นเป็น true บล็อกโค้ดที่อยู่ด้านล่างจะทำงาน แต่หากเป็น false JavaScript จะข้ามบล็อกนั้นไปทั้งหมดและทำงานในส่วนถัดไปของไฟล์

นี่คือสิ่งที่คุณต้องการสำหรับการตรวจสอบแบบง่ายๆ เพียงครั้งเดียว ลองจินตนาการถึงการตรวจสอบความถูกต้องของฟิลด์ในฟอร์มก่อนที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์:

const email = document.getElementById("email").value;

if (email === "") {
  alert("Please enter your email.");
}

ไม่มี email ก็ไม่มีการส่งข้อมูล ตรรกะนี้ตรงไปตรงมาและชัดเจน ใช้ if เมื่อมีกรณีพิเศษเพียงกรณีเดียวที่ต้องป้องกัน และไม่จำเป็นต้องมีทางเลือกอื่นในการดำเนินการ

การจัดการแบบ "อย่างใดอย่างหนึ่ง": if...else

การตัดสินใจในชีวิตจริงส่วนใหญ่มักมีสองด้าน คู่ของ if...else ครอบคลุมสิ่งนั้นพอดี บล็อกหนึ่งจะทำงานเมื่อเงื่อนไขเป็นจริง และอีกบล็อกหนึ่งจะทำงานเมื่อเงื่อนไขเป็นเท็จ ทั้งสองเส้นทางนี้จะแยกจากกันโดยเด็ดขาด

ลองนึกภาพการตรวจสอบโหมดมืด (dark-mode) เมื่อโหลดหน้าเว็บ:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {
  document.body.classList.add("dark");
} else {
  document.body.classList.add("light");
}

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

หลายเส้นทาง: if...else if...else

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

ตัวอย่างคลาสสิกคือการแปลงคะแนนตัวเลขเป็นเกรดตัวอักษร:

const score = 87;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

ลำดับมีความสำคัญอย่างยิ่งในจุดนี้ หากคุณตรวจสอบ score >= 70 ก่อน score >= 90 คะแนนที่ผ่านเกือบทั้งหมดจะไปติดอยู่ในกลุ่ม C เพราะเงื่อนไขแรกที่เป็นจริงจะถูกเลือกก่อน ควรเรียงลำดับเงื่อนไขจากเฉพาะเจาะจงที่สุดไปหาทั่วไปที่สุด และควรปิดท้ายด้วย else เสมอเพื่อดักจับกรณีอื่นๆ ที่อาจหลุดรอดมา

การจับคู่กับค่าที่กำหนดไว้: switch

เมื่อคุณต้องเปรียบเทียบตัวแปรหนึ่งกับรายการค่าคงที่ที่ทราบกันอยู่แล้ว การใช้ if...else ต่อกันยาวๆ จะทำให้โค้ดดูวุ่นวาย คำสั่ง switch จะช่วยจัดการเรื่องนี้ให้สะอาดขึ้น โดยจะประเมินนิพจน์เพียงครั้งเดียว แล้วนำไปเปรียบเทียบกับป้ายกำกับ case ต่างๆ โดยใช้การเปรียบเทียบแบบเท่ากันเป๊ะ (===) สิ่งนี้ช่วยให้โค้ดอ่านง่ายขึ้นเมื่อตัวเลือกต่างๆ มีความชัดเจนและมีชื่อเรียก

ลองพิจารณาการตั้งเวลาเปิดปิดร้านตามวันปัจจุบัน:

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("Sunday hours: 10am - 4pm");
    break;
  case 6:
    console.log("Saturday hours: 9am - 6pm");
    break;
  default:
    console.log("Weekday hours: 8am - 8pm");
}

ระวังเรื่อง break หากคุณละเลยมัน การทำงานจะไหลผ่านไปยัง case ถัดไปและทำงานต่อไปเรื่อยๆ พฤติกรรมแบบนั้นอาจมีประโยชน์ในบางครั้ง แต่ส่วนใหญ่มักจะทำให้เกิดบั๊กที่ตรวจหายาก หากใช้ได้อย่างถูกต้อง switch จะทำให้เจตนาของคุณชัดเจนเพียงแค่กวาดสายตามอง และช่วยให้เงื่อนไขที่เกี่ยวข้องกันเรียงตัวกันอย่างเป็นระเบียบในคอลัมน์เดียว

การตัดสินใจแบบกระชับ: Ternary Operator

Ternary operator ซึ่งเขียนในรูปแบบ ? : คือนิพจน์ (expression) ไม่ใช่ประโยคคำสั่ง (statement) ซึ่งความแตกต่างนี้มีความสำคัญ