คุณเคยประสบปัญหากับการทำงานร่วมกันเป็นทีม หรือไม่? แน่นอนว่าการทำงานเป็นทีมนั้นเราต้องเจอโค้ดที่เพื่อนร่วมทีมนั้นเขียนอยู่แล้ว และถ้ายิ่งเราเข้ามาหลังจากที่ Project นั้น ถูกพัฒนาไปแล้วหลายปี คุณอาจจะกำลังเจอปัญหา โค้ดที่ยุ่งเหยิงมากๆและมี feature ที่หลากหลาย และคุณควรทำอย่างไรดีละ
วันนี้เรามาทำความรู้จักกับคำว่า Refactor Code กันเถอะ !!
Refactor Code คือการปรับปรุงโค้ด เพื่อลดความซับซ้อนในการอ่านและเขียนของฟังก์ชั่นการทำงาน รวมทั้งลบฟังก์ชั่นที่ไม่ได้ถูกเรียกใช้ ก็จะทำให้เพิ่มทั้งคุณภาพของการทำงาน และเพื่อนร่วมงานสามารถเขียนโค้ดต่อจากเราได้ง่ายมากขึ้นด้วย
เราควรต้อง Refactor Code เมื่อไหร่ล่ะ ?
ถ้าคุณเคยตั้งคำถามเหล่านี้ หรือเคยได้ยินเพื่อนร่วมงานบอกว่า..
- เขียน code ให้มันทำงานได้ไปก่อน
- Code มันทำงานได้ดีอยู่แล้ว อย่าไปยุ่งกับมันเลย
- มักจะบอกว่าเดี๋ยวจะกลับมาแก้ไขทีหลัง
สุดท้าย code เหล่านั้นจะเกิด Technical Dept ตามมาอย่างหลีกเลี่ยงไม่ได้และแน่นอนเมื่อไหร่ก็ตามที่เราลงมือเขียน code เมื่อเจอ code ที่แย่ให้ลงมือ “ทำทันที”
มาดูตัวอย่างการ Refactor Code ด้วยภาษา TypeScript กันหน่อยดีกว่า
- Dead Code
หลาย ๆ คนที่ไม่ค่อยมั่นใจในการลบโค้ดที่ไม่ได้ใช้งานออกและสุดท้ายก็ทิ้งมันไว้แบบนั้น หรือเพราะอาจจะคิดว่าโค้ดนั้นมีโอกาสได้ใช้ในงานในอนาคต ด้วยเหตุลผลที่กล่าวมาข้างต้น ทำให้พอนานไปโค้ดเราจะยิ่งเยอะมากขึ้น ยากแก่การทำความเข้าใจโดยไม่จำเป็น ดังนั้นเพื่อความง่ายแก่การทำความเข้าใจ เวลาในการ build ที่สูงขึ้น ดูแลรักษายากลำบากขึ้น ดังนั้นคุณควรที่จะลบโค้ดที่ไม่จำเป็น โค้ดที่ไม่ได้ถูกนำมาใช้งานออกซะ ซึ่งมันเป็นสิ่งที่สำคัญสำหรับการเพิ่ม Code Quality ด้วยนั้นเอง
ในบางทีการตรวจสอบโค้ดด้วยตาเปล่านั้น อาจจะเป็นไปได้ยากที่จะตรวจสอบให้ครบถ้วน เราจึงแนะนำเครื่องมือที่มาช่วยตรวจสอบ ซึ่งในภาพด้านบนจะใช้เครื่องมือของ
Visual Studio Code > Linters > SonarLint เข้ามาช่วยตรวจสอบ ให้เราเบาแรงลงนั้นเอง
2. ชื่อตัวแปรและชื่อฟังชั่น
ตัวอย่าง: ในโค้ดนี้เราจะเห็นได้ว่าชื่อตัวแปรและชื่อฟังชั่น ไม่ได้สื่อความหมาย ทำให้เวลาเรากลับมาอ่านโค้ด หรือคนในทีมมาอ่านในภายหลัง ก็จะเป็นไปได้ยากในการทำความเข้าใจ ในเวลาอันรวดเร็ว
วิธีแก้ไข: เราควรจะตั้งชื่อตัวแปร และฟังชั่นให้สื่อความหมายกับสิ่งที่มันทำหน้าที่ ถ้าเกิดเรามีโอกาสได้กลับมาอ่านอีกครั้ง ก็จะได้ง่ายมากขึ้นในการทำความเข้าใจและนำไปใช้งานต่อ ได้อย่างรวดเร็วมากยิ่งขึ้น
3. Default Value and || operators
ตัวอย่าง: โค้ดต่อไปนี้ถูกใช้เพื่อตรวจสอบค่า null โค้ดนี้ค่อนข้างซับซ้อนโดยไม่จำเป็นและไม่สามารถอ่านเข้าใจได้ระยะเวลาอันสั้น
วิธีแก้ไข: ตั้ง default value ให้กับตัว status และยังใช้งานร่วมกับ || operators เพื่อใช้ในการตรวจสอบค่าว่าง ทำให้สั้นลง และอ่านง่ายขึ้นเป็นอย่างมาก
4. Early Return
Concept ของเรื่องนี้คือ Fail Fast หรือก็คือยิ่ง Return ค่าออกจาก Function ได้เร็วเท่าไหร่ Code ก็ยิ่งอ่านง่ายขึ้น
ตัวอย่าง: การเรียกข้อมูลจาก api โดยมีเงื่อนไข status เป็นตัวกำหนดเส้นทางไปยังฟังก์ชั่นต่างๆ ในภาพนี้มีการใช้ if-else ซ้อนกันอยู่มากมาย หากมีการเพิ่มเงื่อนไขหรือเส้นทางที่ต้องเพิ่มขึ้น การใช้ if-else ซ้อนต่อไปเรื่อยๆ คงจะดูแล้วยุ่งเหยิงและยากต่อการแก้ไขภายหลัง
วิธีแก้ไข: ในกรณีนี้ เราจะแก้ปัญหาด้วยการด้วยการ
- Early return โดยเราจะดักข้อผิดพลาดไว้ตั้งแรก ถ้าเข้าเงื่อนไขก็จะ return ข้อผิดพลาดออกไปอย่างเร็ว
- แล้วเราก็ยังเสริมด้วย Short if else (ซึ่งเป็นคำสั่งเลือกเงื่อนไขแบบสั้นที่ทำงานได้เหมือนกับคำสั่ง if else) ให้โค้ดสั้นลง และดูง่ายขึ้นเป็นอย่างมาก
5. Table-Driven Method
ตัวอย่าง: โค้ดด้านบน คือการกำหนดชื่อเรียกวัน โดยจะเห็นได้ว่าเป็นการกำหนดเงื่อนไขด้วย if ด้วยลำดับของวัน จากโค้ดมีแนวโน้มที่จะเกิดข้อผิดพลาดและเปลี่ยนแปลงได้ยาก
วิธีแก้ไข: คือเราจะเก็บจำนวนวันของเดือนนั้น ๆ ไว้ใน array และเวลาใช้งานเราก้แค่แทนค่าของเดือนด้วยตำแหน่งของ array เราก็จะสามารถได้ค่าจำนวนวันของเดือนนั้น ๆ ผลลัพธ์ที่ได้คือกะทัดรัดและอ่านง่ายขึ้นมาก
6.Extract
ตัวอย่าง: เงื่อนไขซับซ้อนไม่ใช่ปัญหาสำหรับคนที่สามารถอ่านได้ โค้ดด้านบนประกอบด้วยคำสั่งเงื่อนไข if ที่ซ้อนกันและทับซ้อน ยากที่เข้าใจได้ว่าผลลัพธ์จะออกมาเป็นอย่างไร
วิธีแก้ไข: คือเราใช้วิธีการแยก function เพื่อแยกส่วนประกอบ ifs ที่มีการเช็คเงื่อนไขอยู่ให้แยกออกไปอยู่ใน function ใหม่ที่เราสร้าง พร้อมระบุชื่อให้สามารถสื่อสารเข้าใจง่าย เพื่อลดการซับซ้อนในการอ่านโค้ด
เพิ่มเติม
แล้วเราจะรู้ได้ยังไงหละว่าเราควรจะ Refactor code หรืออาจจะเป็นไปได้ยากในการตรวจหาข้อบกพร่องของโค้ดของเรา ที่มันซับซ้อน เราจึงแนะนำ Sonarlint IDE Extension ที่จะเข้ามาเป็นผู้ช่วยเราในการตรวจสอบโค้ด ช่วยให้เรารู้ว่าเมื่อไหร่เราปรับปรุงโค้ด และยังมีการแนะนำการปรับปรุงโค้ดให้เป็นไปตามมาตรฐาน
สรุป
เราได้พูดถึงและยกตัวอย่างปัญหา การ Refactor code กันไปพอสมควรแล้ว การใช้วิธีการเหล่านี้จะช่วยให้ code ของคุณอ่านง่ายขึ้น คนในทีมมาอ่านก็สามารถเข้าใจได้อย่างรวดเร็ว และนำไปใช้งานต่อได้อย่างง่ายดาย หวังว่าบทความนี้จะเป็นประโยชน์กับคุณไม่มากก็น้อย ขอบคุณครับที่อ่านมาจนจบ
สำหรับใครที่สนใจอยากศึกษาเรื่องการ Refactor code เพิ่มเติมสามารถศึกษาได้ที่
Cognitive Complexity
Refactoring TypeScript
refactoring.guru
