JavaScript Control Flow (if-else)

   อัปเดตล่าสุด May 3, 2024

ในการเขียนโปรแกรม เราต้องมีวิธีควบคุมลำดับและเงื่อนไขการทำงานของโค้ด เพื่อให้โปรแกรมสามารถตัดสินใจและดำเนินการตามเงื่อนไขที่กำหนดได้ หนึ่งในโครงสร้างควบคุมการทำงานที่สำคัญและใช้งานบ่อยมากใน JavaScript คือ If-else statement

โครงสร้างของ If-else

โครงสร้างพื้นฐานของ if-else ใน JavaScript มีดังนี้

if (condition) {
// code to be executed if condition is true
} else {
// code to be executed if condition is false
}


โดย condition เป็นนิพจน์ (expression) ที่ถูกประเมินและให้ผลลัพธ์เป็น  true  หรือ  false  ถ้า  condition  เป็น  true โค้ดในบล็อกแรกจะถูกดำเนินการ แต่ถ้า condition เป็น  false  โค้ดในบล็อก  else  จะถูกดำเนินการแทน


ตัวอย่างการใช้งาน if-else

let age = 20;

if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}


ในตัวอย่างนี้ ถ้าค่าของตัวแปร   age  มากกว่าหรือเท่ากับ 18 ข้อความ "You are an adult." จะถูกแสดงใน console แต่ถ้า age  น้อยกว่า 18 ข้อความ "You are a minor." จะถูกแสดงแทน


if-else-if Ladder

ในกรณีที่มีเงื่อนไขหลายเงื่อนไขต้องตรวจสอบ สามารถใช้  if-else-if  ladder ได้ดังนี้

if (condition1) {
// ถ้า condition1 เป็นจริง ให้ทำคำสั่งในบล็อกนี้
} else if (condition2) {
// ถ้า condition1 เป็นเท็จ แต่ condition2 เป็นจริง ให้ทำคำสั่งในบล็อกนี้
} else if (condition3) {
// ถ้า condition1 และ condition2 เป็นเท็จ แต่ condition3 เป็นจริง ให้ทำคำสั่งในบล็อกนี้
} else {
// ถ้าทุกเงื่อนไข (condition1, condition2, condition3) เป็นเท็จ ให้ทำคำสั่งในบล็อกนี้
}


ตัวอย่างการใช้งาน  if-else-if  ladder

let grade = 85;

if (grade >= 90) {
console.log("Grade A");
} else if (grade >= 80) {
console.log("Grade B");
} else if (grade >= 70) {
console.log("Grade C");
} else if (grade >= 60) {
console.log("Grade D");
} else {
console.log("Grade F");
}


ในตัวอย่างนี้ โปรแกรมจะตรวจสอบเงื่อนไขต่างๆ ตามลำดับ และแสดงเกรดที่สอดคล้องกับคะแนน  grade  ที่กำหนด

คำอธิบายโค้ด

  • กำหนดให้ตัวแปร grade  มีค่าเท่ากับ 85 ซึ่งหมายถึงคะแนนของนักเรียน
  • เริ่มต้นโครงสร้าง  if-else-if  ladder เพื่อตรวจสอบเงื่อนไขต่างๆ ตามลำดับ
  • ตรวจสอบเงื่อนไขแรก: ถ้า  grade  มากกว่าหรือเท่ากับ 90 ให้แสดงข้อความ "Grade A" ใน console
  • ถ้าเงื่อนไขแรกเป็นเท็จ (คะแนนน้อยกว่า 90) จะตรวจสอบเงื่อนไขถัดไป: ถ้า  grade  มากกว่าหรือเท่ากับ 80 ให้แสดงข้อความ "Grade B" ใน console
  • ถ้าเงื่อนไขที่สองเป็นเท็จ (คะแนนน้อยกว่า 80) จะตรวจสอบเงื่อนไขถัดไป: ถ้า  grade  มากกว่าหรือเท่ากับ 70 ให้แสดงข้อความ "Grade C" ใน console
  • ถ้าเงื่อนไขที่สามเป็นเท็จ (คะแนนน้อยกว่า 70) จะตรวจสอบเงื่อนไขถัดไป: ถ้า  grade  มากกว่าหรือเท่ากับ 60 ให้แสดงข้อความ "Grade D" ใน console
  • ถ้าทุกเงื่อนไขข้างต้นเป็นเท็จ (คะแนนน้อยกว่า 60) จะดำเนินการตามบล็อก  else  ในตอนท้าย และแสดงข้อความ "Grade F" ใน console

ในตัวอย่างนี้ ค่าของ  grade  เท่ากับ 85 ซึ่งตรงกับเงื่อนไข  grade >= 80  ดังนั้น ผลลัพธ์ที่แสดงใน console จะเป็น "Grade B"

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


Nested If-else

นอกจากนี้ ยังสามารถใช้  if-else  ซ้อนกันเป็นชั้นๆ (nested) เพื่อตรวจสอบเงื่อนไขที่ซับซ้อนมากขึ้นได้ เช่น

let num = 0;

if (num >= 0) {
if (num == 0) {
console.log("The number is zero.");
} else {
console.log("The number is positive.");
}
} else {
console.log("The number is negative.");
}


ในตัวอย่างนี้ มีการใช้  if-else  ซ้อนกันสองชั้น เพื่อตรวจสอบว่าตัวเลขเป็นบวก ศูนย์ หรือลบ

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



คอร์สเรียนแนะนำ