Tips for Writing Self-Documenting Code

20-Dec-19

คัมภีร์เทพ IT

See the original english version Click here!

 

Self-Documenting Code (Code ที่เข้าใจง่ายมีความหมายชัดเจน) เป็นคำเรียกที่สวยหรูของ “Readable Code” ซึ่ง Readable Code ก็เป็นสิ่งที่ช่วยให้คุณไม่หลุดสมาธิจาก Code ที่เขียนอยู่ ในบทความนี้เรามาเรียนรู้ 5 เคล็ดลับการเขียน Code ให้เข้าใจง่าย มีความหมายชัดเจน ว่ามีอะไรบ้าง

1. อย่าใช้ Magic Number (โดยไม่จำเป็น)

ลองดูด้านล่างนี้ แล้วคิดว่ามันหมายถึงอะไร:

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

คราวนี้เราพอจะเข้าใจได้ว่า: ถ้าเรามีจำนวนของนักเรียน มากกว่าจำนวนสูงสุดที่กำหนดไว้ ก็ให้ทำอะไรบางอย่าง ซึ่งสิ่งนี้นำไปสู่หัวข้อถัดไป

2. ใช้ชื่อตัวแปรที่มีความหมายชัดเจน

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

เคล็ดลับที่เป็นประโยชน์อีกข้อหนึ่งก็คือ ใช้การตั้งชื่อแบบมีแบบแผนที่ใช้กัน หากค่าของคุณเป็น Boolean ให้เริ่มต้นด้วย is หรือ has เช่น isEnrolled: true หากค่าของคุณจัดเก็บ Array อยู่ ชื่อก็ควรเป็นพหูพจน์ เช่น students ส่วน Number ก็ควรเริ่มต้นด้วย min หรือ max หากเป็นไปได้ สำหรับ Functions ก็ควรมีคำกริยาอยู่ด้านหน้า เช่น createSchedule หรือ updateNickname

3. เริ่ม Refactor ตั้งแต่ใน Functions

ตัวแปรไม่ได้เป็นเพียงจุดเดียวที่ควรเพิ่มคำอธิบายเพื่อเป็นประโยชน์ต่อการอ่าน แต่ในชื่อ Function ก็เช่นกัน! คุณอาจคิดว่า Function เหล่านี้ ถูกใช้เพื่อลดความซ้ำซ้อนของ Code (DRY)เท่านั้น แต่ในความเป็นจริงแล้วมันมากกว่านั้น เพราะมันช่วยในเรื่องของ Readable ด้วยเช่นกัน ลองดู Code ด้านล่างนี้ ว่ามันทำอะไร:

แล้วถ้าเป็นด้านล่างนี้ล่ะ:

แน่นอนว่ามัน Clean กว่าตัวอย่างแรก สิ่งที่เราทำก็แค่ใส่ Code ลงไป 2-3 บรรทัดลงไปใน Function แล้วมันก็ช่วยปรับปรุงให้ Code ดีขึ้นอย่างมาก จะเห็นได้ว่า showSaveAlertFor เป็น Function ที่เราสามารถใช้กับที่อื่น ๆ ได้ด้วย(ถ้าต้องการ) อีทั้ง Code ในแต่ละบรรทัดจะทำให้เข้าใจได้ถึง Function Definitions แต่คุณไม่จำเป็นต้องอ่านมันโดยตรงเว้นแต่จะมีปัญหา Function Definitions ถือเป็นอีกวิธีที่ดีในการตั้งชื่อตัวแปร setTimeout รับ Function และจำนวน Milliseconds แต่ตอนนี้เราได้เพิ่มพวกมันไว้อย่างชัดเจนเพื่อที่จะนำไปใช้ประโยชน์ได้

4. เพิ่ม Description ลงไปใน Test ด้วย

ประเด็นนี้น่าจะเป็นเรื่องที่ไม่ค่อยถูกพูดถึงมากนัก เกี่ยวกับการการทำให้ Code เข้าใจและอ่านง่าย ซึ่งก็คือ เรื่องของการ Test สมมติว่าเรามี Function นี้:

สมมติว่านี่เป็น Function ที่ประกอบไปด้วย Function อื่น ๆ มากมาย ดังนั้น มันจึงทำหลายอย่าง: มันดึง Schedule รายวัน ถ้าวันใดในสัปดาห์เป็นวันหยุด(เสาร์-อาทิตย์) มันจะ Returns ตัว Empty Array ถ้านักเรียนมีการถูกกักกัน มันจะติดไว้ที่ท้าย Schedule และหากนักเรียนไม่ได้ลงทะเบียนในโรงเรียน ก็จะพิมพ์ Link ไปยัง Mean Girls Gif

หากคุณพยายามใส่ Comment ลงไปเป็น Paragraph มันก็คงจะดูแปลก ๆ แต่คุณรู้ไหมว่า Paragraph นั้นจะดูดีขนาดไหน? ใน  Test:

นี่คือวิธีที่ง่ายที่สุดในการใส่ Comment ลงใน Code โดยไม่ต้องเพิ่ม Comment อื่น ๆ เข้าไปอีก

5. ส่วนสำคัญที่สุด : Code ที่อ่านง่ายสำคัญกว่า Code ที่ดูฉลาด

การเป็น Developer ที่ดีนั้น ไม่ได้หมายถึง การเขียน Code ที่ดูฉลาดที่สุด แต่หมายถึง การเป็นเพื่อนร่วมทีมที่ดี Software ที่มีคุณภาพมักไม่ค่อยถูก Develop เพียงแค่คนคนเดียว เพราะในที่สุดแล้วก็จำเป็นต้องมีคนอื่นที่มาอ่าน Code ของคุณด้วย และแม้ว่าคุณจะทำงานเพียงคนเดียว แต่ความจำของคุณใน Code ที่เขียนวันนี้และในอีก 2 สัปดาห์ข้างหน้า จะแตกต่างกัน ยังมีวิธีอีกมากมายในการเขียน Code ที่สามารถอ่านได้ เช่น การเพิ่ม Comment ที่มีประโยชน์ แต่สิ่งที่สำคัญที่สุดที่คุณสามารถทำได้คือ การที่คุณเริ่มคิดเกี่ยวกับเรื่องเหล่านี้

ที่มา:  https://itnext.io/

 

 

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

 

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

เพิ่มเพื่อน

 

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