บทความ IT เจ๋งๆ

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

คำสั่งเกี่ยวกับ Conditionals ถือเป็นสิ่งที่สำคัญของ Syntax สำหรับทุก Programming Language หากคุณเคยได้เขียน Program ในภาษาใดๆ มาบ้างแล้ว คุณคงเคยคุ้นเคยกับ Conditional Statements อย่าง if..elif..else หรือ switch มาบ้างแล้ว ซึ่งมันมีประโยชน์ในกรณีที่ต้องเราใช้เงื่อนไขในการตัดสินใจเพื่อทำอะไรสักอย่างใน Program นอกจากนี้ในบทความนี้จะกล่าวถึง Conditional Expressions (ใช้ Logical Operators) ใน JavaScript และวิธีที่จะนำมาใช้เพื่อทำให้ Code ของคุณ Clean มากขึ้นกว่า Conditional Statements อีกด้วย

Expressions vs Statements

ก่อนอื่น เราต้องมาทำความเข้าใจความแตกต่างของ Expressions และ Statements ใน JavaScript กันก่อน: Expression คือ นิพจน์ที่เป็นส่วนของเงื่อนไข ส่วน Statement คือ ชุดคำสั่ง นั่นเอง

Expression เป็นนิพจน์หรือวลี ที่ JavaScript engine สามารถ evaluate เพื่อสร้าง value ได้

ตัวอย่างของ Expression: literals, assignments, function expressions, logical, bitwise or arithmetic operations, object property access, function invocations, eval เป็นต้น

ด้านล่างนี้เป็นตัวอย่างของ code snippet ที่แสดงถึง JavaScript expressions:

Statement เป็นประโยคคำสั่ง ที่ JavaScript engine สามารถ execute เพื่อสั่งให้ทำอะไร หรือทำให้เกิด side effect บางอย่างได้

ตัวอย่างของ Statement: conditionals, variable หรือ function declarations, loops, throw, return, try/catch/finally เป็นต้น

บาง JavaScript expressions อย่าง assignments และ function invocations อาจมี side-effect และผลที่ได้จะสามารถใช้เป็นคำสั่งได้ (expression statements)

Conditions และ Booleans

ส่วนที่สำคัญของ Requirement มักอยู่ในส่วนของ condition เนื่องจากมันจะเป็นตัวตัดสินใจว่าจะให้ Program ทำอย่างไรต่อไป

สำหรับใน JavaScript นั้น condition สามารถเป็น expression ได้ โดยปกติ condition expression (ซึ่งดูจะมีความซับซ้อน)นี้ จะถูก evaluate ว่าเป็นค่า 1 ใน 2 ของ booleans คือ ไม่ค่า True(จริง) ก็ค่า False(เท็จ) นั่นเอง

ความเข้าใจที่ถูกต้องถึงวิธีที่ JavaScript engine จะ convert จาก condition expressions ไปเป็น booleans นั้น เป็นเรื่องที่จำเป็นสำหรับการเขียน conditional logic ที่ถูกต้องและสามารถคาดการณ์ได้

นี่เป็นแนวคิดพื้นฐาน 2 ข้อ ที่สามารถช่วยให้เราเข้าใจเกี่ยวกับการ convert:

• ระบุค่าที่เป็น truthy และ falsy
• เข้าใจเกี่ยวกับ short-circuiting ใน logical operations

- Truthy vs Falsy

ทุกค่าใน JavaScript สามารถจัดได้ว่าเป็น truthy หรือ falsy โดยค่าที่เป็น falsy ใน JavaScript มีดังนี้:

• '' หรือ "" หรือ ``(Empty string)
• 0 หรือ -0 (ค่าเป็นศูนย์)
• null
• undefined
• NaN
• false

ค่าอื่นๆ นอกเหนือจากค่าที่อยู่ในรายการด้านบน จะถือเป็นค่า truthy เมื่อใดก็ตามที่ JavaScript คาดว่าจะมีค่า Booleans ค่า truthy จะถูกบังคับให้เป็น true ในขณะที่ค่า falsy จะถูกบังคับไปเป็น false ไปโดยปริยาย

อย่างไรก็ตาม ถ้าคุณต้องการความชัดเจนเกี่ยวกับ type coercion คุณสามารถใช้ฟังก์ชัน Boolean เพื่อ convert ค่าใดๆ ของ Boolean ดู

นอกจากนี้คุณยังสามารถใช้ NOT(!) operator ในการ convert ค่าไปเป็น Boolean ซึ่ง ! operator จะทำการ converts ตัว operand ไปเป็นค่า Boolean ที่ตรงกันข้าม ดังนั้น มันจะ evaluate ไปเป็นค่า Boolean เสมอ

การใช้ ! operator ในการ evaluate ค่า truthy ไปเป็น false และค่า falsy ไปเป็น true เมื่อต้องการ convert ค่าไปเป็น boolean นั้น คุณต้องใช้ ! operator สองครั้ง

- Short-Circuiting

 AND (&&) และ OR (||) logical operators ซึ่งทั้งคู่ต้องใช้ 2 operands และถูกใช้เพื่อแสดงถึง Boolean operations บน operands ของมัน ลองดูคำอธิบายที่ด้านล่าง:

• && operation จะ return ค่า true ในกรณีที่ operand ทั้งคู่เป็นค่า true เท่านั้น สำหรับกรณีอื่นๆ จะ return ค่าเป็น false
• || operation จะ return ค่า false ในกรณีที่ operand ทั้งคู่เป็นค่า false เท่านั้น สำหรับกรณีอื่นๆ จะ return ค่าเป็น true

ข้อสังเกต : && operator มีลำดับความสำคัญเหนือกว่า || operator ซึ่งมันจะได้รับการ evaluate ก่อน ดังนั้น หากใช้มันร่วมกันในexpression คุณอาจใช้เครื่องหมายวงเล็บ (()) เพื่อจัดกลุ่มและเปลี่ยนแปลงลำดับการ evaluate ลองดูจากตัวอย่าง code ต่อไปนี้:

เมื่อใช่งาน operator เหล่านี้ operand ตัวแรกจะถูก evaluate ก่อนเสมอ แต่อย่างไรก็ตาม operand ตัวที่สอง อาจไม่ได้รับการevaluate ซึ่งมันขึ้นอยู่กับผลการ evaluate operand ตัวแรก โดยลักษณะการทำงานนี้เรียกว่า short-circuiting

&& และ || operations ไม่ได้สร้างเฉพาะค่า Boolean เสมอไป โดยทั่วไปแล้วพวกมันสามารถสร้างค่าประเภทอื่นได้ ลองดูคำอธิบายสั้นๆ เกี่ยวกับพฤติกรรมของพวกมันโดยอ้างอิงจาก short-circuiting:

• && operation จะเริ่ม evaluate ตัว operand ตัวแรก ถ้าผลจากค่าที่ได้เป็น truthy มันจะ evaluates ตัว operand ตัวที่ 2 แล้วจะ returns ค่าที่ได้กลับไป แต่ถ้าค่าของ operand ตัวแรก เป็น falsy ตัว operand ตัวที่ 2 จะไม่ได้รับการ evaluate ใดๆ มันจะ return ค่า falsy ที่ได้จาก operand ตัวแรก

• || operation จะเริ่ม evaluate ตัว operand ตัวแรก ถ้าผลจากค่าที่ได้เป็น truthy ตัว operand ตัวที่ 2 จะไม่ได้รับการ evaluate ใดๆ มันจะ return ค่า truthy ที่ได้จาก operand ตัวแรกกลับไป แต่ถ้าค่าของ operand ตัวแรก เป็น falsy มันจะ evaluates ตัว operand ตัวที่ 2 แล้วจะ returns ค่าที่ได้กลับไป

การแทนที่ Statements ด้วย Expressions

ตอนนี้คุณน่าจะมีความเข้าใจที่ชัดเจนเกี่ยวกับ concept ของ short-circuiting และวิธีที่ condition expressions จะถูก convert ไปเป็น Booleans แล้ว ต่อไปคุณจะได้เห็นว่า conditional statements สามารถถูก convert ไปเป็น expressions ทั่วไปได้อย่างไร นอกจากนี้คุณจะได้เห็นว่าการ convert ดังกล่าว สามารถทำให้ Code ของคุณดูกระชับและ clean มากขึ้นได้อย่างไร

1. If Statements อย่างง่ายๆ

if statements สามารถถูกแทนที่ด้วย conditional expressions ด้วยการใช้ประโยชน์จาก concept ของ short-circuiting ลองดูที่ตัวอย่าง code ด้านล่างนี้:

ในตัวอย่าง code นี้ if statement ถูกใช้เพื่อให้แน่ใจว่า deletePost()function จะถูกเรียกใช้เมื่อ condition ถูก evaluate ว่าเป็น true เท่านั้น

if statement อย่างง่ายๆ นี้ สามารถถูกแทนที่ด้วย conditional expression อย่างง่าย ดังที่แสดงในตัวอย่าง code ต่อไปนี้:

แม้ว่าการทำงานของ conditional expression นี้จะดูคล้ายกับ if statement ที่อยู่ก่อนหน้านี้ แต่ที่จริงแล้วมันต่างกัน

conditional expression สามารถที่จะสร้างค่าได้ ซึ่งหมายความว่ามันสามารถถูก assign ไปเป็น variable หรือถูกใช้ในที่ที่ต้องการค่านั้น 

โปรดจำไว้ว่า  การใช้ conditional expressions แบบนี้ หมายความว่า คุณจะต้องระมัดระวังอย่างมากเกี่ยวกับการใช้งาน short-circuiting เป็นไปได้อย่างมากที่ operand อาจไม่ได้รับการ evaluate ตามที่เราเห็นในส่วนก่อนหน้านี้เกี่ยวกับเรื่อง short-circuiting

2. If…Else Statements

ลองพิจารณาดูตัวอย่าง code ต่อไปนี้เพื่อเช็คว่า Password นั้นแข็งแกร่งมากพอหรือไม่:

เราจะเห็นว่าเจตนาของตัวอย่าง code นี้ง่ายมาก คือ เพียงตรวจสอบว่า Password มีความยาวเกิน 7 ตัวหรือไม่ ถ้าใช่ ให้ตั้งค่าความแข็งแกร่งให้เป็น "Strong" ถ้าไม่ใช่ก็ให้ตั้งค่าเป็น "Weak"

จากตัวอย่าง code ที่เห็นก่อนหน้านี้ สามารถเขียนให้สั้นลงได้ดังนี้:

ตัวอย่าง code นี้ ดูจะแตกต่างจากที่เราเห็นก่อนหน้า เพราะมันใช้เพียงบรรทัดเดียว ซึ่งมันก็ดูดีอยู่แล้ว ลองดูตัวอย่าง code ต่อไปนี้ ที่พยายามตรวจสอบการ evaluate ของ conditional expression:

มีวิธีที่ดีกว่าในการเขียน if...else conditional expressions เหล่านี้ โดยการใช้ conditional operator ที่ถูกเรียกว่า ternary operator ซึ่งมันมี syntax ดังต่อไปนี้:

ตัวอย่าง code ก่อนหน้านี้ สามารถถูกเขียนขึ้นใหม่โดยใช้ ternary operator ดังต่อไปนี้:

แม้ว่าตัวอย่าง code ที่ใช้ logical operators จะทำงานคล้ายกับตัวอย่าง code ที่ใช้ ternary operator แต่เรื่องสำคัญที่คุณควรรู้คือ มันไม่สามารถใช้แทนกันได้

มันจะปลอดภัยมากกว่าที่จะใช้ ternary operator สำหรับกรณีแบบนี้ ยกเว้นแต่ว่าคุณจะรู้ในสิ่งที่คุณกำลังทำจริงๆ

พิจารณาตัวอย่าง code ต่อไปนี้ เพื่อจะได้เข้าใจถึงอันตรายของการใช้ logical operators ในกรณีแบบนี้:

นี่คือ conditional statement อื่นๆ ที่คุณคุ้นเคย ซึ่งมักพบได้ใน cross-browser AJAX libraries:

ในการใช้ logical operators ตัวอย่าง code ก่อนหน้านี้ สามารถเขียนใหม่ได้ดังนี้ (ใช้การเยื้องใช้เพื่อช่วยให้อ่านง่ายขึ้น):

อย่างไรก็ตาม การใช้ ternary operator สามารถเขียนใหม่ได้ดังนี้:

สังเกตว่าในตัวอย่าง code นี้ ternary operator จะเป็นแบบซ้อนกัน (Nested) ซึ่งจะเป็นประโยชน์สำหรับการจัดการกับ if...else conditions อื่นๆ ที่เกี่ยวข้อง

Tips & Shortcuts

ในส่วนนี้คุณจะได้ทราบถึง เคล็ดลับและทางลัด ซึ่งมันอาจมีประโยชน์เมื่อคุณต้องทำงานกับ conditions และ logical operators

- Normalizing to Boolean

convert ค่า JavaScript เป็นค่าที่เหมือนกับ Booleans โดยใช้ฟังก์ชัน Boolean หรือโดยใช้ double NOT (!!) operators

สมมุติว่า คุณต้องการ normalize ค่า เพื่อที่คุณจะได้รับค่า Boolean ดังนี้:

• ถ้าค่าเป็น Boolean ให้ return ค่านั้นกลับไป
• ถ้าค่าไม่ใช่ Boolean ให้เลือกค่า Boolean ตามที่คุณต้องการ - ไม่ว่าจะเป็น true หรือ false

จากตัวอย่าง code นี้แสดงให้เห็นว่าจะทำมันอย่างไร (ฟังก์ชันถูกใช้งานในส่วนนี้)

- De Morgan’s Laws

ถ้าคุณคุ้นเคยกับ Boolean Algebra คุณควรรู้เกี่ยวกับ De Morgan’s Laws ซึ่งกฏนี้ถูกนำไปใช้กับ JavaScript logical operators

นี่คือตัวอย่าง code ที่แสดงถึงกฏดังกล่าว:

- Boolean Identities

เมื่อจัดการกับ Booleans มี identities ที่เป็นที่รู้จักกันว่า มันเป็นจริงเสมอไป สมมติระบุว่า A, B และ C เป็นค่า Boolean

ตัวอย่าง code ต่อไปนี้ จะแสดงให้เห็นถึง identities บางส่วนดังนี้:

- Multiple Ternary Operators

คุณได้เห็นในตัวอย่าง code ก่อนหน้านี้ไปแล้วว่า ternary operators สามารถใช้งานแบบซ้อนๆ (Nested) กันได้เพื่อจัดการกับ if...else conditions logic อื่นๆ ที่เกี่ยวข้อง

แต่มีบางสิ่งที่คุณจำเป็นต้องรู้ เกี่ยวกับลำดับความสำคัญและความเชื่อมโยงของ ternary operator เพื่อให้คุณใช้งานมันอย่างมีประสิทธิภาพใน expressions ที่มีความซับซ้อน

• ternary operator มีลำดับความสำคัญต่ำกว่า logical operators และ operator อื่นๆ เป็นส่วนใหญ่ ดังนั้นมันจึงถูก evaluate เป็นลำดับสุดท้ายเมื่อใช้งานร่วมกันกับ operator อื่นๆ ที่มีลำดับความสำคัญสูงกว่า

• ternary operator มีความเชื่อมโยงกันแบบ ขวาไปซ้าย ดังนั้นเมื่อมีการใช้ ternary operator หลายๆ ตัวใน expression เดียวกัน มันจะถูกดำเนินการพิจารณาคำจากขวาไปซ้าย

เมื่อคุณใช้ ternary operator หลายๆ ตัวใน expression เดียวกัน คุณอาจต้องใช้เครื่องหมายวงเล็บ (()) เพื่อจัดกลุ่มและเปลี่ยนแปลงลำดับการ evaluate ซึ่งนี่คือตัวอย่าง:

Conclusion

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

ที่มา:  https://hackernoon.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

 

บทความที่เกี่ยวข้อง

• 6 เว็บไซต์ ที่ให้คุณเรียนรู้ด้าน Programming ฟรีๆ
• 6 เคล็ดลับการสร้างกิจวัตร เพื่อเป็น Web Developer ที่ดี
• 5 Java Decompilers ที่ดีที่สุด ที่คุณควรรู้จัก