COOL IT IDEAS AND STUFF

See the original english version Click here!

 

ปัจจุบัน JavaScript ถูกใช้งานอย่างแพร่หลายไม่ว่าจะเป็นการสร้าง Web Services, Desktop Apps, Mobile Apps, CLI Programs และ Embedded Systems บทความนี้จะมาพูดถึง JavaScript Syntax ของ JavaScript ที่ Developer ควรรู้ไว้ ที่คุณสามารถฝึกฝนได้ใน Codebase ที่ใช้ JavaScript เพื่อเขียน Source Code ที่ Clean เรียบง่ายและอ่านเข้าใจได้ง่าย

การใช้ Spread Syntax

Spread Syntax จะช่วยให้เรา Convert พวก Objects, Iterable Objects อย่างเช่น Arrays, Sets เป็นต้น ให้เป็น Records ที่แยกกัน ดังนั้น เราจึงสามารถใช้ Feature นี้เพื่อสร้าง Data Structures ใหม่ตาม Data Structures ที่มีอยู่ได้ และส่งผ่าน Iterable Objects ไปยัง Functions เป็น Individual Parameters โดยทั่วไป Spread Syntax จะช่วยให้คุณสามารถเลี่ยง Loop Structures และทำให้ Source Code ของคุณ อ่านแล้วเข้าใจง่ายขึ้นและ Code ก็สามารถอธิบายในตัวมันเองได้ เรามาดูตัวอย่างในเชิงปฏิบัติกัน

ก่อนมี ES6 เราใช้ Arguments Object เพื่อทำการ Implement Dynamic Parameter Counts ใน Functions:

ในตัวอย่างนี้ Spread Syntax สามารถช่วยให้ Code Snippet ด้านบน มีความเรียบง่ายขึ้น ดังต่อไปนี้:

ในตัวอย่างนี้ Spread Syntax จะช่วยทำให้สามารถอ่าน Function Definition ได้เข้าใจง่ายขึ้น

Developers สมัยใหม่มักใช้ Spread Syntax เพื่อ Create/Copy Objects และ Arrays:

Spread Operator ทำงานร่วมกับ Object ใด ๆ ที่ใช้ Iterable Protocol ได้:

Inline Short-Circuits และ Nullish Coalescing

Inline Short-Circuit Evaluation Techniques จะช่วยให้เราหลีกเลี่ยงการใช้ if Conditions ที่มากเกินไป ซึ่งโดยปกติแล้วจะตั้งค่า Default ไว้ และดูเหมือน if Conditions แบบเดิมนั้นเข้ามาในใจของเราเป็นอันดับแรกสำหรับ Conditional Programming Requirement แต่มันกลับไม่ได้ทำให้การใช้งานมีประสิทธิภาพและชาญฉลาดไปซะทุกครั้ง

ลองดูที่ Code Snippet ต่อไปนี้:

เราสามารถใช้  Inline Short-Circuit || เพื่อลดความซับซ้อนลง:

|| Operator จะ Set ค่าที่ 2 เฉพาะเมื่อค่าแรกถูกประเมินว่าเป็น False ในทำนองเดียวกัน คุณสามารถใช้ && Boolean Operator เพื่อ Set ค่าที่ 2 เมื่อค่าแรกถูกประเมินว่าเป็น True สำหรับ JavaScript แล้วจะถือว่า 0 และ Empty String เป็น False ใน Boolean Context ดังนั้น เราจึงควรต้องระมัดระวังในขณะที่ใช้ Short Circuits ในบางสถานการณ์

ตัวอย่างเช่น คำสั่งต่อไปนี้จะไม่ Print 0:

ในสถานการณ์นี้อาจทำให้เกิด Bugs ใน Frontends ที่ต้องอาศัย RESTful API ซึ่งมักจะ Output ค่า 0 เป็น Property Value ที่ถูกต้อง และ Output เป็นค่า Null เมื่อค่าบางตัวไม่ได้ถูก Set ไว้ Nullish Coalescing Operator จะ Set ค่าทางขวาเฉพาะในกรณีที่ค่าแรกเป็น Null หรือ Undefined ไว้:

Exponentiation Operator และ Assignment

ทุกภาษา Programming จะมี Functions มาตรฐานทางคณิตศาสตร์ผ่าน APIs มาตรฐานของมัน JavaScript มี Module ทางคณิตศาสตร์ที่ถูก Import ไว้ให้ล่วงหน้าแล้วทั้งใน Browser Environment และ Node.js สำหรับการยกกำลัง เราสามารถใช้ Math.pow Inbuilt Function กับฐานและเลขชี้กำลัง

ใน ES7 Exponentiation Operator (**) มี Feature เดียวกับที่ Math.pow Function มี แต่มี Language Grammar ที่ดีกว่าดังนี้:

นี่เป็น Feature ที่ยอดเยี่ยมสำหรับ Full-Stack Developers ที่ใช้ Python Backend Services เนื่องจาก Python มี Syntax นี้ตั้งแต่เริ่มต้น และเช่นเดียวกับ Python, ** มีลำดับความสำคัญสูงกว่า * (การคูณ):

การ Assign การยกกำลัง ก็มีการทำงานเหมือนกับ Assignment Operators อื่น ๆ ใน JavaScript:

Optional Chaining สำหรับการอ่านแล้วเข้าใจง่ายขึ้น

ในปัจจุบัน Web Developers มักจะสร้าง Web Applications ที่ดึงข้อมูลจาก Web Services ที่คล้ายกับ RESTful โดยทั่วไป Web Services เหล่านี้จะใช้ JSON Structures สำหรับการสื่อสาร ดังนั้น Programmers จึงมักจะเข้าถึง Data Records ที่ซ้อน ๆ กันโดยใช้สัญลักษณ์ . ในบางสถานการณ์ พวกเขาใช้ Data Objects ที่ซ้อน ๆ กันเพื่อถ่ายโอน Data ระหว่าง Functions และ Modules พวกเขายังใช้ Callback Functions ภายใน Objects ที่ซับซ้อน

สัญลักษณ์ . แบบดั้งเดิมเป็นเทคนิคที่ดี แต่มันก็มักจะนำไปสู่ ข้อผิดพลาด หรือ Bugs (ที่ร้ายแรง) ที่พบได้บ่อย ๆ ในการ Develop โดยใช้ JavaScript: TypeErrors

ตัวอย่างเช่น Code Snippet ต่อไปนี้จะทำให้เกิด Bug เมื่อ Assignee Property ไม่ได้ถูก Set ค่าไว้ (ซึ่งจะกลายเป็น Undefined):

การเรียกใช้ showAssignee Function ครั้งที่ 2 จะทำให้เกิด Error เนื่องจาก Assignee Field เป็น Undefined ในอดีตเราได้แก้ไขปัญหาที่เกี่ยวข้องกับ Undefined Property ด้วย Short-Circuits, Ternary Operators และ If Conditions:

ปัจจุบัน Optional Chaining Syntax ที่ทันสมัยสามารถช่วยให้เราหลีกเลี่ยงการตรวจสอบการมีอยู่ของ Nested Property ด้วย ?.:

Syntax นี้จะมีประโยชน์อย่างมากในการลดความซับซ้อนของ Code ให้เหลือน้อยที่สุด เนื่องจากจะ Return Undefined ในกรณีที่ไม่มี Property อยู่แทนที่จะส่ง TypeError Instance ดังนั้น คุณอาจเขียน Task.Assignee?.address?.postalCode แทนการตรวจสอบ Undefined Property ถึง 2 ครั้งได้

การแสดง Non-Decimal Number

มาเริ่มส่วนนี้ด้วยคำถามกันก่อน คุณคิดว่าคำสั่ง console.log ต่อไปนี้ ให้ผลลัพธ์เป็นตัวเลขเดียวกันหรือไม่

คงมี Developers บางคนที่บอกว่า ผลลัพธ์ทั้งสองเป็น 10 โดยคิดว่าเลข 0 ที่นำหน้า จะไม่ส่งผลต่อ Number Literals ของภาษา Programming ส่วนใหญ่ ซึ่งในภาษา Programming ส่วนใหญ่ (รวมถึง JavaScript) Octal Number Literals (เลขฐานแปด) จะเริ่มต้นด้วย 0 นำหน้า ดังนั้น คำสั่ง console.log ที่สองจะพิมพ์ 8 (ค่าทศนิยมที่ถูกแปลงเป็น Octal 10) — ไม่ใช่แค่ 10

การใช้กลยุทธ์ 0 นำหน้านี้ จะไม่มีการใช้งานแล้วใน JavaScript Strict Mode ดังนั้น เราควรใช้วิธีการมาตรฐาน คือนำหน้า ด้วย 0o:

JavaScript Number Literals ยังคงรองรับ Binary และ Hexadecimal Prefixes ดังที่แสดงใน Code Snippet ต่อไปนี้:

Inbuilt Non-Decimal Literals เหล่านี้ มีประโยชน์ในกรณีที่เราทำงานกับ Unix File Permissions, Color Codes และ การใช้งานที่เกี่ยวกับ Computer Science สิ่งที่ยอดเยี่ยมก็คือ JavaScript จะแปลงค่าที่เป็น Non-Decimal ให้โดยอัตโนมัติเมื่อคุณ Print บน Console หรือประมวลผลด้วย Decimals:

Destructuring และ Multiple Assignments

ES6 Standard มาพร้อมกับเทคนิค Destructuring เพื่อช่วยให้ JavaScript Developer สามารถดึงค่าจาก Objects และ Arrays ได้ โดยทั่วไปเทคนิค Object Destructuring จะรองรับในกรณีที่เราต้องการ Unpack ค่าจาก Objects ที่มีความซับซ้อน ดังที่แสดงในตัวอย่างต่อไปนี้:

Array Destructuring Syntax มีลักษณะเหมือนกับ Multiple Assignment Syntax ใน Python แต่ใน Python นั้น Multiple Assignment Syntax เป็น Strict และต้อง Match กับความยาวของ Array ดังนั้น เราจึงมักจะใช้ _ identifier เพื่อจับคู่ความยาวของ Array โดยการ Unpack Records ที่ไม่ได้ใช้

ใน JavaScript นั้น Multiple Assignments ตาม Destructuring มีความยืดหยุ่นมาก และคุณไม่จำเป็นต้องใช้ Unnamed Identifier สำหรับ Array Records ที่คุณไม่จำเป็นต้อง Unpack พวกมัน:

เช่นเดียวกับ * List Prefix ของ Python เราสามารถใช้ Spread Syntax เพื่อ Save Array Records ที่เหลือขณะที่ทำการ Unpack:

ที่มา: https://levelup.gitconnected.com/

 

 

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

 

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

 

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

• วิธีแก้ไข Commit Messages ด้วย Git Amend สำหรับมือใหม่
• IT & Digital Events in September 2023
• 5 Coding Websites ฟรี ที่ช่วยให้คุณเป็น Programmer ที่เก่งขึ้น