COOL IT IDEAS AND STUFF
15 Advanced JavaScript Techniques That Will Transform Your Code Instantly
11-Sep-24
คัมภีร์เทพ IT
See the original english version Click here!
JavaScript มี Features รวมทั้งเทคนิคทั้งพื้นฐานและขั้นสูงมากมาย ที่จะช่วยเพิ่มทักษะการเขียน Code และเพิ่มประสิทธิภาพการใช้งานของคุณได้อย่างมาก ซึ่งบทความนี้จะมาแนะนำ 15 เทคนิค JavaScript ที่จะเปลี่ยนแปลง Code ของคุณให้ดีขึ้น
1. Destructuring Assignment
การ Destructuring จะช่วยให้คุณสามารถแยก Properties ของ Objects และ Elements ออกจาก Arrays แล้วเก็บไว้ในตัวแปรที่แยกมาต่างหาก
ตัวอย่าง:
2. Rest และ Spread Operators
Rest Parameters จะช่วยให้คุณสามารถรับ Parameters ได้ไม่จำกัดจำนวนไปอยู่ในรูปแบบของ Array ส่วน Spread Operator จะช่วยให้สามารถแยกข้อมูลใน Array หรือ Object เพื่อนำไปใช้ต่อที่อื่นได้อีก
ตัวอย่าง:
3. Arrow Functions
Arrow Functions มี Syntax ที่สั้นกว่าสำหรับการเขียน Function Expressions และไม่มี ‘this’ Context ของตัวเอง
ตัวอย่าง:
4. Default Parameters
Default Parameters จะช่วยให้ Parameter ที่ระบุค่าไว้แล้ว สามารถถูกกำหนดให้เป็นค่าเริ่มต้น (Default Value) ได้ หากไม่มีการส่ง Value หรือส่งค่า ‘undefined’ เข้ามา
ตัวอย่าง:
5. Template Literals
Template Literals จะช่วยให้สามารถ Embed Expressions ได้ ซึ่งจะทำให้การแทรกตัวแปรลงไปใน String สามารถอ่านง่ายขึ้นและมีประสิทธิภาพมากขึ้น
ตัวอย่าง:
6. Object Property Shorthand
กรณีที่ชื่อ Property และชื่อ Variable เหมือนกัน คุณสามารถใช้ Shorthand Syntax ได้
ตัวอย่าง:
7. Computed Property Names
Computed Property Names จะช่วยให้คุณสามารถตั้งชื่อ Property ของ Object ได้แบบ Dynamic
ตัวอย่าง:
8. Promises และ Async/Await
Promises แสดงถึง ความสำเร็จ (หรือส้มเหลว) ของ Asynchronous Operation และ async / await Syntax จะช่วยให้คุณเขียน Code แบบ Asynchronous ได้เหมือนกับการเขียน Code แบบ Synchronous
ตัวอย่าง:
9. Modules (ES6 Import/Export)
Modules จะช่วยให้คุณแบ่ง Code ของคุณออกเป็น File ย่อย ๆ และ Import / Export ได้ตามต้องการ
ตัวอย่าง:
// module.js
10. Optional Chaining
Optional Chaining จะช่วยให้คุณเข้าถึง Nested Properties ที่ซ้อนกันหลายชั้นได้อย่างปลอดภัย โดยที่ไม่ต้องตรวจสอบว่าเป็น null หรือ undefined
ตัวอย่าง:
11. Nullish Coalescing Operator
Nullish Coalescing Operator (??) จะช่วยให้คุณกำหนดค่าเริ่มต้น (Default Value) ได้ เมื่อต้องจัดการกับ null หรือ undefined
ตัวอย่าง:
12. Enhanced Object Literals
ES6 ได้มีการแนะนำ Shorthand Notations หลายรูปแบบ เพื่อให้ Object Literal มีความกระชับยิ่งขึ้น
ตัวอย่าง:
13. Array Methods: Map, Filter, Reduce
Map, Filter และ Reduce จะช่วยให้คุณสามารถจัดการ Array ได้อย่างมีประสิทธิภาพมากขึ้น
ตัวอย่าง:
14. Symbol
Symbols เป็น Data Types ที่ Unique และ Immutable ซึ่งสามารถใช้เป็น Key สำหรับ Object Properties ได้
ตัวอย่าง:
15. Proxy
Proxies จะช่วยให้คุณสร้าง Wrapper สำหรับ Object อื่นได้ เพื่อดักจับและกำหนด Operations พื้นฐานใหม่ได้
ตัวอย่าง:
สรุป
และนี่ก็เป็น 15 เทคนิค JavaScript ขั้นสูง ที่จะเปลี่ยนแปลง Code ของคุณให้ดีขึ้น การที่คุณ เชี่ยวชาญทางด้านเทคนิคของ JavaScript ขั้นสูงเหล่านี้ จะช่วยให้คุณเขียน Code ได้ Clean ขึ้น มีประสิทธิภาพมากขึ้น และ Maintain ได้ง่ายขึ้น ลอง Integrate Features เหล่านี้เข้ากับ Project ของคุณ และสังเกตความเปลี่ยนแปลงในความสามารถในการเขียน Code ของคุณดู
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด