คำสั่งเลือกเงื่อนไข switch case ในภาษา JavaScript

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

  • คำสั่ง switch case
  • คำสั่ง break
  • การกำหนดเงื่อนไขแบบ OR

คำสั่ง switch case

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

switch (input) {
    case value1:
        // statements
        break;
    case value2:
        // statements
        break;
    case valueN:
        // statements
        break;
    default:  
        // statements
        break;
}

คำสั่ง switch นั้นรับหนึ่งพารามิเตอร์ input เป็นตัวแปรเพื่อนำมาเปรีียบเทียบกับแต่ละค่าที่กำหนดใน case ซึ่งการเปรียบเทียบนั้นจะใช้ตัวดำเนินการ === ข้อมูลและประเภทข้อมูลต้องตรงกันเท่านั้นเพื่อที่จะทำให้เงื่อนไขเป็นจริง นั่นหมายความว่าเราไม่สามารถกำหนดเงื่อนไขในรูปแบบอื่นๆ ในการใช้งานคำสั่ง switch ได้

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

นอกจากนี้ เรายังสามารถกำหนดคำสั่ง default เพื่อทำงานในกรณีที่ไม่มีเงื่อนไขใน case ใดเป็นจริงเลย นี่เป็นตัวอย่างของการใช้งานคำสั่ง switch ในการตรวจสอบค่าในตัวแปร n และแสดงข้อความของตัวเลขออกทางหน้าจอ

switch.js
let n = 2;

switch (n) {
    case 1:
        console.log("One");
        break;
    case 2:
        console.log("Two");
        break;
    case 3:
        console.log("Three");
        break;
    default:
        console.log("Unknown value");
        break;
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Two

ในตัวอย่าง เราได้ประกาศตัวแปร n ที่มีค่าเป็น 2 จากนั้นส่งตัวแปรเป็นพารามิเตอร์เข้าไปยังคำสั่ง switch case เพื่อเปรียบเทียบกับค่าต่างๆ ในแต่ะละ case

case 2:

โปรแกรมจะทำการเปรียบเทียบทีละ case จนพบกับ case 2 ซึ่งทำให้เงื่อนไขเป็นจริง ดังนั้น "Two" ถูกแสดงผลออกทางหน้าจอ และจบการทำงานของคำสั่ง switch case ด้วยคำสั่ง break

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

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

country_code.js
let code = "th";

let country = null;
let callingCode = null;

switch (code) {
    case "uk":
        country = "England";
        callingCode = 44;
        break;
    case "us":
        country = "United State";
        callingCode = 66;
        break;
    case "th":
        country = "Thailand";
        callingCode = 66;
        break;
    case "sp":
        country = "Singapore";
        callingCode = 65;
        break;
    default:
        country = "Unknow country";
}

console.log("Code:", code);
console.log("Country name:", country);
console.log("Calling code:", "+" + callingCode);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Code: th
Country name: Thailand
Calling code: +66

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

case "th":
    country = "Thailand";
    callingCode = 66;
    break;

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

console.log("Code:", code);
console.log("Country name:", country);
console.log("Calling code:", "+" + callingCode);

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

คำสั่ง break

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

นี่เป็นตัวอย่างการตรวจสอบนามสกุลจาก Media Type ของไฟล์ โดยใช้งานคำสั่ง switch case ในภาษา JavaScript

mimetype.js
let mime = "image/jpg";
let extension;

switch (mime) {
    case "image/gif":
        extension = ".gif";
        break;
    case "image/jpg":
    case "image/jpeg":
        extension = ".jpg"; // (1)
        break;
    case "image/png":
        extension = ".png";
        break;
}

console.log(mime + " => " + extension);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

image/jpg => .jpg

ในตัวอย่าง เราได้ประกาศตัวแปร mime สำหรับเก็บประเภทของไฟล์เอาไว้ จากนั้นส่งมันเข้าไปยังคำสั่ง switch เพื่อตรวจหานามสกุลของไฟล์จากค่าดังกล่าว

case "image/jpg":
case "image/jpeg":
    extension = ".jpg"; // (1)
    break;

สำหรับสองเคสนี้ เนื่องจากเราต้องการที่จะใช้นามสกุลไฟล์เดียวกัน ดังนั้นเราสามารถเขียนคำสั่งการทำงานไว้ที่เงื่อนไขสุดท้ายได้ นั่นจะทำให้เมื่อเงื่อนไขตรงกับ "image/jpg" โปรแกรมจะข้ามการตรวจสอบเงื่อนไขถัดมา image/jpeg และทำงานในคำสั่ง (1) จนพบกับคำสั่ง break

และจากในตัวอย่างก่อนหน้านั้น เราสามามารถนำมาเขียนด้วยคำสั่ง if else ได้ดังนี้ ซึ่งมันมีผลลัพธ์การทำงานที่เหมือนกัน

mimetype_if.js
let mime = "image/jpg";
let extension;

if (mime == "image/gif") {
    extension = ".gif";
} else if (mime == "image/jpg" || mime == "image/jpeg") {
    extension = ".jpg";
} else if (mine == "image/png") {
    extension = ".png";
}

console.log(mime + " => " + extension);

ในการใช้งานคำสั่ง if เราต้องสร้างเงื่อนไขด้วยตัวดำเนินการเปรียบเทียบ == แต่ในกรณีนี้ เนื่องจากเราต้องการเปรียบเทียบด้วยตัวดำเนินการ == ดังนั้นการใช้คำสั่ง switch case จะง่ายกว่า เพราะมันถูกออกแบบมาให้ทำเช่นนี้อยู่แล้ว

การกำหนดเงื่อนไขแบบ OR

ในการใช้งานคำสั่ง switch case เพื่อเปรียบเทียบเงื่อนไขนั้น อย่างที่เราได้บอกไปก่อนหน้าว่ามันใช้สำหรับเปรียบเทียบค่ากับละแต่ละ case โดยตรงเท่านั้น ในตัวอย่างต่อไป จะเป็นโปรแกรมเพื่อแสดงคำวิจารณ์ของภาพยนตร์จากคะแนนรีวิว 0 - 10 โดยมีเงื่อนไขดังนี้

  • คะแนนตั้งแต่ 0 - 2 แสดงคำวิจารณ์ว่า "Bad"
  • คะแนนตั้งแต่ 3 - 5 แสดงคำวิจารณ์ว่า "Fair"
  • คะแนนตั้งแต่ 6 - 8 แสดงคำวิจารณ์ว่า "Good"
  • คะแนนตั้งแต่ 9 - 10 แสดงคำวิจารณ์ว่า "Excellent"

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

movie_critics.js
let movies = [
    { name: "The Shawshank Redemption", score: 10 },
    { name: "The Dark Knight", score: 4 },
    { name: "The Matrix", score: 7 },
    { name: "Inception", score: 8.5 }
];

for (let movie of movies) {

    let critic;

    switch (movie.score) {
        case 0:
        case 1:
        case 2:
            critic = "Bad";
            break;
        case 3:
        case 4:
        case 5:
            critic = "Fair";
            break;
        case 6:
        case 7:
        case 8:
            critic = "Good";
            break;
        case 9:
        case 10:
            critic = "Excellent";
            break;
        default:
            critic = "Invalid score";
    }

    console.log("%s (%s)", movie.name, critic);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

The Shawshank Redemption (Excellent)
The Dark Knight (Good)
The Matrix (Bad)
Inception (Invalid score)

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

จะเห็นว่าหนังเรื่อง "Inception" มีคะแนนเป็น 5.5 ได้รับคำวิจารณ์เป็น "Invalid score" นั่นเป็นเพราะว่ามันไม่ตรงกับเงื่อนไขใดๆ เลย เพราะคำสั่ง switch case จะเปรียบเทียบกับค่าที่เรากำหนดในแต่ละ case เท่านั้น

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

movie_critics_if.js
let movies = [
    { name: "The Shawshank Redemption", score: 10 },
    { name: "The Dark Knight", score: 8 },
    { name: "The Matrix", score: 2 },
    { name: "Inception", score: 5.5 }
];

for (let movie of movies) {

    let critic;

    if (movie.score >= 0 && movie.score < 3) {
        critic = "Bad";
    } else if (movie.score >= 3 && movie.score < 6) {
        critic = "Fair";
    } else if (movie.score >= 6 && movie.score < 9) {
        critic = "Good";
    }  else if (movie.score >= 9 && movie.score <= 10) {
        critic = "Excellent";
    } else {
        critic = "Invalid score";
    }

    console.log("%s (%s)", movie.name, critic);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

The Shawshank Redemption (Excellent)
The Dark Knight (Fair)
The Matrix (Good)
Inception (Invalid score)

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

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