บทความ IT เจ๋งๆ
วิธีทำให้ Conditional Statements ใน JavaScript อ่านง่ายขึ้น
06-ธ.ค.-19
คัมภีร์เทพ IT
หนึ่งใน Tools ที่ทรงพลังที่สุดที่ทุก Programming Language มีก็คือ ความสามารถในการ Run Code ที่เป็น Conditionals ซึ่งใน JavaScript (เช่นเดียวกับในภาษาอื่น ๆ) สิ่งนี้ถูกเรียกว่า Conditionals โดยมีอยู่ 3 ประเภทคือ If/Else Blocks, Switch Statements และ Conditional Expressions วันนี้เราดูวิธีทำให้ Conditional Statements ใน JavaScript อ่านง่ายขึ้นกัน
Conditionals ที่ผิดพลาด สามารถนำไปสู่ Code ที่มีความซับซ้อนมาก ทำให้ยากต่อการติดตามและยากที่จะ Maintain แต่หากคุณทำตามหลักการที่เหมาะสมและถูกต้อง คุณจะได้รับประโยชน์จากการใช้ Conditionals เหล่านี้ได้อย่างมาก
พื้นฐานของ JavaScript Conditionals
อย่างที่ได้กล่าวไปแล้วว่า JavaScript มี Conditionals หลัก ๆ อยู่ 3 ประเภท อย่างแรกก็คือ If/Else Blocks ซึ่งพื้นฐานของ If Statement เป็นอะไรที่เรียบง่ายมากคือ หากเงื่อนไขเป็นจริง(True) แล้ว Code Block ก็จะถูกเรียกใช้ ดังตัวอย่าง:
ใน If Block เอง ก็ยังสามารถสร้างได้อีก 2 Code Block ภายใต้เงื่อนไขเดียวกัน โดยการเพิ่ม Else เข้าไป ดังนี้:
นอกจากนี้ คุณยังสามารถเพิ่มเงื่อนไขอื่น ๆ เพิ่มเติม โดยใช้ Else/If ดังด้านล่างนี้:
แต่สำหรับ Switch Statement จะทำอีกอย่างหนึ่ง คือ จะทำการตรวจสอบค่าของ Expression กับแต่ละ Case หากไม่ตรงกับ Case ใด ๆ คุณยังสามารถระบุ Default Case ได้
หลักการทำงานที่สำคัญของ Switch Statements ก็คือ หากคุณไม่ทำการ Break หรือ Return ใน Case Statement มันจะยังคง Execute Code ใน Case Statements อื่น ๆ ที่เหลือด้วย ตัวอย่างเช่น:
สำหรับ Conditionals ประเภทสุดท้ายก็คือ Conditional Expressions ซึ่งสิ่งเหล่านี้ถูกเรียกว่า Expressions มันไม่เหมือนกับ If Blocks และ Switch Statements ซึ่ง Expressions จะ Evaluate ค่าและสามารถถูกนำไปใช้ได้ทุกที่ที่จะใช้หรือถูก Assign หนึ่งในสิ่งที่คุ้นเคยมากที่สุดน่าจะเป็น Ternary นั่นเอง โดย Ternary จะแสดงในรูปแบบ เงื่อนไข ตามมาด้วยเครื่องหมาย “?” จากนั้นจะเป็น ค่าในกรณีเงื่อนไขเป็นจริง และ ค่าในกรณีเงื่อนไขเป็นเท็จ ซึ่งถูกคั่นด้วยเครื่องหมาย “:” ดังแสดงในตัวอย่าง:
เนื่องจาก Ternary จะทำการ Evaluate ค่า คุณสามารถใช้ Ternary ซ้อนอยู่ภายใน Ternary ได้ (แม้ว่าคุณควรหลีกเลี่ยงการทำเช่นนี้ก็ตาม) :
ส่วน Conditional Expressions ในรูปแบบอื่น ๆ ถูกเรียกว่า Logical Assignment ซึ่ง Logical Assignment จะใช้ Logical Operators ของ JavaScript คือ && และ || เพื่อสร้าง Assignment ค่า Truthy และ Falsy ตั้งแต่ 2 ค่าขึ้นไป คุณสามารถดูรายละเอียดเพิ่มเติมเกี่ยวกับ Truthy และ Falsy ได้ที่นี่
Assignments ที่ใช้ “&&” จะมองหาค่า Falsy ตัวแรกหรือค่าสุดท้ายใน Chain หรือไม่ว่าจะเจอตัวใดก่อนก็ตาม ส่วน Assignments ที่ใช้ “||” จะมองหาค่า Truthy ตัวแรกหรือค่าสุดท้ายใน Chain หรือไม่ว่าจะเจอตัวใดก่อนก็ตาม ลองดูจากตัวอย่าง:
คุณสามารถเชื่อมโยง และผสมผสาน และจับคู่กับ Operators ได้มากเท่าที่คุณต้องการ แต่มันน่าจะดีกว่าที่จะ Evaluate ค่าเพียง 2 ค่า หรือไม่เกิน 3 ค่า
Best Practices ของการใช้ Conditionals
Conditionals อาจเป็นได้ทั้ง Tool ที่มีประสิทธิภาพและขณะเดียวกันก็เป็นอุปสรคในการทำงานของคุณได้เช่นกัน ดังนั้นหากคุณรู้หลักการบางอย่างที่คุณควรทำตามเพื่อป้องกันไม่ให้ Conditionals ของคุณกลายเป็น Code ที่เขียนขึ้นอย่างไร้ตรรกะ
1. อย่าใช้ If Block ในการ Assign ค่าที่เป็นเงื่อนไข
คุณสามารถใช้รูปแบบนี้แทน:
2. ควรหลีกเลี่ยงการใช้ If Block แบบซ้อน ๆ กัน (Nested), ซึ่ง Else/If เป็น Nested If Block ในทางเทคนิค เรามักคิดว่า เรากำลังเขียนแบบนี้:
และนี่คือสิ่งที่เราเขียนจริง ๆ
เมื่อใดก็ตามที่เรามี Nested If Statement หากมีโอกาสคุณก็ควรปรับปรุง Logic เสียใหม่ และพยายามที่จะไม่ใช้การกระทำที่ซ้อนกันไปเรื่อย ๆ โดยจากด้านบน เราสามารถเขียนได้ใหม่เป็น:
คุณจะเห็นว่า อันที่จริง Logic ในตัวอย่างล่าสุดที่ถูกปรับปรุงใหม่ ก็เหมือนกับตัวอย่างก่อน ๆ เพียงแต่มันดูง่ายและเข้าใจง่ายกว่าตัวอย่างก่อน ๆ มาก
3. Switch Statement ไม่ได้เป็นสิ่งที่แย่มากนัก แม้บางครั้งมันอาจมีชื่อเสียงในด้านข้อจำกัดต่าง ๆ แต่มันก็ทำให้ Code ของเรา Clean จาก Code ที่ถูก Refactor ในข้อที่แล้ว หากเรานำมาเขียนโดยใช้ Switch Statement จะได้ดังในตัวอย่างนี้
มีบางคนกล่าวว่า Switch Statement ไม่เป็นไปตาม Open/Closed Principle ของ Object-Oriented Programming อันที่จริงมันไม่ละเมิด Principle ดังกล่าวแต่อย่างใด แต่มันเกิดจากวิธีการใช้งานของคุณมากกว่า ถ้า Switch Statement ทำให้ Code สามารถอ่านได้ง่ายและ Maintain ได้เป็นอย่างดี เราก็ไม่ควรเลิกใช้งานมันเพียงเพราะมีคนบอกว่าพวกมันไม่ดี
4. Else Statements มีแนวโน้มที่จะเพิ่มความยุ่งยากโดยไม่จำเป็นให้กับ Code Logic ของคุณ มี Developer คนหนึ่งชื่อ Kyle Shevlin ได้ Post สิ่งนี้:
Conditionals เป็นเครื่องมือที่ทรงพลังในการเขียน Code เช่นเดียวกันกับมีดที่คม หากคุณใช้งานมันผิดวิธี ก็อาจทำให้คุณได้รับบาดเจ็บได้ พยายามใช้มันอย่างถูกวิธี แล้วมันจะช่วยให้คุณสามารถเขียน Code ที่น่าอัศจรรย์เพื่อแก้ไขปัญหาได้
ที่มา: https://medium.com/
ดูตำแหน่งงานที่ใช้ทักษะ JavaScript ได้ที่นี่
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด