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

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

• คำสั่ง if
• คำสั่ง if else
• คำสั่ง else-if
• คำสั่ง if แบบซ้อนกัน
• Ternary operator

คำสั่ง if

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

if (condition) {
    // Statements 
}

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

let n = 5;
if (n == 5) {
    console.log("n is equal to 5.");
}

let name = "Metin";
if (name.length < 3) {
    console.log("Name is too short.");
}

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

n is equal to 5.

ในตัวอย่าง เป็นการใช้งานคำสั่ง if เพื่อตรวจสอบว่าค่าในตัวแปร n เท่ากับ 5 หรือไม่ เนื่องจากค่าในตัวแปรนั้นเท่ากับ 5 ดังนั้นโค้ดในบล็อคของคำสั่ง if ทำงาน และแสดงข้อความออกทางหน้าจอ

จากนั้นเป็นการตรวจสอบความยาวของชื่อในตัวแปร name ว่าน้อยกว่า 3 ตัวอักษรหรือไม่ โดยรับความยาวของ String จาก Property length; เนื่องจาก "Metin" นั้นมีความยาว 5 ตัวอักษร นั่นทำให้เงื่อนไขไม่เป็นจริง และโปรแกรมข้ามการทำงานบล็อคคำสั่ง if นี้ไป

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

let gold = 8;
let stone = 15;

if (gold >= 5 && stone >= 10) {
    console.log("Your house has been created.");
    gold -= 5;
    stone -= 10;
}

console.log("You have %d gold and %d stones left.", gold, stone);

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

Your house has been created.
You have 3 gold and 5 stones left.

เนื่องจากค่าที่เก็บในตัวแปร gold และ stone ทำให้เงื่อนไข gold >= 5 && stone >= 10 เป็นจริง ดังนั้นโปรแกรมทำงานในบล็อคของคำสั่ง if และแสดงข้อความบอกว่าการสร้างบ้านสำเร็จ และได้หักลบทองและหินที่ใช้แล้วออกไป

console.log("You have %d gold and %d stones left.", gold, stone);

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

คำสั่ง if else

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

if (condition) {
    // Statements 
} else {
   // Statements  
}

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

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

let n = 13;

if (n % 2 == 0) {
    console.log("%d is even number.", n);
} else {
    console.log("%d is odd number.", n);
}

if (n > 0) {
    console.log("%d is positive number.", n);
} else {
    console.log("%d is not positive number.", n);
}

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

13 is odd number.
13 is positive number.

ในการตรวจสอบเงื่อนไขแรก เนื่องจากว่า n % 2 นั้นมีค่าไม่เท่ากับ 0 ซึ่งทำให้เงื่อนไขไม่เป็นจริง ดังนั้นโปรแกรมทำในบล็อคของคำสั่ง else แสดงข้อความบอกว่าตัวเลขเป็นจำนวนคี่ จากนั้นเป็นการตรวจสอบว่าตัวเลขเป็นจำนวนเต็มบวกหรือไม่ n > 0 เนื่องจากนี่ทำให้เงื่อนไขเป็นจริง ดังนั้นโปรแกรมทำงานในบล็อคของคำสั่ง if

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

let username = "metin";
let password = "1234";

if (username == "metin" && password == "1234") {
    console.log("Logged in as %s.", username);
} else {
    console.log("Invalid username or password.");
}

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

Logged in as metin.

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

let username = "metin";
let password = "1234";

ตอนนี้ให้คุณลองเปลี่ยนค่า username หรือ password เป็นอย่างอื่น โปรแกรมควรจะทำงานในบล็อคคำสั่ง else และแจ้งว่าชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง

คำสั่ง else-if

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

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

if (condition1) {
    // Statements
} else if (condition2) {
    // Statements
} else if (condition3) {
    // Statements
} else if (conditionN) {
    // Statements
} else {
    // Statements
}

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

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

let n = -5;

if (n > 0) {
    console.log("%d is positive number.", n);
} else if (n < 0) {
    console.log("%d is negative number.", n);
} else {
    console.log("%d is zero number.", n); 
}

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

-5 is negative number.

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

ตัวอย่างต่อไปสำหรับการใช้งานคำสั่ง else if เป็นโปรแกรมสำหรับรายงานสภาพอากาศจากค่าอุณหภูมิปัจจุบัน นี่เป็นตัวอย่าง

let temperature = 15;

console.log("Current temperature is %d Celsius.", temperature);

if (temperature <= 0) {
    console.log("It's freezing outside.");
} else if (temperature <= 10) {
    console.log("Cold, takes some cloth.");
} else if (temperature <= 20) {
    console.log("Warm, good for picnic.");
} else {
    console.log("Hot, don't go outside.");
}

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

Current temperature is 15 Celsius.
Warm, good for picnic.

เนื่องจากค่าอุณหภูมิในตัวแปร temperature นั้นทำให้เงื่อนไขที่สาม temperature <= 20 เป็นจริง ดังนั้นโปรแกรมบอกว่าอากาศอบอุ่นและแนะนำให้คุณออกไปปิกนิกนอกบ้านได้ คุณสามารถเปลี่ยนค่าอุณหภูมิเพื่อดูผลลัพธ์ในเงื่อนไขอื่นๆ ได้

คำสั่ง if แบบซ้อนกัน

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

let students = [
    { name: "Metin", score: 83 },
    { name: "Chistop", score: 62 },
    { name: "John", score: 120 },
    { name: "Leon", score: -2 }
];

for (let student of students) {

    if (student.score >= 0 && student.score <= 100) {

        let grade;
        if (student.score >= 80) {
            grade = "A";
        } else if (student.score >= 70) {
            grade = "B";
        } else if (student.score >= 60) {
            grade = "C";
        } else if (student.score >= 50) {
            grade = "D";
        } else {
            grade = "F";
        }
        console.log("%s got grade %s.", student.name, grade);
    } else {
        console.log("%s has invalid score.", student.name);
    }
}

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

Metin got grade A.
Chistop got grade D.
John has invalid score.
Leon has invalid score.

ในตัวอย่างเป็นการแสดงวิธีการใช้คำสั่ง if else แบบซ้อนกันในภาษา JavaScript

let students = [
    { name: "Metin", score: 83 },
    { name: "Chistop", score: 62 },
    { name: "John", score: 120 },
    { name: "Leon", score: -2 }
];

for (let student of students) {
    ...

เราได้เตรียมข้อมูลของนักเรียนเก็บไว้ในอาเรย์ students ซึึ่งตัวแปรนี้เก็บออบเจ็คของนักเรียนแต่ละคนที่ประกอบไปด้วยชื่อและคะแนน จากนั้นเราใช้คำสั่ง for of เพื่อวนออบเจ็คของนักเรียนแต่ละคนเพื่อเอาคะแนนมาคำนวณเกรด

if (student.score >= 0 && student.score <= 100) {
    ...
} else {
    console.log("%s has invalid score.", student.name);
}

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

let grade;
if (student.score >= 80) {
    grade = "A";
} else if (student.score >= 70) {
    grade = "B";
} else if (student.score >= 60) {
    grade = "C";
} else if (student.score >= 50) {
    grade = "D";
} else {
    grade = "F";
}
console.log("%s got grade %s.", student.name, grade);

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

Ternary operator

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

let returnedValue = condition ? value1 : value2;

ถ้าหากเงื่อนไข condition เป็นจริงผลลัพธ์ที่ได้จะเป็น value1 ไม่เช่นนั้นจะเป็น value2 แทน โดยที่ value1 และ value2 นั้นสามารถเป็น Literal หรือ Expression ใดๆ ก็ได้ นี่เป็นตัวอย่างการใช้งาน

console.log("Is 3 less than 5?");
let answer = 3 < 5 ? "Yes": "No";
console.log("Answer: " + answer);

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

Is 3 less than 5?
Answer: Yes

ในตัวอย่าง เป็นการใช้งานตัวดำเนินการ Ternary เพื่อตรวจสอบว่า 3 น้อยกว่า 5 หรือไม่ เนื่องจากเงื่อนไขดังกล่าวเป็นจริง ดังนั้นคำตอบที่ได้จึงเป็นค่าแรก "Yes"

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

console.log("Is 3 less than 5?");
if (3 < 5) {
    console.log("Answer: Yes");
} else {
    console.log("Answer: No");
}

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

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