Article · programming

JavaScript: เงื่อนไขและการตัดสินใจ

JavaScript

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

EP5: ทำให้โปรแกรมตัดสินใจได้ด้วยเงื่อนไข

ในบทก่อนหน้า เราได้เรียนรู้ตัวแปร ชนิดข้อมูล และตัวดำเนินการใน JavaScript มาแล้ว ขั้นต่อไปคือการทำให้โปรแกรมเลือกทำสิ่งต่าง ๆ ได้ตามสถานการณ์จริง เช่น ตรวจสอบว่าคะแนนสอบผ่านหรือไม่ พิจารณาว่าสินค้าควรได้รับส่วนลดหรือไม่ หรือแสดงข้อความตามอายุของผู้ใช้งาน เครื่องมือสำคัญที่ใช้ทำสิ่งเหล่านี้คือคำสั่งเงื่อนไข (Conditional Statements)

หน้าจอแสดงโค้ดโปรแกรมบนคอมพิวเตอร์ — การเขียนโปรแกรมด้วย JavaScript เพื่อกำหนดเงื่อนไขและควบคุมการทำงาน

1. คำสั่ง if คืออะไร

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

const score = 75;

if (score >= 50) {
    console.log('สอบผ่าน');
}

// ผลลัพธ์: สอบผ่าน

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

2. ใช้ if และ else เมื่อต้องเลือกสองทาง

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

const score = 42;

if (score >= 50) {
    console.log('สอบผ่าน');
} else {
    console.log('สอบไม่ผ่าน');
}

// ผลลัพธ์: สอบไม่ผ่าน

ลองเปลี่ยนค่า `score` จาก `42` เป็น `80` แล้วสังเกตผลลัพธ์ โปรแกรมจะเปลี่ยนไปแสดงข้อความสอบผ่านโดยไม่ต้องแก้ไขโครงสร้างเงื่อนไข

3. ใช้ else if เมื่อต้องตรวจสอบหลายระดับ

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

const score = 82;
let grade;

if (score >= 80) {
    grade = 'A';
} else if (score >= 70) {
    grade = 'B';
} else if (score >= 60) {
    grade = 'C';
} else if (score >= 50) {
    grade = 'D';
} else {
    grade = 'F';
}

console.log(`คะแนน ${score} ได้เกรด ${grade}`);

// ผลลัพธ์: คะแนน 82 ได้เกรด A

ระวังลำดับเงื่อนไขตรวจสอบเงื่อนไขจากกรณีที่มีเกณฑ์สูงกว่าลงมาหาเกณฑ์ต่ำกว่าในตัวอย่างนี้ หากนำ `score >= 50` ไปไว้บนสุด คะแนนตั้งแต่ 50 ขึ้นไปจะเข้าเงื่อนไขแรกทันที ทำให้ไม่สามารถแยกระดับเกรดที่สูงกว่าได้

4. ตัวดำเนินการเปรียบเทียบที่ควรรู้

เงื่อนไขใน JavaScript มักใช้ตัวดำเนินการเปรียบเทียบเพื่อให้ได้ผลลัพธ์เป็นค่าบูลีน (`true` หรือ `false`) ตัวดำเนินการแต่ละตัวมีความหมายแตกต่างกัน จึงควรเลือกใช้ให้ตรงกับสิ่งที่ต้องการตรวจสอบ

ตัวดำเนินการ	ความหมาย	ตัวอย่าง	ผลลัพธ์
===	เท่ากันทั้งค่าและชนิดข้อมูล	5 === 5	true
!==	ไม่เท่ากันทั้งค่าและชนิดข้อมูล	5 !== '5'	true
>	มากกว่า	10 > 5	true
<	น้อยกว่า	3 < 2	false
>=	มากกว่าหรือเท่ากับ	50 >= 50	true
<=	น้อยกว่าหรือเท่ากับ	40 <= 30	false

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

5. รวมหลายเงื่อนไขด้วย && และ ||

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

const age = 20;
const hasTicket = true;
const isMember = false;

if (age >= 18 && hasTicket) {
    console.log('สามารถเข้าชมได้');
}

if (isMember || hasTicket) {
    console.log('มีสิทธิ์รับการตรวจสอบสิทธิ์');
}

// ผลลัพธ์:
// สามารถเข้าชมได้
// มีสิทธิ์รับการตรวจสอบสิทธิ์

ตัวดำเนินการ	ความหมาย	ตัวอย่าง	ผลลัพธ์
&&	ทั้งสองเงื่อนไขเป็นจริง	true && true	true
&&	มีอย่างน้อยหนึ่งเงื่อนไขเป็นเท็จ	true && false	false
\|\|	มีอย่างน้อยหนึ่งเงื่อนไขเป็นจริง	false \|\| true	true
\|\|	ทั้งสองเงื่อนไขเป็นเท็จ	false \|\| false	false
!	กลับค่าความจริง	!true	false

6. ตัวอย่างใช้งานจริง: ตรวจสอบส่วนลดสินค้า

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

const orderTotal = 1200;
const isMember = true;
let discountRate = 0;

if (isMember && orderTotal >= 1000) {
    discountRate = 0.10;
} else if (orderTotal >= 2000) {
    discountRate = 0.05;
}

const discount = orderTotal * discountRate;
const finalTotal = orderTotal - discount;

console.log(`ยอดก่อนลด: ${orderTotal} บาท`);
console.log(`ส่วนลด: ${discount} บาท`);
console.log(`ยอดชำระ: ${finalTotal} บาท`);

// ผลลัพธ์:
// ยอดก่อนลด: 1200 บาท
// ส่วนลด: 120 บาท
// ยอดชำระ: 1080 บาท

จากตัวอย่าง สมาชิกที่ซื้อสินค้าตั้งแต่ 1,000 บาทขึ้นไปจะได้รับส่วนลด 10% ส่วนลูกค้าที่ไม่เข้าเงื่อนไขสมาชิกจะได้รับส่วนลด 5% เมื่อยอดซื้อถึง 2,000 บาทขึ้นไป การเรียงเงื่อนไขจึงต้องสอดคล้องกับนโยบายส่วนลดที่ระบบต้องการ

7. ข้อผิดพลาดที่มือใหม่มักพบ

ข้อผิดพลาด	ตัวอย่าง	วิธีแก้
ใช้ = แทนการเปรียบเทียบ	if (score = 50)	ใช้ === เพื่อเปรียบเทียบค่าที่เท่ากัน
ลืมวงเล็บปีกกา	if (score >= 50) console.log('ผ่าน')	ควรใช้ {} เพื่อให้โครงสร้างอ่านง่ายและลดความผิดพลาด
เรียงเงื่อนไขผิด	ตรวจ score >= 50 ก่อน score >= 80	จัดลำดับเงื่อนไขให้กรณีเฉพาะหรือเกณฑ์สูงได้รับการตรวจสอบก่อน
สับสนระหว่าง && และ \|\|	ใช้ \|\| ทั้งที่ต้องผ่านทุกข้อ	ใช้ && เมื่อทุกเงื่อนไขจำเป็นต้องเป็นจริง

หมายเหตุ: เครื่องหมาย `=` ใช้กำหนดค่าให้ตัวแปร ไม่ใช่ตัวดำเนินการเปรียบเทียบ การเขียน `if (score = 50)` อาจเปลี่ยนค่าของตัวแปรและทำให้โปรแกรมทำงานผิดจากที่ตั้งใจ ส่วนการละวงเล็บปีกกาอาจทำได้ในกรณีคำสั่งเดียว แต่การใช้วงเล็บปีกกาสม่ำเสมอช่วยให้โค้ดชัดเจนกว่า

8. ฝึกคิดก่อนลงมือเขียนโค้ด

ลองพิจารณาโจทย์ต่อไปนี้ก่อนดูเฉลย เป้าหมายคือฝึกแปลงกฎทางธุรกิจให้เป็นเงื่อนไขที่ชัดเจน ไม่ใช่เพียงจดจำรูปแบบคำสั่ง

โจทย์ที่ 1: ตรวจสอบอายุ

กำหนดให้ age = 16 และตรวจสอบด้วย if (age >= 18) หากไม่ผ่านเงื่อนไข โปรแกรมควรแสดงข้อความใด? เฉลย: หากมี else แสดงข้อความในบล็อก else เพราะ 16 น้อยกว่า 18

โจทย์ที่ 2: ตรวจสอบคะแนน

กำหนดคะแนนเป็น 70 และใช้ if (score >= 80) { ... } else if (score >= 70) { ... } else { ... } โปรแกรมจะเข้าสู่เงื่อนไขใด? เฉลย: เงื่อนไข else if (score >= 70) เพราะเงื่อนไขแรกเป็นเท็จ แต่เงื่อนไขที่สองเป็นจริง

โจทย์ที่ 3: ใช้ตัวดำเนินการตรรกะ

ถ้า hasAccount เป็น true แต่ hasPassword เป็น false นิพจน์ hasAccount && hasPassword ให้ผลลัพธ์อย่างไร? เฉลย: false เพราะ && ต้องการให้ทั้งสองเงื่อนไขเป็นจริง

9. สรุปสิ่งที่ได้เรียนรู้

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

โปรแกรมที่ดีไม่ได้เพียงคำนวณคำตอบ แต่ต้องรู้ด้วยว่าควรทำอะไรเมื่อสถานการณ์เปลี่ยนไป

10. แบบฝึกหัดท้ายบท

เขียนโปรแกรม JavaScript เพื่อรับค่าคะแนนที่กำหนดไว้ในตัวแปร `score` แล้วแสดงผลตามเกณฑ์ต่อไปนี้: คะแนนตั้งแต่ 80 ขึ้นไปได้ A, ตั้งแต่ 70 ถึงน้อยกว่า 80 ได้ B, ตั้งแต่ 60 ถึงน้อยกว่า 70 ได้ C, ตั้งแต่ 50 ถึงน้อยกว่า 60 ได้ D และต่ำกว่า 50 ได้ F จากนั้นทดลองเปลี่ยนคะแนนเป็น 95, 75, 65, 55 และ 35 เพื่อตรวจสอบว่าผลลัพธ์ถูกต้องทุกกรณี

const score = 75;
let grade;

if (score >= 80) {
    grade = 'A';
} else if (score >= 70) {
    grade = 'B';
} else if (score >= 60) {
    grade = 'C';
} else if (score >= 50) {
    grade = 'D';
} else {
    grade = 'F';
}

console.log(`คะแนน ${score} ได้เกรด ${grade}`);

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

Reach within 500px of the page end and stay for at least 5 minutes to earn EXP once per day.

⏳ Reading timer is running...