บทความ IT เจ๋งๆ
JavaScript Features ที่ Developers หลายคนยังไม่ค่อยรู้จัก
10-ก.ค.-24
คัมภีร์เทพ IT
โดยทั่วไปภาษา Programming สมัยใหม่ทุกภาษาจะมี 2 ส่วนหลัก ๆ คือ Lexical Grammar และ Standard Library โดยบทความนี้จะขอกล่าวถึง JavaScript Lexical Grammar Features เป็นหลัก ซึ่งเป็น JavaScript Features ที่ Developers หลายคนยังไม่ค่อยรู้จักมากนัก เรามาดูกันว่ามี Features อะไรบ้าง
1. Tagged Template Literal Functions
ในปัจจุบัน Developers จะใช้ ES6 Template Literals สำหรับการแทรกตัวแปรลงไปใน String-Template ได้เลยแทนที่จะใช้การต่อ String เหมือนที่ทำกันก่อนหน้านี้ Template Literals จะช่วยให้คุณสร้าง Strings ด้วยการ Embed Expressions ภายใน String Segment ด้วย Syntax ที่มีประสิทธิภาพและอ่านแล้วเข้าใจได้ JavaScript Template Literals ยังมีการสนับสนุนการใช้ Tagged Template Functions สำหรับการแยกวิเคราะห์ Template Strings ด้วย Custom Logic
Tagged Template Functions จะช่วยให้ Developers สามารถเข้าถึงบางส่วนของ Template Strings ที่ได้รับการ Evaluate แล้ว ดังนั้น คุณจึงสามารถประมวลผลได้อย่างง่ายดายตามความต้องการในการแยกวิเคราะห์ (Parse) ที่คุณกำหนดขึ้นเองได้ ตัวอย่างเช่น cap Tagged Template Function ต่อไปนี้จะทำให้ทุก Expression Result เป็นตัวพิมพ์ใหญ่:
จาก Code Snippet ข้างต้น คุณสามารถประมวลผล Template Strings ที่ได้รับการ Evaluate ได้โดยใช้ Parameters ที่ส่งไปยัง Tag Function คุณสามารถ Return Objects จาก Tag Functions ได้ ดังนั้น การใช้ Tag Functions สำหรับการแปลงข้อมูลจาก String เป็น Object จึงเป็น Use Case ของ Tagged Template Literal ที่ดีเยี่ยม
Json Tag Function ต่อไปนี้ มีการใช้ Syntactic Approach ที่ดีกว่าสำหรับการแยกวิเคราะห์ JSON Strings:
ในทำนองเดียวกัน คุณสามารถพัฒนา Tags สำหรับการแปลง YAML และ HTML Formats ได้:
zx Library ยอดนิยมของ Google OpenSource ก็ช่วยให้คุณสามารถเขียน Scripts ที่คล้ายกับ Bash ด้วย Node.js โดยใช้ Tagged Template Literals Feature
2. Native Non-Decimal Number Literals
โดยทั่วไป มนุษย์จะทำงานกับระบบเลขทศนิยม (Decimal Number System) ดังนั้น ภาษา Programming ทุกภาษาจึงถือว่า Number Literals เป็นแบบระบบทศนิยม แต่ในบางสถานการณ์ เราก็ต้องใช้ระบบตัวเลขแบบอื่นภายใน Source Codes เช่น เราควรใช้เลขฐานแปดเพื่อเปลี่ยนสิทธิ์การเข้าถึง File System ด้วย Node.js API ดังนั้น ภาษา Programming สมัยใหม่หลาย ๆ ภาษา รวมถึง JavaScript จึงมีการใช้ชุดของ Prefix เพื่อแสดงถึง ตัวอักษรที่ไม่ใช่ระบบทศนิยม (Non-Decimal Number Literals)
มาดูวิธีใช้ตัวอักขระประเภท Binary, Octal และ Hexadecimal พร้อม Prefix มาตรฐานใน JavaScript กัน:
อย่างที่คุณเห็น Non-Decimal Number แต่ละตัวจะถูกแปลงเป็น Decimal Number ทันที ซึ่งหมายความว่า JavaScript จะใช้การรองรับ Non-Decimal Number นี้ ในขณะที่แยกวิเคราะห์ Source File และใช้ Number object ทั่วไปในระหว่าง Runtime
อย่างไรก็ตาม Inbuilt toString() Method และ parseInt() Function จะช่วยให้ Developers ประมวลผล Non-Decimal Number โดยการจัดเก็บพวกมันเป็น Strings:
การใช้ String Format สำหรับการแสดง Binary Numbers ดูจะไม่ใช่ปัญหาใหญ่ แต่การจัดเก็บ Binary Data ขนาดใหญ่ใน Strings ก็ไม่ใช่แนวทางที่เหมาะสมนักในเรื่องของประสิทธิภาพ ดังนั้น คุณจึงสามารถใช้ Typed Arrays แทนได้
3. ป้องกันการแก้ไขปรับเปลี่ยน JavaScript Object ด้วย Object Methods
ตามพื้นฐานแล้ว JavaScript จะไม่ใช้การตรวจสอบที่เข้มงวดกับ Objects ซึ่งมันจะช่วยให้คุณจัดการกับ Objects ใด ๆ ก็ได้ตามที่คุณต้องการ นอกจากนี้คุณยังสามารถจัดการกับ Inbuilt Objects ได้:
ตัวอย่างเช่น คุณสามารถหยุดการทำงานของ Production Website ได้ (สำหรับ Browser Tab ในปัจจุบันเท่านั้น) โดยการ Override ตัว Inbuilt Object Method จาก Browser Console ดังที่แสดงใน Code Snippet ด้านบน
JavaScript จะช่วยให้คุณป้องกันการแก้ไขปรับเปลี่ยน Object ด้วย Object.seal() และ Object.freeze() Methods ตัวอย่างเช่น seal() Method จะป้องกันการเพิ่ม Property ใหม่โดยจะอนุญาตให้สามารถแก้ไข Property Value ที่มีอยู่ได้:
Object.freeze() จะช่วยป้องกันการเพิ่ม Property ใหม่และป้องกันการจัดการ Property ที่มีอยู่ ดังที่แสดงใน Code Snippet ต่อไปนี้:
ตามทั่วไป Objects ที่ผ่านการ Seal และ Freeze แล้ว จะไม่ทำให้เกิด Errors สำหรับ Operations ที่ไม่ถูกต้อง ดังนั้นคุณต้องเปิดใช้งาน JavaScript Strict Mode เพื่อให้สามารถดำเนินการดังกล่าวได้
4. Nested Destructuring and Renaming
ปัจจุบันนี้ Developers มักจะใช้ ES6 Destructuring Feature กับ Objects และ Arrays เนื่องจากอิทธิพลของ Library Tutorials ที่คล้ายกับ React โดย Destructuring Feature จะช่วยให้ Developers สามารถสร้าง Variables/Constants ใหม่ ๆ ได้โดยการดึง Fields จาก Arrays และ Objects ซึ่งโดยพื้นฐานแล้ว Object Destructuring มักจะดึง Properties จาก Property Level แรกดังนี้:
คุณจะทำอย่างไร หากคุณต้องการเปลี่ยนชื่อตัวแปร? จากนั้น คุณสามารถใช้ Destructuring Rename Syntax ได้ดังนี้:
เรามาดูตัวอย่างของ Object Destructuring ขั้น Advance กัน เราสามารถดึงข้อมูลจาก Nested Properties และใช้ Rename Syntax ดังที่แสดงใน Code Snippet ต่อไปนี้:
จากตัวอย่างนี้ เราสร้างตัวแปร 2 ตัว ด้วยการดึง Nested Properties โดยใช้ Destructuring และ Rename Feature ร่วมกัน คุณยังสามารถใช้ Rest Parameters Syntax เพื่อรับ Object Properties ที่ไม่ได้ถูกแยกออกมาใน Destructuring Process ได้อีกด้วย:
จาก ...rest Object ข้างต้น จะเก็บ { Score: 80 } Object ไว้ เนื่องจาก score Property ไม่ได้ถูกแยกออกมาเป็นตัวแปรต่างหาก
5. การใช้ Computed Properties ในการสร้าง Key-Value Object
ในบางสถานการณ์ เราอาจจำเป็นต้องเข้าถึง Object Properties แบบไดนามิกโดยใช้ตัวแปร เราสามารถตั้งค่า/รับ Properties แบบไดนามิกได้อย่างง่ายดายโดยใช้ Brackets Syntax แต่การใช้คำสั่ง set/get ซ้ำหลาย ๆ ครั้ง จะส่งผลต่อความสามารถในการอ่าน Code อย่างไม่ต้องสงสัย
ดู Code Snippet ต่อไปนี้มีการตั้งชื่อ Property โดยใช้ Brackets Syntax:
เราสามารถลดความซับซ้อนของ Function ข้างต้นได้ โดยใช้ Computed Property Syntax ดังที่แสดงในส่วนของ Clean Code ต่อไปนี้:
JavaScript Syntax สมัยใหม่ มีประสิทธิภาพมากขึ้น แม้กระทั่งรองรับ Computed Properties ภายใน Object Destructuring Syntax ดังนั้น คุณจึงสามารถแตก Properties ด้วยชื่อ Property ที่ถูก Generate ขึ้นแบบ Dynamic ได้ ตัวอย่างเช่น Code Snippet ต่อไปนี้ จะค้นหา Score Field ของ Object ที่ต้องการที่ถูกสร้างขึ้นด้วย createElement() Function ในข้างต้น ด้วยการใช้ Object Destructuring พร้อมกับ Computed Property Syntax:
สรุป
และทั้งหมดนี้ก็เป็น JavaScript Features ที่ Developers หลายคนยังไม่ค่อยรู้จัก ซึ่งเชื่อว่า พวกมันจะช่วยให้คุณสามารถเพิ่มประสิทธิภาพในการเขียน Code ด้วยการเขียน Code Blocks ที่ Clean มากยิ่งขึ้น
ที่มา: https://levelup.gitconnected.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด