ฟังก์ชั่นการแกงใน JavaScript

Nov 27 2022
ทำความเข้าใจเกี่ยวกับจาวาสคริปต์();
นำภาชนะ, เติมน้ำ, เพิ่มบรรทัดรหัส, ใส่ใบแกงและมาซาล่า (ตามรสนิยมของคุณ), ปรุงอาหารด้วยไฟอ่อน ๆ เป็นเวลา 25 นาที และนี่คือฟังก์ชั่นการปั่นพร้อมเสิร์ฟในการผลิต . ล้อเล่น บอยส์กับโกล

นำภาชนะ, เติมน้ำ, เพิ่มบรรทัดรหัส, ใส่ใบแกงและมาซาล่า (ตามรสนิยมของคุณ), ปรุงอาหารด้วยไฟอ่อน ๆ เป็นเวลา 25 นาที และนี่คือฟังก์ชั่นการปั่นพร้อมเสิร์ฟในการผลิต . ล้อเล่น บอยส์กับโกล

Helloooo ผู้พัฒนา JS กลับมาแล้วกับประเด็นร้อนแรง “Function Currying”

เรื่องนี้ครอบคลุม:

  • การแกงคืออะไร ทำงานอย่างไร และทำไมจึงใช้

เรื่องราวเริ่มต้นที่นี่

ฟังก์ชั่นแกงคืออะไร?

การแกงคือการแปลงฟังก์ชันที่รับอาร์กิวเมนต์หลายตัว [ตัวอย่าง: functionName(a, b,c)] เป็นหลายฟังก์ชันที่รับอาร์กิวเมนต์เดียวในลำดับ

โอเค โอเค.. ฉันรู้ว่ามันฟังดูสับสน (สับสน) และปฏิกิริยาของฉันก็เหมือนเดิมเมื่อฉันอ่านสิ่งนี้เป็นครั้งแรก

โอเค ให้เราเข้าใจง่ายๆ ฟังก์ชัน (doSum) ที่ใช้ args ทั้งหมดในช็อตเดียว เช่น doSum(a, b, c) [ตัวอย่างด้านล่าง: ฟังก์ชันการบวกปกติ

ฟังก์ชั่นการบวกปกติ

ถูกแปลงเป็นหลายฟังก์ชัน (addNumbers(a), (b), (c)) ที่รับอาร์กิวเมนต์เดียวในแต่ละครั้งในลำดับ

หมายเหตุ: ฟังก์ชัน (จุดประสงค์) ของทั้ง 2 ฟังก์ชันเหมือนกัน เพียงแต่เปลี่ยนชื่อเพื่อความเข้าใจที่ดีขึ้น

ฟังก์ชั่นการแกง

นี่คือฟังก์ชั่นการแกงตามgeeks for geeks :

เป็นเทคนิคหนึ่งในการเขียนโปรแกรมเชิงฟังก์ชัน การแปลงฟังก์ชันของอาร์กิวเมนต์หลายตัวเป็นฟังก์ชันหลายฟังก์ชันของอาร์กิวเมนต์เดียวตามลำดับ

พูดง่ายๆ ก็คือ ฟังก์ชันแทนที่จะรับอาร์กิวเมนต์ทั้งหมดพร้อมกัน ฟังก์ชันรับอาร์กิวเมนต์แรกแล้วส่งกลับฟังก์ชันที่รับอาร์กิวเมนต์อื่น จากนั้นจึงส่งกลับฟังก์ชันอื่นที่รับอาร์กิวเมนต์ที่สาม ไปเรื่อยๆ จนกว่าอาร์กิวเมนต์ทั้งหมดจะครบ ถ่าย (ตัวอย่างในภาพชื่อ: function currying)

แกงกะหรี่ทำงานอย่างไร?

การ curing ในจาวาสคริปต์อาจเข้าใจยากสักหน่อยเนื่องจากเป็นจาวาสคริปต์

แต่ลองมาดูกันดีกว่า ด้านล่างนี้เป็นตัวอย่างของฟังก์ชันง่ายๆ

ฟังก์ชั่นง่ายๆ

ที่นี่ ฟังก์ชัน "doSum" เพิ่มอาร์กิวเมนต์ที่กำหนดและส่งคืนผลรวมของอาร์กิวเมนต์ทั้งหมดที่ส่งผ่าน

ด้านล่างเป็นฟังก์ชันเดียวกันในเวอร์ชันแกงกะหรี่ (เพิ่งเปลี่ยนชื่อเพื่อความเข้าใจที่ดีขึ้น)

ผลลัพธ์ของฟังก์ชันด้านบนและด้านล่างจะเหมือนกัน 18

addNumbers เป็นเวอร์ชันเคอร์รี่ของฟังก์ชัน doSum ข้างต้น addNumber ฟังก์ชันพาเรนต์รับอาร์กิวเมนต์ เช่น 5 ในกรณีของเรา และส่งคืนฟังก์ชันนิรนามอีกฟังก์ชันหนึ่งซึ่งรับอาร์กิวเมนต์อื่น เช่น 6 ในกรณีของเรา และกระบวนการจะดำเนินต่อไปจนกว่าพารามิเตอร์ทั้งหมดจะถูกส่งผ่าน ฟังก์ชันนิรนามสุดท้ายจะคืนค่าหลังจากประมวลผลอินพุตทั้งหมด

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

คุณสามารถแกงฟังก์ชันของคุณได้ 2 วิธี ใช้ฟังก์ชันผูก และปิด มาดูกันว่าหน้าตาเป็นอย่างไร

ฟังก์ชั่นการแกงโดยใช้ฟังก์ชั่นการผูก

หากคุณไม่ทราบว่าฟังก์ชันการผูกคืออะไรตรวจสอบเรื่องราวของฉัน

ในตัวอย่างด้านบนนี้ เรากำลังใช้ฟังก์ชันการผูกของจาวาสคริปต์ และการใช้ฟังก์ชันการผูก เราจะใช้ฟังก์ชัน “onBoardUser”

basicCompanyDetails นั้นคล้ายคลึงกันสำหรับผู้ใช้ที่เข้าร่วมทั้งหมด ดังนั้นเราต้องการทำให้รายละเอียดตามค่าเริ่มต้นพร้อมใช้งานสำหรับผู้ใช้ทุกคนที่เข้าร่วม ที่นี่เรากำลังส่งอาร์กิวเมนต์ “basicCompanyDetails” ไปยังฟังก์ชันการผูกและสร้างอินสแตนซ์ของ “onBoardUser” ที่นี่ ฟังก์ชันการผูกจะส่งคืนฟังก์ชันที่คุณสามารถจัดเก็บไว้ ณ ที่ใดที่หนึ่งในหน่วยความจำและดำเนินการในภายหลัง ที่นี่เรากำลังจัดเก็บฟังก์ชันนี้ใน addUser และเรากำลังเรียกใช้สำหรับผู้ใช้ทั้งหมด

นี่คือวิธีที่คุณสามารถแกงฟังก์ชันของคุณโดยใช้ฟังก์ชันผูกในจาวาสคริปต์ ตัวอย่างเพิ่มเติมในภาพด้านล่าง

คุณยังสามารถส่งทั้งสอง params ในขณะที่เรียกใช้เมธอด addUserToSales ซึ่งจะให้ผลลัพธ์ที่เหมือนกัน

ฟังก์ชั่นแกงโดยใช้การปิด

การปิดเป็นแนวคิดทั่วไปแต่ยุ่งยากในจาวาสคริปต์ แต่ไม่ได้กล่าวถึงมากนัก คุณสามารถอ่านเกี่ยวกับการปิดได้ ที่นี่

ลองใช้ฟังก์ชั่นการแกงโดยใช้การปิด

ในตัวอย่างข้างต้น เราได้สร้างฟังก์ชัน “onBoardUser” ที่รับหนึ่งอาร์กิวเมนต์และส่งคืนฟังก์ชันที่ไม่ระบุตัวตนอีกอันที่รับอาร์กิวเมนต์อื่น สรุปรายละเอียด และส่งกลับ

เรากำลังเรียกใช้ฟังก์ชัน “onBoardUser” ด้วยอาร์กิวเมนต์เดียว เช่นaccountDepartmentDetailsและจัดเก็บไว้ในตัวแปร (โปรดจำไว้ว่า onBoardUser ส่งคืนฟังก์ชัน) ดังนั้นเราจึงจัดเก็บฟังก์ชันไว้ในตัวแปรaddUsertoAccountsและตอนนี้ตัวแปรก็มีฟังก์ชันที่สามารถเรียกใช้ได้ทุกเมื่อด้วย อาร์กิวเมนต์ที่ร้องขอ เราจึงเรียกใช้ฟังก์ชันนิรนาม (ส่งคืนโดย onBoardUser) ที่จัดเก็บไว้ในaddUsertoAccountsพร้อมอาร์กิวเมนต์ (รายละเอียดผู้ใช้ เช่น detailsOfJohn)

เมื่อเรียกใช้ฟังก์ชันแล้ว ฟังก์ชันจะเสร็จสิ้นการดำเนินการของคำสั่งที่อยู่ภายในและพิมพ์ผลลัพธ์ออกมา

หากมีการเรียกใช้ฟังก์ชันหลังจากโค้ด 10k บรรทัดด้วย ฟังก์ชันจะพิมพ์เอาต์พุตเดียวกัน เนื่องจากเป็นการปิด และจดจำขอบเขตคำศัพท์ของมัน

การดัดผมด้วย ES6:

การแกงโดยใช้ ES6

นี่คือวิธีที่คุณสามารถใช้ฟังก์ชั่นการแกงด้วยการปิดใน JS

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

สิ่งนี้น่าจะตอบข้อสงสัยเหล่านั้นได้

ทำไมถึงใช้

ทำไม ทำไม ทำไม

  • การแกงเป็นเทคนิคที่แบ่งฟังก์ชันออกเป็นฟังก์ชันย่อยๆ แต่ละฟังก์ชันมีหน้าที่ของตัวเอง และทำให้ฟังก์ชันของคุณบริสุทธิ์และมีแนวโน้มที่จะเกิดข้อผิดพลาดและผลข้างเคียงน้อยลง
  • ตัวอย่าง: ฟังก์ชันแรกตรวจสอบรายละเอียดผู้ใช้ ฟังก์ชันที่สองตรวจสอบรายละเอียดบริษัท ฯลฯ
  • ใช้ในการเขียนโปรแกรมเชิงฟังก์ชันเพื่อใช้ฟังก์ชันลำดับที่สูงกว่า
  • มันช่วยให้คุณรักษารหัสของคุณให้สะอาดและเป็นระเบียบ
  • นอกจากนี้ คุณสามารถใช้การแกงเป็นกลไกที่ช่วยให้คุณตรวจสอบว่าคุณมีทุกอย่างครบก่อนดำเนินการต่อ
  • ตัวอย่าง: แต่ละฟังก์ชันที่ซ้อนกันจะไม่ได้รับการดำเนินการหากไม่ได้รับอาร์กิวเมนต์ที่จำเป็น