มาลองใช้ Object Literals แทน If-else-switch กันดูบ้างดีกว่า

ในบทความนี้ ผมจะมาแนะนำอีก 1 วิธีการในการสร้างเงื่อนไขต่าง ๆ ที่จะทำให้โค้ดของคุณนั้น อ่านได้ง่ายขึ้นด้วยการใช้ Object Literals เข้าช่วยในการสร้าง Conditon ต่าง ๆ ใน JavaScript จะมีเนื้อหาเป็นอย่างไรบ้างนั้น เข้ามาดูกันเลยยย !!!

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

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

function จำนวนเซลล์สมอง(สิ่งมีชีวิต) {
    if(สิ่งมีชีวิต.toLowerCase() === "มนุษย์") {
        return "ประมาณ 60 ล้านล้านเซลล์";
    }
    else if(สิ่งมีชีวิต.toLowerCase() === "สุนัข") {
        return "ประมาณ 530 ล้านเซลล์";
    }
    else if(สิ่งมีชีวิต.toLowerCase() === "แมว") {
        return "ประมาณ 250 ล้านเซลล์";
    }
    else if(สิ่งมีชีวิต.toLowerCase() === "มนุษย์ลุงข้างบ้านที่ไม่ยอมโตสักที") {
        return "84,000 เซลล์";
    }
    else {
        return "ไม่พบข้อมูลในระบบ";
    }
}

***ข้อมูลตัวอย่างดังกล่าว เป็นเพียงแค่ข้อมูลสมมุติ ไม่ได้กล่าวอ้างถึงใครทั้งสิ้น (จริง ๆ นะ มนุษย์คนไหนเล่าจะไปมีเซลล์สมองแค่ 84,000 เซลล์)***

และก็มีอีกคำสั่งหนึ่งที่สามารถใช้งานได้คล้ายกับ if-else เลย นั่นก็คือ switch-case นั่นเองงง !!!

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

function จำนวนเซลล์สมอง(สิ่งมีชีวิต) {
    switch(สิ่งมีชีวิต.toLowerCase()) {
        case "มนุษย์":
            return "ประมาณ 60 ล้านล้านเซลล์";
        case "สุนัข":
            return "ประมาณ 530 ล้านเซลล์";
        case "แมว":
            return "ประมาณ 250 ล้านเซลล์";
        case "มนุษย์ลุงข้างบ้านที่ไม่ยอมโตสักที":
            return "84,000 เซลล์";
        default:
            return "ไม่พบข้อมูลในระบบ";
    }
}

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

ซึ่งในวันนี้ผมจะมาแนะนำทุกคนให้ลองใช้อีกวิธีหนึ่งดูบ้างในการใช้ทำ Conditon ต่าง ๆ นั่นก็คือ ใช้ตัว Object Literals เข้าช่วยนั่นเอง ซึ่งถามว่าจะนำเอาเข้ามาช่วยได้อย่างไร มาดูในตัวอย่างนี้เลย

function จำนวนเซลล์สมอง(สิ่งมีชีวิต) {
    const condition = {
        "มนุษย์": "ประมาณ 60 ล้านล้านเซลล์",
        "สุนัข": "ประมาณ 530 ล้านเซลล์",
        "แมว": "ประมาณ 250 ล้านเซลล์",
        "มนุษย์ลุงข้างบ้านที่ไม่ยอมโตสักที": "84,000 เซลล์"
    };
    return condition[สิ่งมีชีวิต.toLowerCase()] ?? "ไม่พบข้อมูลในระบบ";
}

ซึ่งจากโค้ดจะเห็นได้ว่า เราทำการสร้าง object ชื่อ condition ขึ้นมา ไว้สำหรับเก็บ Key และ Value ที่จะใช้สำหรับ Return ค่ากลับ หมายความว่า ถ้า Input ที่ใส่เข้ามาใน Function จำนวนเซลล์สมอง() มีค่าตรงกับ Key ใด ๆ ที่อยู่ใน condition Object ก็จะ Return ค่า Value ของ Key นั้น ๆ ออกมาแทน

ซึ่งเครื่องหมาย “ ?? ” ในที่นี้ คือ Nullish Coalescing Operator (??) มีไว้ทำหน้าที่ Return ค่าออกมา ถ้าค่าที่อยู่ทางซ้ายของ ?? มีค่าเป็น null หรือ undefined จะทำการ Return ค่าที่อยู่ทางฝั่งขวาของ ?? และในทางกลับกัน ถ้าไม่ได้เป็น null และ undefined จะ Return ค่าที่อยู่ทางด้านซ้ายของ ?? แทน

จากในโค้ด สรุปได้ว่า ถ้าค่าที่ใส่ใน จำนวนเซลล์สมอง() นั้นไม่มีอยู่ใน condition Object ก็จะส่งกลับค่าที่อยู่ทางขวาของ ?? (“ไม่พบข้อมูลในระบบ”) แต่ถ้ามี จะ Return ค่าที่อยู่ทางซ้ายของ ?? ก็คือ Value ของ Key นั้น ๆ นั่นเอง

ทีนี้เราลองมาดูในตัวอย่างอื่นกันบ้างดีกว่า

function คำนวน(เลข1, เลข2, เครื่องหมาย) {
    const actions = {
      บวก: (n, m) => n + m,
      ลบ: (n, m) => n - m,
      คูณ: (n, m) => n * m,
      หาร: (n, m) => n / m
    };
    return actions[เครื่องหมาย]?.(เลข1, เลข2) ?? "ระบบผิดพลาด";
}

จากโค้ดข้างต้น จะสังเกตุเห็นว่า คราวนี้ Key ที่ใช้คือ เครื่องหมายที่รับค่าเข้ามา ซึ่ง Value ของแต่ละ Key คือ Function ที่รับค่า 2 ตัวเข้ามา เพื่อที่จะ Return ค่าออกมาตามวิธีคิดที่แตกต่างกันของแต่ละ Key นั่นเอง

เป็นอย่างไรบ้างครับทุกคน ในบทความนี้หวังว่าผู้อ่านทุกท่านจะได้รับความรู้และตัวเลือกเพื่มในการเลือกใช้ในการสร้าง Condition ด้วย Object Literals นะครับ