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

5 เคล็ดลับ ที่ช่วยให้เขียน JavaScript Code ดีขึ้นกว่าเดิม

30-เม.ย.-20

คัมภีร์เทพ IT

มีหลายวิธีที่เราสามารถ Optimize JavaScript Code ของเรา ซึ่งบทความนี้จะช่วยบอกถึงข้อผิดพลาดทั่วไปและวิธีหลีกเลี่ยงด้วยการเขียน Code ให้เข้าใจได้ง่ายขึ้น ดังนั้น เรามาดู 5 เคล็ดลับ ที่ช่วยให้เขียน JavaScript Code ได้ดีขึ้นกว่าเดิม

1. ใช้ .map หรือ .forEach แทนการใช้ Loops

ส่วนใหญ่ Application ที่ซับซ้อน มักมีการวน Loops ในชุด Data ที่เหมาะสมซึ่งโดยทั่วไปจะเป็นกรณีของ Arrays หรือ Objects และการใช้ for Loops ก็มักจะทำให้ Code อ่านได้ยากขึ้นและทำให้ยากในการติดตาม

ตัวอย่าง ลองดูที่ Code ด้านล่าง แล้วคิดดูว่าคุณจะชอบแบบไหนมากกว่ากัน

จาก Code ด้านบน เป็นการวน Loop Arrays ของตัวเลข และทำการ Print แต่ละตัวเลขไปยัง Console 

แต่ถ้าเรามี Arrays ที่ซับซ้อนขึ้น เช่น Array ของ Objects ล่ะ เราสามารถใช้ map, filter, reduce เพื่อจุดประสงค์ในการทำอะไรซ้ำ ๆ

 

ท้ายที่สุดแล้ว นี่คือสิ่งที่ถูก Print ไปยัง Console แม้ผลลัพธ์จะเหมือนกัน แต่จะเห็นว่า Code นั้น Clean กว่ามาก ด้วยแนวทางของ Functional Programming 

ข้อยกเว้นสำหรับการใช้ for Loop ก็คือเมื่อเราประมวลผลซ้ำ ๆ บน Objects นั่นเป็นเพราะ forEach, map, reduce และ filter เป็น Method ที่เราสามารถเรียกใช้สำหรับ Arrays ได้เท่านั้น

ในกรณีของการวน Loops บน Objects เราสามารถใช้ for...in Loops ได้

วิธีที่ดีกว่าในการประมวลผลซ้ำ ๆ บน Objects จะสามารถใช้ Methods ดังต่อไปนี้:
  • Object.keys : จะ Return Array ของ Property names ของ Object ที่ตั้งค่า enumerable ไว้ 
  • Object.values : จะ Return Array ของ Property values ของ Object ที่ตั้งค่า enumerable ไว้ 
  • Object.entries : จะ Return Array ของ Property ออกมาให้ทั้ง key และ value ในรูปแบบ [key, value] ที่ตั้งค่า enumerable ไว้ 

Methods ทั้ง 3 จะทำการดึง keys หรือ values จาก Object มาใส่ใน Array แล้วทำการ Return Array เหล่านั้นกลับมาให้

ตอนนี้เรามี Array แล้ว เราสามารถประมวลผล values ซ้ำ ๆ ได้ ด้วย map หรือ forEach เพื่อดึงค่าต่าง ๆ ออกมา

ต่อไปนี้ เป็นวิธีที่แตกต่างกัน 2 วิธี ในการประมวลผลซ้ำ ๆ บน Objects ด้วยจุดประสงค์ที่แตกต่างกัน

2. ใช้ const เป็นค่า Default

const และ let มีความแตกต่างกัน โดยที่ const นั้นจะเป็น Immutable ส่วน let จะอนุญาตให้เราสามารถ Assign ตัวแปรใหม่ได้

เมื่อใช้ const จะช่วยให้เราไม่ต้องไล่ดูหรือคาดเดาว่าตัวแปรแต่ละตัวหมายถึงอะไร เราจะใช้ let เมื่อใดก็ตามที่เราต้องการเปลี่ยนค่าตัวแปร

จากตัวอย่างด้านล่างนี้ เรามีการประกาศตัวแปร name ของเราไปก่อนหน้านี้และมีการเปลี่ยนค่าไปหลายครั้ง เราอาจพบ Bug บางอย่างที่ไม่คาดคิด ซึ่งสามารถหลีกเลี่ยงได้ด้วยการใช้ const

เหตุผลที่ควรใช้ const :

  • เพื่อหลีกเลี่ยง Side Effects ที่เกิดจากการ Reassign โดยไม่ได้ตั้งใจ
  • ช่วยสร้างประสบการณ์ที่ดีให้กับ Developer เพราะจะช่วยลดความไม่แน่นอน Developer ที่เห็นตัวแปร const จะสามารถไว้ใจได้ว่า มันจะไม่ถูก Reassign
  • const มีความสอดคล้องกับ Functional Programming และ Immutable States 

3. หลีกเลี่ยงการใช้ Closure ซ้อนกัน (Nesting Closures)

การทำความเข้าใจ Closures ใน JavaScript นั้นถือเป็นสิ่งจำเป็น เราใช้ Closures กันบ่อย ๆ ลองดูใน Code ด้านล่างนี้

คุณหา Closure เจอหรือไม่ คำใบ้ก็คือ Closure จะอยู่ในบรรทัดที่ 4 โปรดจำไว้ว่า Closure จะจดจำ Environment ต่าง ๆ ที่มันประกาศเอาไว้แต่แรก

ตอนนี้เราได้ทราบแล้วว่า Closure คืออะไร คำถามคือเราจะปรับปรุง Code ได้อย่างไร มันเป็น Code ที่ค่อนข้างเรียบง่ายที่จัดรูปแบบ ชื่อทั้งหมดภายใน Array ให้เป็นตัวพิมพ์เล็ก

คำแนะนำ: หลีกเลี่ยงการใช้ Closures ซ้อนกัน

นี่คือตัวอย่างง่าย ๆ ของวิธีที่คุณสามารถหลีกเลี่ยงการใช้ Closures ซ้อนกัน

จะสังเกตว่า เราใช้ Closure และวางมันลงใน Function Expression วิธีนี้จะทำให้ Code ของเราง่ายต่อการติดตาม ลองดูที่ตัวอย่าง Code ต่อไปนี้

 

Code ด้านบน ทำการประมวลผลซ้ำ ๆ ใน Array ของ Objects จากนั้นจะทำการรวมคะแนนและปัดเป็น Round Number แม้ว่า Code นี้สามารถเข้าใจได้ แต่เราก็ยังสามารถปรับปรุง Code ให้ดีขึ้นกว่าเดิมได้ 

นี่คือวิธีที่คุณสามารถปรับปรุง Code ได้โดยแยก Logic การรวมคะแนนไปยัง Function Expression ของตัวมันเอง

คุณสามารถอ่านบทความ “Why I avoid nesting closures” โดย Kent C. Dodds หากคุณอยากรู้ในเชิงลึกถึงเหตุผลที่ควรหลีกเลี่ยงการใช้ Closures ซ้อนกัน

4. หลีกเลี่ยงการใช้ If ซ้อนกัน (Nested Ifs)

การใช้ If statements ซ้อนกันเป็นสาเหตุสำคัญของการเกิด Code Smell และทำให้ยากต่อการ Maintain Codebase อีกด้วย

นี่เป็นตัวอย่างของการตรวจสอบเงื่อนไขด้วยการใช้ If statements ซ้อนกัน

เรามาดูกันว่า จะสามารถปรับปรุง Code ให้ดีขึ้นได้อย่างไรจากด้านล่างนี้

เราเปลี่ยน Code จาก 7 บรรทัดเป็น 3 บรรทัด นั่นถือเป็นการปรับปรุง Code ได้เป็นอย่างดี เนื่องจากทั้ง 3 เงื่อนไขต้องได้รับการประเมินว่าเป็น “True” เราจึงสามารถใช้ && operator ได้ ซึ่ง && ก็หมายถึง AND อีกทางเลือกหนึ่งก็คือ การใช้ || (Double Pipe Operator) ซึ่งหมายถึง OR ความแตกต่างระหว่าง && กับ || ก็คือ สำหรับ && นั้น จะต้องเป็นจริงในทุกเงื่อนไข แต่สำหรับ || มีเงื่อนไขใดเงื่อนไขหนึ่งเป็นจริง ก็เพียงพอแล้ว

5. ใช้ตัวแปร แทน If Clauses มีความซับซ้อน

อาจมีบางครั้งที่เราพบว่า ตัวเองกำลังเจอกับสถานการณ์ที่ If statements มีความซับซ้อนสูง ลองดูตัวอย่าง Code ด้านล่างนี้

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

ด้วยการแยกตัวแปรมาเปรียบเทียบให้น้อยลง จะช่วยทำให้ Code ง่ายต่อการติดตามมากกว่าเดิม แม้จะใช้เวลาเพิ่มขึ้นเล็กน้อยแต่ด้วยวิธีนี้ มันเป็นการปรับปรุงประสิทธิภาพการทำงานของ Developer ในระยะยาวได้เป็นอย่างดี

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

 

 

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

 

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

เพิ่มเพื่อน

 

บทความล่าสุด

ประเภทบทความ