20 เคล็ดลับ JavaScript ที่คุณสามารถนำไปประยุกต์ใช้ได้

08-พ.ย.-23

คัมภีร์เทพ IT

JavaScript ซึ่งเป็นสิ่งที่ทำให้ Website สามารถโต้ตอบได้มากขึ้น มีเคล็ดลับที่ช่วยให้การเขียน Code ของคุณราบรื่นและสนุกสนานยิ่งขึ้น และบทความนี้ก็เป็น 20 เคล็ดลับ JavaScript ที่คุณสามารถนำไปประยุกต์ใช้ได้ ดังนั้น เรามาเจาะลึกและยกระดับทักษะ JavaScript กันเถอะ

1. Destructuring: แยกค่าต่าง ๆ ได้อย่างง่ายดาย

การ Destructuring จะช่วยทำให้คุณสามารถ Unpack ค่าจาก Arrays หรือ Objects ได้อย่างง่ายดาย และนี่คือตัวอย่าง:

2. Spread: Clone Arrays และ Merge Objects

Spread Operator (`...`) ช่วยให้คุณสร้างสำเนาของ Arrays และ Merge Objects ได้อย่างง่ายดาย:

การ Merge Objects:

3. `map()`: สามารถ Transform ได้อย่างง่ายดาย

`map()` Method เป็นอาวุธลับของคุณในการช่วย Transform Data:

4. Short-circuit ด้วย `&&` และ `||`: Conditionals ที่ยอดเยี่ยม

ใช้ `&&` และ `||` เพื่อสร้าง Condition กระชับและชัดเจนมากขึ้น:

5. `setTimeout()`: สร้างลำดับของ Delayed Actions ได้

Chaining `setTimeout()` จะช่วยสร้างลำดับของ Delayed Actions ได้:

6. Arrow Functions: มีความกระชับและทรงพลัง

Arrow functions (`() => {}`) ไม่เพียงแต่มีความกระชับเท่านั้น แต่ยังช่วยรักษาค่าของ `this` ไว้ด้วย:

7. `Promise.all()`: จัดการกับหลาย ๆ Promises

คุณสามารถ Combine หลาย ๆ Promises และจัดการพวกมันโดยใช้ `Promise.all()` ได้:

8. Dynamic Property Names: Object Keys ที่เอนกประสงค์

คุณสามารถใช้ตัวแปรเป็น Object Property Names ได้ โดยใช้ Square Brackets:

9. Template Literals: การจัด Format ของ String

Template Literals (`${}`) ช่วยให้คุณสามารถ Embed Expressions ใน Strings ได้:

10. การตรวจสอบ NaN: ทางเลือกที่ปลอดภัยยิ่งขึ้น

คุณสามารถใช้ `Number.isNaN()` เพื่อตรวจสอบว่า ค่านั้นเป็น NaN หรือไม่:

11. Optional Chaining (`?.`): จัดการกับ Undefined Values

คุณสามารถหลีกเลี่ยงการเกิด Errors ด้วย Optional Chaining เมื่อต้องจัดการกับ Nested Properties:

12. Regex Revival: Mastering Patterns

Regular Expressions (`RegExp`) เป็นเครื่องมือที่มีประสิทธิภาพสำหรับ Pattern Matching:

13. JSON.parse() Reviver: Transform Parsed Data

`reviver` Parameter `JSON.parse()`ช่วยให้คุณ Transform Parsed Data ได้:

14. เคล็ดลับการใช้ Console Tricks: ทำให้ง่ายต่อการ Debug

คุณสามารถทำอะไรที่มากกว่า `console.log()` ด้วย `console.table()` และ `console.groupCollapsed()`:

15. ทำการ Fetch ด้วย `async`/`await`

การใช้ `async`/`await` กับ `fetch()` จะช่วยลดความยุ่งยากในการจัดการกับ Asynchronous Requests ได้:

16. Closures ช่วยให้สร้าง Private Variables: Data Privacy

Closures จะช่วยให้คุณสามารถสร้าง Private Variables ใน Functions ได้:

17. Memoization ช่วยเพิ่มความเร็ว: เพิ่มประสิทธิภาพในเรื่อง Recalculation

Memoization จะสามารถเก็บ Function Results เพื่อช่วยปรับปรุงในเรื่อง Performance ได้:

18. Intersection Observer: ช่วยให้ Scroll Effects ทำได้ง่ายขึ้น

คุณสามารถใช้ Intersection Observer API สำหรับ Lazy Loading และ Scroll Animations ได้:

19. ES6 Modules เพื่อ Clean Code: Organized และ Modular

ใช้ ES6 Modules เพื่อ Code ที่ Clean และแยกเป็น Module:

20. Proxies: Beyond Objects

Proxies จะช่วยให้คุณสามารถห่อหุ้ม Object ไว้และสามารถใช้มันเพื่อตรวจสอบข้อมูลได้:

และทั้งหมดนี้ก็เป็น 20 เคล็ดลับ JavaScript ที่คุณสามารถนำไปประยุกต์ใช้ได้ ซึ่งเชื่อว่าหากคุณได้ลองนำเทคนิคเหล่านี้ไปใช้งาน จะช่วยให้คุณทำงานสะดวกและสนุกยิ่งขึ้น

ที่มา: https://medium.com/

 

 

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

 

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

เพิ่มเพื่อน

 

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