คัมภีร์เทพ IT 14 JavaScript Functions ที่คุณควรรู้จัก

14 JavaScript Functions ที่คุณควรรู้จัก

07-ก.พ.-20

คัมภีร์เทพ IT

บทความนี้เป็น 14 JavaScript Functions ที่คุณควรรู้จัก ซึ่งคุณสามารถใช้พวกมันในการทำงาน และหากคุณกำลังจะไปสัมภาษณ์งาน Function เหล่านี้ก็มีประโยชน์อย่างยิ่งที่คุณควรเตรียมพร้อมและทำความรู้จักกับ Function เหล่านี้

1. Determine the specific type of any object

อย่างที่เราทราบกันดีอยู่แล้วว่า JavaScript มี 5 Primitive Data Types และ Object Data Type ซึ่ง Object Data Type ก็ยังสามารถแบ่งออกเป็นหลายประเภทย่อย ๆ ได้อีก โดยที่ Object นั้นเป็นได้ทั้ง Array, Function, Map รวมทั้งอื่น ๆ หากเราต้องการรู้ Type ของ Object เราควรทำอย่างไร

Code:

คำอธิบาย:

ECMAScript มีกฎดังต่อไปนี้:

สำหรับ Object ที่แตกต่างกัน ผลลัพธ์ที่ได้ก็ย่อมแตกต่างกันด้วย เมื่อเรียก Object.prototype.toString()

นอกจากนี้ ค่าที่ Return กลับมาของ Object.prototype.toString() จะอยู่ใน Format ของ ‘[object’ + ‘tag’ + ‘]’ เสมอ หากเราต้องการเฉพาะแค่ Tag ที่อยู่ตรงกลาง เราสามารถลบ Characters ทั้งสองด้านโดยใช้ Regular Expression หรือ String.prototype.slice()

ตัวอย่าง:

2. Caching function calculation results

หากเรามี Function แบบด้านล่างนี้:

เราต้องการที่จะเก็บผลลัพธ์ของการทำงานของ Function เมื่อมีการถูกเรียกใช้ในภายหลังซึ่งหากเป็น Parameter ที่เหมือนกัน Function จะไม่ถูก Execute แต่ผลลัพธ์ใน Cache จะถูก Return กลับมาแทน แล้วเราจะทำอย่างไรดี?

Code:

ตัวอย่าง:

สำหรับข้อ 3 – 7 ถือเป็น Built-in Method ใน JavaScript ที่มีประโยชน์มาก และคุณควรจะลองนำ Function เหล่านี้ไปประยุกต์ใช้กับงานของคุณด้วยตัวเอง

3. Implement Array.prototype.map

Code:

ตัวอย่าง:

4. Implement Array.prototype.filter

Code:

ตัวอย่าง:

5. Implement Array.prototype.some

Code:

ตัวอย่าง:

6. Implement Array.prototype.reduce

Code:

ตัวอย่าง:

7. Implement Array.prototype.flat

Code:

ตัวอย่าง:

8. Curry

Currying เป็นเทคนิคการ Evaluate Function ที่มี Arguments หลายตัว ลงใน Function ที่มี Argument เดียว

กล่าวอีกนัยหนึ่ง เมื่อ Function (ซึ่งแทนที่จะรับ Argument ทั้งหมดเข้ามาในคราวเดียว) ทำการรับ Argument แรกเข้ามา ก็จะ Return Function ใหม่กลับไปโดยใช้ Argument ตัวที่สอง ซึ่งจะ Return Function ใหม่กลับไปโดยใช้ Argument ตัวที่สาม และทำต่อไปเรื่อย ๆ จนกระทั่งครบทุก Arguments

นั่นคือเมื่อเราเปลี่ยนการเรียก Function จาก add(1, 2, 3) ไปเป็น add(1) (2) (3) ซึ่งการใช้เทคนิคนี้ จะมีบางส่วนที่สามารถถูก Configured และนำมา Reuse ได้ง่ายขึ้น

ทำไม Function นี้ถึงมีประโยชน์

Curry ช่วยให้คุณหลีกเลี่ยงการส่งผ่านตัวแปรเดิมซ้ำ ๆ
มันเป็นการช่วยสร้าง Higher-order Function (ส่ง Function เป็น Parameter(s) ของ Function ได้ รวมทั้งสามารถถูก Return ออกมาจาก Function ได้) ซึ่งมีประโยชน์อย่างมากในการจัดการ Event
มีบางส่วนที่สามารถถูก Configured และนำมา Reuse ได้อย่างง่ายดาย

กลับมาดูที่ Function add กัน มันรับเอา 3 Operands เป็น Argument และจะ Return ผลรวมของทั้ง 3 ตัว กลับมาเป็นผลลัพธ์

คุณสามารถเรียกใช้มันด้วยจำนวน Argument ที่น้อยกว่าก็ได้ หรือมากกว่าก็ได้ (แต่ Argument ส่วนเกินจะไม่ถูกนำไปใช้)

แล้วเราจะแปลง Function ดังกล่าว ไปเป็นแบบ Curry ได้อย่างไร

Code:

ตัวอย่าง:

9. Debouncing

Debouncing จะช่วยลดเวลาที่ใช้ในการคำนวณโดยไม่จำเป็นเพื่อเพิ่มประสิทธิภาพของ Browser มีบางสถานการณ์ที่บาง Function จะใช้เวลาในการ Execute Operation บางอย่างที่มากกว่าปกติ ตัวอย่างเช่น การใช้ Search Bar ใน E-Commerce Website

สมมติว่า เมื่อ User ต้องการค้นหา “Tutorix study kit” พวกเขาก็จะพิมพ์ตัวอักษรทุกตัวของ Product ใน Search Bar หลังจากพิมพ์ตัวอักษรแต่ละตัวจะมีการเรียก Api จาก Browser ไปยัง Server เพื่อดึง Product ที่ต้องการออกมา เนื่องจาก User ต้องการ“ Tutorix study kit” ดังนั้น พวกเขาจะต้องเรียก Api ถึง 17 ครั้งจาก Browser ไปยัง Server แล้วลองนึกถึงสถานการณ์ที่เมื่อผู้คนมากมายนับแสนนับล้าน ทำการ Search แบบเดียวกันนี้ แน่นอนว่าอาจมีการเรียก Api เป็นพันล้านครั้ง ดังนั้น การเรียก Api เป็นพันล้านครั้งนี้ จะทำให้ประสิทธิภาพของ Browser ช้าลงอย่างแน่นอน และเพื่อลดข้อเสียในเรื่องนี้ Debouncing จะเป็นตัวช่วยแก้ไขปัญหา

ในสถานการณ์นี้ Debouncing จะทำการกำหนดช่วงเวลาขึ้นมา (สมมติว่า 2 วินาที) ในระหว่างการกดแป้น Keyboard 2 ครั้ง หากระยะเวลาระหว่างการกดแป้น Keyboard 2 ครั้ง ห่างกันเกิน 2 วินาที ถึงจะมีการเรียก Api เท่านั้น บางทีในช่วง 2 วินาทีนั้น User อาจจะพิมพ์ตัวอักษรอย่างน้อยสักตัว ซึ่งเป็นการช่วยลดการเรียก Api ได้ เนื่องจากการเรียก Api ลดลง จึงทำให้ประสิทธิภาพ Browser เพิ่มขึ้น สิ่งที่เราต้องใส่ใจก็คือ Debouncing Function จะ Update ทุกครั้งที่มีการกดแป้น Keyboard

Code:

10. Throttling

Throttling จะสร้าง Version ของ Function ที่เมื่อมีการเรียกใช้งานซ้ำ ๆ มันจะเรียกใช้ Original Function ครั้งเดียวสำหรับทุก ๆ 1,000 มิลลิวินาที มันใช้สำหรับการจำกัด Event ที่เกิดขึ้นแบบเร็ว ๆ และจำนวนมาก

Code:

11. Lazy Load Images

Lazy Loading Images หมายถึงการ Loading รูปภาพ บน Websites แบบ Asynchronous นั่นคือ มันจะ Load รูปภาพเฉพาะเมื่อพวกมันปรากฏอยู่ใน Viewport ของ Browser เท่านั้น ซึ่งหมายความว่า หาก User ยังไม่เลื่อนหน้าจอลงมาด้านล่าง รูปภาพที่อยู่ด้านล่างของหน้าจอ ก็จะยังไม่ถูก Load ขึ้นมา

Code:

12. Array random disorder

บ่อยครั้งที่เราอาจต้องทำการปรับเปลี่ยนใน Array

Code:

ตัวอย่าง:

13. Singleton

Singleton Pattern จะจำกัด จำนวน Instance ของ Object ให้มีแค่เพียงตัวเดียวเท่านั้น ซึ่ง Instance ตัวเดียวนี้ จะเรียกว่า Singleton

Singletons มีประโยชน์อย่างมากในสถานการณ์ที่ การดำเนินการทั่วทั้งระบบจำเป็นต้องประสานงานกันจากจุดศูนย์กลางเดียว อย่างเช่น Database Connection Pool ซึ่ง Pool จะจัดการในเรื่องการ Create, Destruct และอายุการใช้งานของ Database Connection ทั้งหมดสำหรับ Application เพื่อให้แน่ใจว่า Connection นั้นจะทำงานอย่างต่อเนื่องตลอดเวลา

Singletons ช่วยลดการใช้ Global Variables ซึ่งมีความสำคัญอย่างยิ่งใน JavaScript โดยจะช่วยลดปัญหาเรื่อง Namespace Pollution รวมทั้ง Name Collisions

Code: