เจาะลึก Control Flow ใน JavaScript: วิธีเขียนเงื่อนไข If, Else และ Switch ให้โปรแกรมตัดสินใจได้

ทำความรู้จักกับ Control Flow หัวใจสำคัญของการตัดสินใจในโค้ด

หลังจากที่เราได้เรียนรู้วิธีการเก็บข้อมูลในตัวแปรและจัดการกับข้อมูลเหล่านั้นกันมาแล้ว ถึงเวลาที่เราจะมาเรียนรู้วิธีทำให้โปรแกรมของเรา Control Flow (การควบคุมทิศทางการทำงานของโปรแกรม) มีความฉลาดมากขึ้นกันครับ เปรียบเทียบง่ายๆ เหมือนกับเวลาเราใช้ชีวิตประจำวัน เช่น ถ้าเราอยากซื้อรองเท้าสักคู่ เราต้องดูว่าเงินในกระเป๋ามีพอไหม ถ้าพอเราก็ตัดสินใจซื้อ แต่ถ้าไม่พอเราก็ต้องเดินกลับบ้านมือเปล่า

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

การเข้าใจเรื่องนี้ถือเป็นก้าวสำคัญของคนที่อยากเป็นโปรแกรมเมอร์ เพราะนี่คือพื้นฐานของการสร้าง Logic (ตรรกะหรือเหตุผลในการทำงาน) ที่ซับซ้อนขึ้นในอนาคต หากเราควบคุมทิศทางของโปรแกรมได้แม่นยำ การเขียนโปรแกรมก็จะกลายเป็นเรื่องสนุกเหมือนการวางแผนการเดินทางที่เราเป็นคนกำหนดเส้นทางเองทั้งหมดครับ

// สมมติว่าเรามีงบประมาณสำหรับการซื้อรองเท้า
const budget = 2500;
const shoePrice = 2000;

// ตรวจสอบว่าเงินพอไหมด้วยคำสั่ง if
if (budget >= shoePrice) {
  console.log("ซื้อรองเท้าได้เลย!");
} else {
  console.log("เก็บเงินไว้ก่อนดีกว่า");
}

จากตัวอย่างโค้ดด้านบน บรรทัดที่ 2 และ 3 คือการกำหนดค่าตัวแปร ส่วนบรรทัดที่ 6 คือการใช้คำสั่ง if เพื่อเช็คเงื่อนไขว่า budget มากกว่าหรือเท่ากับ shoePrice หรือไม่ ถ้าเงื่อนไขเป็นจริง (True) โปรแกรมจะทำคำสั่งในปีกกา {} แรก แต่ถ้าเป็นเท็จ (False) โปรแกรมจะข้ามไปทำคำสั่งในส่วนของ else แทน

ผลลัพธ์ที่ได้จากการรันโค้ดนี้คือ "ซื้อรองเท้าได้เลย!" เพราะค่า 2500 มากกว่า 2000 จริงครับ

รู้จักกับ if statement ทางเลือกแรกของการตัดสินใจ

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

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

จุดที่มือใหม่มักพลาดคือการลืมใส่ปีกกา {} หรือลืมเขียนเงื่อนไขในวงเล็บให้ครบถ้วน ซึ่งจะทำให้โปรแกรมทำงานผิดพลาดหรือเกิด Syntax Error (ข้อผิดพลาดจากรูปแบบภาษาที่เขียนไม่ถูกต้อง) ได้ง่ายๆ ดังนั้นควรฝึกเขียนให้เป็นนิสัยและตรวจสอบวงเล็บทุกครั้งก่อนรันโค้ดครับ

let score = 75;

// ถ้าคะแนนมากกว่าหรือเท่ากับ 50 ให้แสดงข้อความสอบผ่าน
if (score >= 50) {
  console.log("ยินดีด้วย คุณสอบผ่านแล้ว!");
}

โค้ดชุดนี้เริ่มจากการประกาศตัวแปร score ให้มีค่าเท่ากับ 75 จากนั้นบรรทัดที่ 4 จะเช็คว่า 75 มากกว่าหรือเท่ากับ 50 หรือไม่ ถ้าเงื่อนไขเป็นจริง โค้ดในปีกกาจะถูกสั่งให้ทำงานทันที

ผลลัพธ์ที่แสดงบนหน้าจอคอนโซลคือ "ยินดีด้วย คุณสอบผ่านแล้ว!" แต่ถ้าเราเปลี่ยน score เป็น 30 โค้ดนี้จะไม่แสดงอะไรออกมาเลยครับ

ขยายขีดความสามารถด้วย if...else statement

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

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

มือใหม่ควรระวังเรื่องการใช้เครื่องหมายเปรียบเทียบให้ดี เช่น == ใช้สำหรับเช็คค่าเท่ากัน แต่ถ้าต้องการเช็คทั้ง "ค่า" และ "ชนิดข้อมูล" ให้ใช้ === (Strict Equality) จะปลอดภัยกว่าครับ การเลือกใช้เครื่องหมายที่ถูกต้องจะช่วยป้องกันบั๊กที่หาตัวจับยากในอนาคตได้เป็นอย่างดี

let userLoggedIn = false;

// ตรวจสอบสถานะการล็อกอิน
if (userLoggedIn) {
  console.log("เข้าสู่หน้าแดชบอร์ด");
} else {
  console.log("กรุณาล็อกอินก่อนใช้งาน");
}

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

ผลลัพธ์ที่ได้ในกรณีนี้คือ "กรุณาล็อกอินก่อนใช้งาน" เพราะค่าเริ่มต้นถูกกำหนดเป็น false ไว้ครับ

รับมือกับเงื่อนไขที่ซับซ้อนด้วย else if ladder

เมื่อเงื่อนไขเริ่มมีมากกว่าสองทางเลือก เช่น การตัดเกรดนักเรียนที่มีทั้ง A, B, C หรือ D เราจะใช้ else if ladder (บันไดเงื่อนไข) ซึ่งเป็นการเรียงต่อกันของหลายเงื่อนไข โปรแกรมจะไล่เช็คจากบนลงล่างไปเรื่อยๆ จนกว่าจะเจอเงื่อนไขที่เป็นจริง แล้วจึงหยุดทำงานในส่วนนั้นครับ

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

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

let marks = 85;

if (marks >= 90) {
  console.log("ได้เกรด A");
} else if (marks >= 80) {
  console.log("ได้เกรด B");
} else {
  console.log("ต้องพยายามเพิ่มนะ");
}

บรรทัดที่ 3 ตรวจสอบว่าคะแนนถึง 90 ไหม ถ้าไม่ถึง โปรแกรมจะข้ามมาบรรทัดที่ 5 เพื่อเช็คว่าถึง 80 ไหม ถ้าถึงก็จะแสดงผลเกรด B และหยุดการทำงานทันที หากไม่ถึงทั้งสองเงื่อนไข ก็จะไปจบที่ else ครับ

ผลลัพธ์ที่แสดงคือ "ได้เกรด B" เพราะ 85 เข้าเงื่อนไข marks >= 80 พอดีครับ

จัดระเบียบตัวเลือกด้วย switch statement

สำหรับกรณีที่เราต้องการเช็ค "ค่าเดียว" กับ "หลายความเป็นไปได้" การใช้ switch statement (คำสั่งเลือกกรณี) จะมีความเป็นระเบียบมากกว่า if...else หลายเท่าตัวครับ โดยเราจะนำค่าที่ต้องการตรวจสอบใส่ไว้ใน switch แล้วกำหนด case (กรณี) ต่างๆ เพื่อรอรับค่าที่ตรงกัน

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

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

let trafficLight = "yellow";

switch (trafficLight) {
  case "red":
    console.log("หยุดรถ");
    break;
  case "yellow":
    console.log("เตรียมตัวหยุด");
    break;
  case "green":
    console.log("ไปได้");
    break;
  default:
    console.log("ไฟจราจรเสีย");
}

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

ผลลัพธ์ที่ได้คือ "เตรียมตัวหยุด" ตามค่าที่กำหนดไว้ในตัวแปรครับ

สรุปบทเรียนและก้าวต่อไปของนักพัฒนา

เราได้เรียนรู้การใช้ Control Flow ทั้ง if, if...else, else if และ switch เพื่อควบคุมการตัดสินใจของโปรแกรมกันไปแล้ว ซึ่งทั้งหมดนี้คือหัวใจสำคัญในการสร้างตรรกะให้ซอฟต์แวร์ทำงานได้ตามที่มนุษย์ต้องการ ไม่ว่าจะเป็นการทำระบบล็อกอิน ระบบตัดเกรด หรือแม้แต่ระบบจัดการไฟจราจรในตัวอย่างที่ผ่านๆ มาครับ

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

จำไว้ว่าการเขียนโปรแกรมไม่ใช่แค่การพิมพ์ตามตัวอย่าง แต่คือการคิดเชิงตรรกะเพื่อแก้ปัญหา เมื่อไหร่ที่ต้องตัดสินใจในโค้ด ให้ลองวาด Flowchart (แผนภาพแสดงขั้นตอนการทำงาน) ในกระดาษก่อน แล้วค่อยลงมือเขียนโค้ด จะช่วยให้เราเห็นภาพชัดเจนและลดข้อผิดพลาดได้มหาศาลครับ ขอให้สนุกกับการเขียนโค้ดและพัฒนาตัวเองต่อไปในเส้นทางสายโปรแกรมเมอร์นี้นะครับ

ที่มา: Control Flow in JavaScript: If, Else, and Switch Explained — DEV Community