Trong bài viết này mình sẽ ôn lại concept function hay dùng trong React nhé
I/ Đầu tiên hay dùng nhất là Callback function. Nó chỉ là function truyền vào function khác như là 1 tham số thôi nên họ gọi là Callback function
|
1 2 3 4 5 6 7 |
const nums = [1,2,3,4,5] const callBack = (item, index) => { console.log(`STT: ${index} là ${item}`) } nums.forEach(callBack) |
Như mình demo ở trên thì biến callBack đóng vai trò như là 1 tham số trong hàm forEach và nó là 1 function nên nó được gọi là Callback function
II/ Thứ 2 sẽ ngày đầu tuần 😁. Zui thôi chớ thứ là là Currying function . Nó là 1 function return về 1 function
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Ví dụ 1 function findNumber(num) { return function () { return num } } console.log(findNumber(10)()) // Ví dụ 2 const findNumber = (num) => { return (func) => { const result = [] for (let i = 0; i < num; i++) { if (func(i)) { result.push(i) } } return result } } findNumber(20)((number) => number % 2 === 0) |
findNumber gọi là currying function vì nó return một function mới. Vậy nên chúng ta phải () 2 lần thì nó mới chạy hết code trong nó được.
Chúng ta gọi findNumber(10) thì nó mới chỉ return về 1 function chưa chạy code bên trong function đó. Mình phải chạy nó thêm 1 lần nữa thì nó mới chạy function trong.
Mà function bên trong là function điều kiện nên mình sẽ dùng (number => number % 2 === 0) sẽ trả về những kết là số chẵn.
Hoặc mình có thể gọi bằng cách sau
|
1 2 3 4 5 6 7 8 |
// TH1 const newFunc = findNumber(10) const value2 = newFunc((value) => value ) // TH2 const newFunc = findNumber(10) const value2 = newFunc((value) => value % 2 === 0) console.log(value2) |
newFunc sẽ return về 1 function rồi thì mình có thể sử dụng cái newFunc để xử lý tiếp hehe
Chúc bạn new day zui zẻ keke 😘