Khai báo Function trong JavaScript dẫu rằng đơn giản nhưng bạn đã biết hết chưa? Sau đây là một số kiểu khai báo trong JavaScript sẽ khiến bạn ngạc nhiên!
1. Function declaration
function add(a, b) {
return a + b;
}
add(1, 2); // 3
Đây là kiểu khai báo đơn giản nhất mà bạn chắc chắn sẽ biết. Đây là một loại Function mỳ ăn liền - gọi là chạy!
2. Function expression
let add = function (a, b) {
return a + b;
}
add(1, 2) // 3
Cũng là một kiểu khai báo function thường thấy trong JavaScript. Tuy nhiên, bạn chỉ sử dụng được khi đã khai báo nó
3. IIFE (viết tắt của Immediately-invoked function expression)
(function(a, b) {
return a + b;
})(1, 2) // 3
Cái này mới đúng không?? Đây là cách để định nghĩa anonymous function (mấy thằng phía trên nhân gian gọi là named function)
Nhìn chung, IIFE rất dễ khai báo. Nó bao gồm 2 dấu ()(), () thứ nhất sẽ chứa phần thân function, () thứ hai sẽ chứa các parameters để truyền vào function bên trong dấu () thứ nhất
Câu hỏi là: để làm gì zậy ba??? Bạn sẽ cần đến IIFE trong một số trường hợp sau đây:
- Dùng nó trong trường hợp nấu mì ăn liền, thực thi code trong function một cách tự động (nghĩa là ưng chạy cái gì thì cứ bọc nó trong IIFE)! Bạn thử đoán 2 đoạn code sau nó sẽ ra cái gì nhé!
// Một trong những câu hỏi của Google và Amazon áp dụng khi tuyển nhân sự
const arr = [1, 2, 3, 4];
for (var i = 0; i < arr.length; i++) {
setTimeout(function() {
console.log(i);
}, 3000)
} // output sẽ là gì??
// 2
const arr = [1, 2, 3, 4];
for (var i = 0; i < arr.length; i++) {
(function (i) {
setTimeout(function() {
console.log(i);
}, 3000)
})(i)
} // output sẽ là gì??
- Giảm thiểu memory leak! Mọi biến trong IIFE sẽ được GC (garbage collection) dọn khi ra khỏi scope của nó.
Để giúp các bạn hiểu rõ hơn thì memory leak là hiện tượng rò rỉ bộ nhớ khi thực thi chương trình, các vùng nhớ bị rò rỉ sẽ thất thoát và không được giải phóng cho các chương trình khác sử dụng
4. Closure function
Lang thang đâu đó trong đống code JS trên Github bạn sẽ gặp dòng code sau đây:
const a = add(1, 2)();
// Hoặc ghê hơn
const b = add(1, 2)()();
Bạn sẽ thốt lên “wtf!! Cái gì đây?” Thực ra nó là 1 inner function nằm trong một function khác (gọi là outer function). Trong trường hợp này outer function return về một inner function, và để function này chạy được bạn phải thêm cặp dấu (). Theo dõi đoạn code sau đây bạn sẽ hiểu:
function add(a, b) { // outer function
return function () { // inner function
return a + b;
}
}
add(1, 2)(); // 3
5. Funcion Object
Để kết thúc lại bài này mình xin giới thiệu thêm một cách khai báo cực kì thú vị của JS nữa là Function Object. Theo dõi đoạn code này nhé:
const fncBody = "return a + b;";
const add = new Function(['a', 'b'], fncBody);
add(1, 2); // 3
Yayy!!! Nhìn qua thì cũng thường chứ có gì thú vị đâu đúng không?? Điều thú vị nằm ở chỗ nó có thể biến bất cứ String, Text hay JSON thành Function và thực thi chúng. Chúng ta có thể đặt một Function mã hóa nào đó trong Response trả về từ API chẳng hạn, ứng dụng là vô kể. Theo dõi tiếp nhé:
const sayHello100times = function() {
for(let i = 1; i <= 100; i++) {
console.log(`Hello ${i}`);
}
}
// Convert đoạn Function trên thành String!
const fncBody = sayHello100times.toString().match(/function[^{]+\{([\s\S]*)\}$/)[1]; // thử console.log() thằng này ra xem
const sayHello = new Function([], fncBody);
sayHello();
Đống code trên sẽ in ra 100 dòng Hello. Thật thú vị phải không nào. Function về String rồi lại về Function. Chúng ta có thể khởi tạo Function này trên máy chúng ta và gửi nó để thực thi ở một nơi nào đó trên Internet!
Bài viết đến đây là kết thúc, hy vọng các kiến thức trên là bổ ích cho các bạn.
