บทความ IT เจ๋งๆ
9 JavaScript Utility Functions ที่ช่วยให้คุณไม่ต้องติดตั้ง Library เพิ่ม
06-ส.ค.-25
คัมภีร์เทพ IT
หลายครั้งที่เราติดตั้ง JavaScript Library เพียงเพราะต้องการใช้ Functions พื้นฐานบางตัว ทั้งที่จริงแล้ว สิ่งเหล่านี้สามารถเขียนขึ้นได้เองโดยไม่ต้องพึ่งพา Library อื่น ๆ เลย บทความนี้ได้รวบรวม 9 JavaScript Utility Functions ที่ช่วยให้คุณไม่ต้องติดตั้ง Library เพิ่ม และพร้อมนำไปใช้ใน Project ได้ทันที
1. หน่วงการทำงานของ Function (Debounce)
กรณีที่คุณมี Input ที่ผู้ใช้พิมพ์เร็ว ๆ หรือ Scroll Event ที่เกิดขึ้นถี่มาก คุณไม่ควรให้ Function ต้องทำงานในทุกครั้ง เพราะจะทำให้ UI ช้าลงอย่างชัดเจน
เหมาะกับ: Search Bars, Form Validations, การ Resize หน้าต่าง
2. จำกัดการเรียก Function ให้น้อยลง (Throttle)
Throttle ต่างจาก Debounce ตรงที่ มันจะทำให้แน่ใจว่า Function จะทำงานได้มากที่สุดหนึ่งครั้ง ในทุก ๆ X มิลลิวินาที ซึ่งเหมาะสำหรับ Animation ที่ต้องการใช้การ Scroll หรือ Mouse Events
เหมาะกับ: การแสดงผล Scroll Animation, Infinite Scroll
3. Deep Clone โดยไม่ใช้ Lodash
หากคุณเคยเจอ Bug ในกรณีที่แก้ Object หนึ่งแล้วอีก Object เปลี่ยนตาม นั่นเป็นเพราะ JavaScript จะมีการส่งค่าด้วย Reference วิธีง่ายที่สุดในการแก้ไขก็คือ Deep Clone
ข้อจำกัด: วิธีนี้จะ Clone ได้เฉพาะข้อมูลที่เป็น JSON เท่านั้น แต่จะไม่รองรับการ Clone Function หรือ Object ที่มีการอ้างอิงถึงตัวมันเอง (Circular Reference)
4. จัดกลุ่ม Array Items ตาม Key
การจัดกลุ่มข้อมูลตาม Key เป็นสิ่งที่พบได้บ่อยในการสร้าง Dashboard, หรือการจัด Report เป็นต้น
ผลลัพธ์:
5. ทำให้ตัวอักษรตัวแรกเป็นตัวพิมพ์ใหญ่
แม้จะดูเป็นเรื่องเล็กน้อย แต่การจัดการข้อความให้มีรูปแบบที่สม่ำเสมอจะช่วยให้ UI ดูน่าเชื่อถือและสอดคล้องกันมากขึ้น
เหมาะกับ: Input Validation หรือ Dynamic Labels
6. กระจาย Array ที่ซ้อนหลายชั้นให้อยู่ในระดับเดียว
คุณเคยดึงข้อมูลจาก API แล้วได้ [1, [2, [3, [4]]]] บ้างไหม? วิธีนี้ช่วยแก้ปัญหาได้
7. ลบค่าที่ซ้ำกันใน Array
การลบข้อมูลที่ซ้ำกัน เป็นปัญหาที่มักพบได้บ่อย ๆ เมื่อต้องจัดการกับ API Responses
สำหรับ Objects คุณสามารถใช้ uniqueByKey ได้:
8. เข้าถึงข้อมูลแบบปลอดภัย
แทนที่จะเขียน user && user.address && user.address.city ด้านล่างนี้ คือวิธีที่ง่ายกว่า
9. สร้าง ID แบบสุ่ม
มันเหมาะกับ Temporary Keys, Component IDs หรือ Unique Names
สรุป
และนี่ก็คือ 9 Utility Functions ของ JavaScript ที่ช่วยให้คุณไม่ต้องติดตั้ง Library เพิ่มอีกต่อไป ลองเลือกสัก Function จากบทความนี้ แล้วลองเขียนขึ้นมาใช้เองใน Project ดู เพราะการเขียนเองเพียงครั้งเดียว จะช่วยให้ประหยัดทั้งเวลาและขนาดไฟล์ในระยะยาวได้
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด