Tạo hàm trong JavaScript
Hàm là một đoạn mã có thể tái sử dụng chạy khi bạn gọi nó. Các chức năng cho phép bạn sử dụng lại mã, làm cho mã trở nên mô-đun hơn và dễ bảo trì hơn.
Có một số cách để tạo hàm trong JavaScript. Ở đây bạn sẽ tìm hiểu các cách khác nhau để tạo hàm và cách sử dụng chúng.
Mục Lục
Khai báo hàm: Cách đơn giản
Một cách bạn có thể tạo hàm trong JavaScript là thông qua khai báo hàm. Khai báo hàm là một hàm trong JavaScript tuân theo cú pháp bên dưới.
function functionName(parameters) {
return "This is a function declaration";
}
Các thành phần của khối mã trên bao gồm:
- Các chức năng từ khóa: Từ khóa này khai báo một chức năng.
- Tên chức năng: Đây là tên của hàm. Trong thực tế, nó nên mô tả và có ý nghĩa nhất có thể, chỉ ra những gì chức năng làm.
- thông số: Điều này đại diện cho các tham số chức năng. Tham số là một danh sách các biến tùy chọn mà bạn có thể chuyển đến một hàm khi gọi nó.
- Phần thân hàm: Phần này chứa mã mà hàm sẽ chạy khi bạn gọi nó. Nó được bao quanh bởi các dấu ngoặc nhọn {} và có thể chứa bất kỳ mã JavaScript hợp lệ nào.
- Các trở lại câu lệnh: Câu lệnh này dừng thực thi của hàm và trả về giá trị đã chỉ định. Trong trường hợp trên, gọi hàm sẽ trả về chuỗi “Đây là khai báo hàm”.
Ví dụ: khai báo hàm dưới đây nhận ba số làm tham số và trả về tổng của chúng.
function addThreeNumbers(a, b, c) {
return a + b + c;
}
Để gọi một khai báo hàm trong JavaScript, hãy viết tên hàm theo sau là một bộ dấu ngoặc đơn (). Nếu hàm nhận bất kỳ tham số nào, hãy chuyển chúng dưới dạng đối số trong dấu ngoặc đơn.
Ví dụ:
addThreeNumbers(1, 2, 3)
Khối mã ở trên gọi thêmba số hàm và chuyển 1, 2 và 3 làm đối số cho hàm. Nếu bạn chạy mã này, nó sẽ trả về giá trị 6.
JavaScript kéo các khai báo hàm, nghĩa là bạn có thể gọi chúng trước khi xác định chúng.
Ví dụ:
isHoisted(); function isHoisted() {
console.log("Function is hoisted");
return true;
}
Như được hiển thị trong khối mã ở trên, gọi isHoisted trước khi xác định nó sẽ không gây ra lỗi.
Biểu thức hàm: Hàm dưới dạng giá trị
Trong JavaScript, bạn có thể định nghĩa một hàm dưới dạng một biểu thức. Sau đó, bạn có thể gán giá trị hàm cho một biến hoặc sử dụng nó làm đối số cho một hàm khác.
Chúng còn được gọi là các hàm ẩn danh vì chúng không có tên và bạn chỉ có thể gọi chúng từ biến mà bạn đã gán cho chúng.
Dưới đây là cú pháp cho một biểu thức hàm:
const functionName = function () {
return "Function expression";
};
Để gọi một biểu thức hàm trong JavaScript, hãy viết tên biến mà bạn đã gán cho hàm theo sau là một bộ dấu ngoặc đơn (). Nếu hàm nhận bất kỳ tham số nào, hãy chuyển chúng dưới dạng đối số trong dấu ngoặc đơn.
Ví dụ:
functionName();
Các biểu thức hàm rất hữu ích khi tạo các hàm chạy trong các hàm khác. Các ví dụ điển hình bao gồm trình xử lý sự kiện và lệnh gọi lại của chúng.
Ví dụ:
button.addEventListener("click", function (event) {
console.log("You clicked a button!");
});
Ví dụ trên đã sử dụng một biểu thức hàm nhận một sự kiện đối số như một cuộc gọi lại cho addEventListener chức năng. Bạn không cần phải gọi hàm một cách rõ ràng khi sử dụng biểu thức hàm làm hàm gọi lại. Nó tự động được gọi bởi hàm cha của nó.
Trong trường hợp trên, khi người nghe sự kiện nhận được một nhấp chuột sự kiện, nó gọi hàm gọi lại và chuyển sự kiện đối tượng như một đối số.
Không giống như các khai báo hàm, các biểu thức hàm không được nâng lên, vì vậy bạn không thể gọi chúng trước khi định nghĩa chúng. Cố gắng truy cập một biểu thức hàm trước khi bạn xác định nó sẽ dẫn đến một Tham khảoLỗi.
Ví dụ:
isHoisted(); const isHoisted = function () {
console.log("Function is hoisted");
};
Chức năng mũi tên: Nhỏ gọn và hạn chế
ES6 đã giới thiệu một cách viết tắt để viết các hàm ẩn danh trong JavaScript được gọi là các hàm mũi tên. Chúng có cú pháp ngắn gọn có thể làm cho mã của bạn dễ đọc hơn, đặc biệt là khi xử lý các hàm ngắn, một dòng.
Không giống như các phương pháp tạo hàm khác, hàm mũi tên không yêu cầu chức năng từ khóa. Một biểu thức hàm mũi tên bao gồm ba phần:
- Cặp dấu ngoặc đơn (()) chứa các tham số. Bạn có thể bỏ qua dấu ngoặc đơn nếu hàm chỉ có một tham số.
- Một mũi tên (=>), bao gồm một dấu bằng (=) và dấu lớn hơn (>).
- Một cặp dấu ngoặc nhọn chứa thân hàm. Bạn có thể bỏ qua dấu ngoặc nhọn nếu hàm bao gồm một biểu thức duy nhất.
Ví dụ:
const functionName = parameter => console.log("Single parameter arrow function")
const functionName = (parameter_1, parameter_2) => {
return "Multiple parameter arrow function"
};
Khi bạn bỏ qua dấu ngoặc nhọn, hàm mũi tên hoàn toàn trả về một biểu thức duy nhất, do đó không cần trở lại từ khóa. Mặt khác, nếu bạn không bỏ qua dấu ngoặc nhọn, bạn phải trả về một giá trị rõ ràng bằng cách sử dụng trở lại từ khóa.
Các chức năng mũi tên cũng có một sự khác biệt cái này ràng buộc so với các chức năng thông thường. Trong các hàm thông thường, giá trị của cái này phụ thuộc vào cách bạn gọi hàm. Trong một chức năng mũi tên, cái này luôn luôn bị ràng buộc bởi cái này giá trị của phạm vi xung quanh.
Ví dụ:
const foo = {
name: "Dave",
greet: function () {
setTimeout(() => {
console.log(`Hello, my name is ${this.name}`);
}, 1000);
},
};foo.greet();
Trong ví dụ trên, chức năng mũi tên bên trong chào hỏi phương pháp có quyền truy cập vào cái này.tênmặc dù setTimeout chức năng gọi nó. Một chức năng bình thường sẽ có cái này ràng buộc với đối tượng toàn cục.
Như tên ngụ ý, hàm được gọi ngay lập tức (IIFE) là hàm chạy ngay khi được xác định.
Đây là cấu trúc của một IIFE:
(function () {
})();(() => {
})();
(function (param_1, param_2) {
console.log(param_1 * param_2);
})(2, 3);
Một IIFE bao gồm một biểu thức hàm được bao bọc bên trong một cặp dấu ngoặc đơn. Theo sau nó là một cặp dấu ngoặc đơn bên ngoài bao vây để gọi hàm.
Bạn có thể sử dụng IIFE để tạo phạm vi, ẩn chi tiết triển khai và chia sẻ dữ liệu giữa nhiều tập lệnh. Chúng đã từng được sử dụng như một hệ thống mô-đun trong JavaScript.
Tạo một hàm theo nhiều cách khác nhau
Hiểu cách tạo hàm trong JavaScript là rất quan trọng. Điều này đúng với một hàm cơ bản thực hiện một phép tính đơn giản hoặc một hàm tinh vi tương tác với các phần khác trong mã của bạn.
Bạn có thể sử dụng các kỹ thuật đã thảo luận ở trên để xây dựng các hàm trong JavaScript cũng như cấu trúc và sắp xếp mã của mình. Chọn phương pháp phù hợp nhất với nhu cầu của bạn, vì mỗi phương pháp đều có những lợi ích và ứng dụng khác nhau.