การแยกเงื่อนไขใน JavaScript

บทความนี้อธิบายการแยกเงื่อนไขใน JavaScript

YouTube Video

คำสั่ง if ใน JavaScript

ไวยกรณ์พื้นฐาน

1if (condition) {
2    // Code that executes if the condition is true
3}

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

ตัวอย่าง

1let x = 10;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5}

ในตัวอย่างนี้ เนื่องจากค่าของ x มากกว่า 5 x มากกว่า 5 จะถูกแสดงที่คอนโซล

คำสั่ง else

ไวยกรณ์พื้นฐาน

1if (condition) {
2    // Code that executes if the condition is true
3} else {
4    // Code that executes if the condition is false
5}

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

ตัวอย่าง

1let x = 3;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5} else {
6    console.log("x is 5 or less");
7}

ในกรณีนี้ เนื่องจาก x น้อยกว่า 5 จะมีการแสดง "x มีค่าเท่ากับ 5 หรือน้อยกว่า"

คำสั่ง else if

ไวยกรณ์พื้นฐาน

1if (condition1) {
2    // Code that executes if condition1 is true
3} else if (condition2) {
4    // Code that executes if condition1 is false and condition2 is true
5} else {
6    // Code that executes if both condition1 and condition2 are false
7}

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

ตัวอย่าง

1let x = 5;
2
3if (x > 10) {
4    console.log("x is greater than 10");
5} else if (x === 5) {
6    console.log("x is 5");
7} else {
8    console.log("x is 5 or less");
9}

ในกรณีนี้ เนื่องจาก x มีค่าเท่ากับ 5 "x is 5" จะแสดงผล

ตัวดำเนินการทางเลือกแบบสามทาง (Ternary Operator)

ไวยากรณ์

1condition ? valueIfTrue : valueIfFalse

หากคุณต้องการเขียนคำสั่ง if ให้กระชับขึ้น คุณสามารถใช้ตัวดำเนินการทางเลือกแบบสามทางได้

ตัวอย่าง

1const number = 7;
2const result = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

ในกรณีนี้ เนื่องจาก number มีค่าเป็น 7 จะมีการแสดงคำว่า Odd

สรุป

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

คำสั่ง switch ใน JavaScript

ไวยกรณ์พื้นฐาน

 1switch (expression) {
 2    case value1:
 3        // Code that executes if the expression matches value1
 4        break;
 5    case value2:
 6        // Code that executes if the expression matches value2
 7        break;
 8    default:
 9        // Code that executes if no cases match
10}

คำสั่ง switch ใน JavaScript ใช้สำหรับเปรียบเทียบข้อความนิพจน์หนึ่งรายการ (ปกติจะเป็นตัวแปร) กับค่าหลายค่า (case) และดำเนินการโค้ดที่สอดคล้อง เช่นเดียวกับคำสั่ง if, switch ทำหน้าที่ในการแยกเงื่อนไข แต่โดยทั่วไปจะอ่านง่ายกว่าหากมีหลายเงื่อนไข

ตัวอย่าง

 1let fruit = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5        console.log("This is an apple");
 6        break;
 7    case "banana":
 8        console.log("This is a banana");
 9        break;
10    default:
11        console.log("Unknown fruit");
12}

ในตัวอย่างนี้ เนื่องจาก fruit คือ "apple", ข้อความ "This is an apple" จะแสดงในคอนโซล

break の役割

โดยการใส่ break ที่ท้ายของแต่ละกรณี, คุณจะออกจากคำสั่ง switch หลังจากเสร็จกรณีนั้น ถ้าคุณไม่เขียน break, กรณีถัดไปจะถูกดำเนินการด้วยเช่นกัน (เรียกว่า fall-through)

ตัวอย่างของ Fall-Through

 1let color = "red";
 2
 3switch (color) {
 4    case "red":
 5        console.log("This is red");
 6    case "blue":
 7        console.log("This is blue");
 8    default:
 9        console.log("Unknown color");
10}

ในกรณีนี้ เนื่องจาก color คือ "red" และไม่มี break หลังข้อความ "This is red", ข้อความ "This is blue" และ "Unknown color" จะปรากฏด้วยเช่นกัน

การใช้ default

default คือส่วนที่ถูกดำเนินการเมื่อไม่มีกรณีใดที่ตรงกัน สิ่งนี้สอดคล้องกับ else ในคำสั่ง if

 1let animal = "dog";
 2
 3switch (animal) {
 4    case "cat":
 5        console.log("This is a cat");
 6        break;
 7    case "bird":
 8        console.log("This is a bird");
 9        break;
10    default:
11        console.log("Unknown animal");
12}

ในกรณีนี้ เนื่องจาก animal คือ "dog" มันจึงตกไปที่ default และข้อความ "Unknown animal" จะแสดง

การจัดการค่าหลายค่าในกรณีเดียวกัน

หากคุณต้องการดำเนินการเดียวกันสำหรับหลายกรณี คุณสามารถเขียนกรณีเหล่านั้นติดกันได้

ตัวอย่าง

 1let day = 1;
 2switch (day) {
 3    case 1:
 4    case 2:
 5    case 3:
 6    case 4:
 7    case 5:
 8        console.log("Weekday");
 9        break;
10    case 6:
11    case 7:
12        console.log("Weekend");
13        break;
14    default:
15        console.log("Unknown day");
16}

ในตัวอย่างนี้ หาก day คือ 1 ข้อความ "Weekday" จะแสดง

switch vs. if

• คำสั่ง if เหมาะสำหรับตรวจสอบเงื่อนไขที่ซับซ้อนหรือช่วงของค่า ตัวอย่างเช่น เงื่อนไขที่ซับซ้อนอย่างตัวแปร x มีค่ามากกว่าหรือเท่ากับ 10 และน้อยกว่าหรือเท่ากับ 20 ไม่สามารถเขียนในคำสั่ง switch ได้
• คำสั่ง switch บางครั้งทำให้โค้ดอ่านง่ายขึ้นเมื่อทำการตรวจสอบค่าที่ตรงกับค่าที่กำหนด

สรุป

• คำสั่ง switch ใช้สำหรับเขียนเงื่อนไขแยกย่อยสำหรับค่าหลายค่าอย่างกระชับ
• หากคุณไม่ใช้ break ที่ท้ายแต่ละ case case ถัดไปอาจถูกดำเนินการด้วยเช่นกัน (fall-through)
• default จะถูกรันเมื่อไม่มีกรณีใดที่ตรงกัน

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video