คำสั่ง if else ในภาษา TypeScript

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

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

คำสั่ง if

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

if (condition) {
    // statements
}

ในรูปแบบการใช้งาน condition เป็นการกำหนดเงื่อนไขสำหรับทำงานเมื่อเงื่อนไขเป็นจริง (true) ในกรณีที่เงื่อนไขไม่เป็นจริง (false) การทำงานจะถูกข้ามไป ภายในบล็อคของคำสั่ง if {} เป็นการกำหนดคำสั่งสำหรับทำงานที่อาจจะประกอบไปด้วยหนึ่งหรือหลายคำสั่ง

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

let n: number = 5;
if (n == 5) {
    console.log("n is five.");
}

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

n is five.

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

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

let fuel: number = 85;
if (fuel <= 0) {
    console.log("Out of fuel.");
}
console.log(`Fuel level: ${fuel}%`);

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

Fuel level: 85%

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

คำสั่ง if else

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

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

let name: string = "Marcus";
if (name == "John") {
    console.log("Hi John!");
} else {
    console.log("You are not John.");
}

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

You are not John.

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

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

let myNumber: number = 5;
if (myNumber % 2 == 0) {
    console.log(`${myNumber} is even number.`);
} else {
    console.log(`${myNumber} is odd number.`);
}

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

5 is odd number.

ในการใช้งานคำสั่ง if else เราสามารถเขียนโปรแกรมเพื่อตรวจสอบได้ว่าตัวเลขเป็นจำนวนคี่หรือจำนวนคู่ โดยการกำหนดเงื่อนไขเป็น myNumber % 2 == 0 นี่เป็นการหารแบบเอาเศษด้วย 2 ถ้าหากเศษเป็นศูนย์หมายความว่าตัวเลขเป็นจำนวนคู่ ไม่เช่นนั้นจะเป็นจำนวนคี่

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

let username: string = "metin";
let password: string = "1234";
if (username == "metin" && password == "secret") {
    console.log("Login successfully.");
} else {
    console.log("Invalid username or password.");
}

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

Invalid username or password.

ในตัวอย่างนี้ เราได้ใช้ตัวดำเนินการตรรกศาสตร์ AND (&&) เพื่อเชื่อมเงื่อนไขย่อยทั้งสองเข้าด้วยกัน นั่นหมายความว่าชื่อผู้ใช้จะต้องเป็น metin และรหัสผ่านจะต้องเป็น secret ในการที่จะทำให้เงื่อนไขสุดท้ายเป็นจริง และในกรณีนี้โปรแกรมทำงานในบล็อคของคำสั่ง else เนื่องจากเงื่ีอนไขไม่เป็นจริง

let password: string = "secret";

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

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

คำสั่ง if else-if

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

if (condition1) {
    // statements
} else if (condition2) {
    // statements
} else if (condition3) {
    // statements 
} else {
    // statements
}

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

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

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

let a: number = 5;
let b: number = 3;

if (a < b) {
    console.log("a is less than b");
} else if (a > b) {
    console.log("a is greater than b.");
} else {
    console.log("a and b are equal.");
}

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

a is greater than b.

ในตัวอย่างนี้ เป็นโปรแกรมเปรียบเทียบค่าในตัวแปร a และ b ซึ่งสามารถบอกได้ว่ามันน้อยกว่า มากกว่า หรือเท่ากัน จะเห็นว่าทางเลือกที่เป็นไปได้ของโปรแกรมมีสามทาง ในตอนแรกตรวจสอบถ้าหากค่าในตัวแปร a น้อยกว่า b

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

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

let score: number = 37;

console.log(`Your score is ${score}.`);
console.log("Let's see which grade you'd get.");

if (score >= 80 && score <= 100) {
    console.log("Your grade is A.");
} else if (score >= 70 && score < 80) {
    console.log("Your grade is B.");
} else if (score >= 60 && score < 70) {
    console.log("Your grade is C.");
} else if (score >= 50 && score < 60) {
    console.log("Your grade is D.");
} else {
    console.log("Your grade is F.");
}

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

Your score is 75.
Let's see which grade you'd get.
Your grade is B.

Your score is 37.
Let's see which grade you'd get.
Your grade is F.

ในตัวอย่างนี้ เป็นโปรแกรมคำนวณเกรดจากคะแนนที่มีโดยเกรดที่เป็นไปได้คือ A, B, C, D และ F ซึ่งเป็นระบบการคิดเกรดมาตรฐาน และสิ่งที่เราเห็นชัดเจนก็คือทางเลือกที่เป็นไปได้สำหรับโปรแกรมนี้มี 5 ทางเลือก

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

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

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

จากโปรแกรมคำนวณเกรดในตัวอย่างที่ผ่านมา มันยังสามารถปรับปรุงให้ดีขึ้นกว่านี้ได้ ยกตัวอย่างเช่น ก่อนการคำนวณเราสามารถตรวจสอบได้ว่าค่าของคะแนนอยู่ในช่วงที่ถูกต้องหรือไม่ โดยคะแนนต้องมีค่าระหว่าง 0-100 เท่านั้น ไม่เช่นนั้นโปรแกรมจะปฏิเสธการทำงาน เรามาเขียนโปรแกรมเพื่อทำเช่นนั้นกัน

let score: number = 85;

console.log(`Your score is ${score}.`);

if (score >= 0 && score <= 100) {
    console.log("Let's see which grade you'd get.");

    if (score >= 80 && score <= 100) {
        console.log("Your grade is A.");
    } else if (score >= 70 && score < 80) {
        console.log("Your grade is B.");
    } else if (score >= 60 && score < 70) {
        console.log("Your grade is C.");
    } else if (score >= 50 && score < 60) {
        console.log("Your grade is D.");
    } else {
        console.log("Your grade is F.");
    }
} else {
    console.log("A score must be between 0-100 to calculate for grade.");
}

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

Your score is 85.
Let's see which grade you'd get.
Your grade is A.

และนี่ผลเป็นลัพธ์ที่เรารันโปรแกรมอีกครั้ง โดยการเปลี่ยค่าในตัวแปร score เป็น 120

Your score is 120.
A score must be between 0-100 to calculate for grade.

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

if (score >= 0 && score <= 100) {
    // calculate for grade
} else {
    // notify for invalid scores
}

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

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

Ternary operator

Ternary operator หรือ Conditional operator เป็นตัวดำเนินการกำหนดเงื่อนไขที่ส่งค่ากลับจากหนึ่งในสองค่าจากเงื่อนไขที่กำหนด นี่เป็นรูปแบบการใช้งานตัวดำเนินการ Ternary ในภาษา TypeScript

let result: any = condition ? expression1 : expresion2; 

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

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

let n: number = 5;
let result: string = n % 2 == 1 ? "odd" : "even";

console.log(`${n} is ${result} number.`);

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

5 is odd number.

เราได้ประกาศตัวแปร n ที่เก็บตัวเลขจำนวนเต็มเอาไว้ จากนั้นใช้ตัวดำเนินการ Ternary ตรวจสอบจากเงื่อนไข n % 2 == 1 เนื่องจากนี่ทำให้เงื่อนไขเป็นจริง ดังนั้นค่าที่ส่งกลับจากการทำงานของตัวดำเนินการคือ "odd" และถูกนำมาแสดงผลออกทางหน้าจอ

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

let n: number = 5;
let result: string;

if (n % 2 == 1) {
    result = "odd";
} else {
    result = "even";
}

console.log(`${n} is ${result} number.`);

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

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