Hàm là một nhóm mã có thể tái sử dụng có thể được gọi ở bất kỳ đâu trong chương trình của bạn. Điều này giúp loại bỏ nhu cầu viết đi viết lại cùng một mã. Nó giúp các lập trình viên viết mã mô-đun. Các hàm cho phép lập trình viên chia một chương trình lớn thành một số hàm nhỏ và có thể quản lý được
Giống như bất kỳ ngôn ngữ lập trình nâng cao nào khác, JavaScript cũng hỗ trợ tất cả các tính năng cần thiết để viết mã mô-đun bằng các hàm. Chắc hẳn bạn đã thấy các hàm như alert() và write() trong các chương trước. Chúng tôi đã sử dụng đi sử dụng lại các chức năng này, nhưng chúng chỉ được viết bằng JavaScript lõi một lần
JavaScript cũng cho phép chúng ta viết các hàm của riêng mình. Phần này giải thích cách viết các hàm của riêng bạn trong JavaScript
Định nghĩa hàm
Trước khi sử dụng một hàm, chúng ta cần định nghĩa nó. Cách phổ biến nhất để xác định hàm trong JavaScript là sử dụng từ khóa hàm, theo sau là tên hàm duy nhất, danh sách tham số (có thể trống) và khối câu lệnh được bao quanh bởi dấu ngoặc nhọn
cú pháp
Cú pháp cơ bản được hiển thị ở đây
Ví dụ
Hãy thử ví dụ sau. Nó định nghĩa một hàm gọi là sayHello không có tham số nào -
Gọi một chức năng
Để gọi một hàm ở đâu đó sau này trong tập lệnh, bạn chỉ cần viết tên của hàm đó như được hiển thị trong đoạn mã sau
Click the following button to call the function
Use different text in write method and then try...
đầu ra
Thông số chức năng
Cho đến bây giờ, chúng ta đã thấy các chức năng không có tham số. Nhưng có một cơ sở để truyền các tham số khác nhau trong khi gọi một hàm. Các tham số đã truyền này có thể được ghi lại bên trong hàm và mọi thao tác có thể được thực hiện trên các tham số đó. Một hàm có thể nhận nhiều tham số được phân tách bằng dấu phẩy
Ví dụ
Hãy thử ví dụ sau. Chúng tôi đã sửa đổi chức năng sayHello của mình tại đây. Bây giờ phải mất hai tham số
Click the following button to call the function
Use different parameters inside the function and then try...
đầu ra
Tuyên bố trở lại
Hàm JavaScript có thể có câu lệnh trả về tùy chọn. Điều này là bắt buộc nếu bạn muốn trả về một giá trị từ một hàm. Câu lệnh này phải là câu lệnh cuối cùng trong một hàm
Ví dụ: bạn có thể chuyển hai số vào một hàm và sau đó bạn có thể mong đợi hàm trả về phép nhân của chúng trong chương trình gọi của bạn
Ví dụ
Hãy thử ví dụ sau. Nó định nghĩa một hàm nhận hai tham số và nối chúng trước khi trả về kết quả trong chương trình gọi
Click the following button to call the function
Use different parameters inside the function and then try...
đầu ra
Có rất nhiều điều để tìm hiểu về các hàm JavaScript, tuy nhiên chúng tôi đã đề cập đến các khái niệm quan trọng nhất trong hướng dẫn này
Giả sử bạn cần tạo chương trình tạo hình tròn và tô màu cho nó. Bạn có thể tạo hai chức năng để giải quyết vấn đề này
- một chức năng để vẽ vòng tròn
- một chức năng để tô màu vòng tròn
Chia một vấn đề phức tạp thành các phần nhỏ hơn giúp chương trình của bạn dễ hiểu và có thể tái sử dụng
JavaScript cũng có một số lượng lớn các chức năng sẵn có. Ví dụ, // declaring a function named greet() function greet() { console.log("Hello there"); }3 là hàm tính căn bậc hai của một số
Trong hướng dẫn này, bạn sẽ tìm hiểu về các hàm do người dùng định nghĩa
Khai báo một chức năng
Cú pháp để khai báo một hàm là
function nameOfFunction () { // function body }- Một hàm được khai báo bằng từ khóa // declaring a function named greet() function greet() { console.log("Hello there"); }4
- Các quy tắc cơ bản của việc đặt tên hàm tương tự như đặt tên biến. Tốt hơn là viết một tên mô tả cho chức năng của bạn. Ví dụ: nếu một hàm được sử dụng để cộng hai số, bạn có thể đặt tên cho hàm là // declaring a function named greet() function greet() { console.log("Hello there"); }5 hoặc // declaring a function named greet() function greet() { console.log("Hello there"); }6
- Phần thân của hàm được viết trong vòng // declaring a function named greet() function greet() { console.log("Hello there"); }7
Ví dụ,
// declaring a function named greet() function greet() { console.log("Hello there"); }Gọi một chức năng
Trong chương trình trên, chúng ta đã khai báo một hàm tên là // declaring a function named greet() function greet() { console.log("Hello there"); }8. Để sử dụng chức năng đó, chúng ta cần gọi nó
Đây là cách bạn có thể gọi hàm // declaring a function named greet() function greet() { console.log("Hello there"); }8 ở trên
// function call greet();ví dụ 1. Hiển thị một văn bản
// program to print a text // declaring a function function greet() { console.log("Hello there!"); } // calling the function greet();đầu ra
Hello there!Thông số chức năng
Một chức năng cũng có thể được khai báo với các tham số. Tham số là giá trị được truyền khi khai báo hàm
ví dụ 2. Hàm có tham số
// program to print the text // declaring a function function greet(name) { console.log("Hello " + name + ":)"); } // variable name can be different let name = prompt("Enter a name: "); // calling function greet(name);đầu ra
Enter a name: Simon Hello Simon :)Trong chương trình trên, hàm // function call greet();0 được khai báo với tham số // function call greet();1. Người dùng được nhắc nhập tên. Sau đó, khi hàm được gọi, một đối số được truyền vào hàm
Ghi chú. Khi một giá trị được truyền vào khi khai báo một hàm, nó được gọi là tham số. Và khi hàm được gọi, giá trị được truyền vào được gọi là đối số
ví dụ 3. Cộng Hai Số
// program to add two numbers using a function // declaring a function function add(a, b) { console.log(a + b); } // calling functions add(3,4); add(2,9);đầu ra
7 11Trong chương trình trên, hàm // declaring a function named greet() function greet() { console.log("Hello there"); }5 được sử dụng để tìm tổng của hai số
- Hàm được khai báo với 2 tham số // function call greet();3 và // function call greet();4
- Hàm được gọi bằng tên của nó và truyền hai đối số 3 và 4 trong một và 2 và 9 trong một hàm khác
Lưu ý rằng bạn có thể gọi một hàm bao nhiêu lần tùy thích. Bạn có thể viết một hàm và sau đó gọi nó nhiều lần với các đối số khác nhau
Hàm trả về
Câu lệnh // function call greet();5 có thể được sử dụng để trả về giá trị cho lời gọi hàm
Câu lệnh // function call greet();5 biểu thị rằng chức năng đã kết thúc. Bất kỳ mã nào sau // function call greet();5 không được thực thi
Nếu không có gì được trả về, hàm sẽ trả về giá trị // function call greet();8
Ví dụ 4. Tổng của hai số
// program to add two numbers // declaring a function function add(a, b) { return a + b; } // take input from the user let number1 = parseFloat(prompt("Enter first number: ")); let number2 = parseFloat(prompt("Enter second number: ")); // calling function let result = add(number1,number2); // display the result console.log("The sum is " + result);đầu ra
// declaring a function named greet() function greet() { console.log("Hello there"); }0Trong chương trình trên, tổng của các số được hàm trả về bằng cách sử dụng câu lệnh // function call greet();5. Và giá trị đó được lưu trữ trong biến kết quả
Lợi ích của việc sử dụng một chức năng
- Chức năng làm cho mã có thể tái sử dụng. Bạn có thể khai báo một lần và sử dụng nhiều lần
- Chức năng làm cho chương trình dễ dàng hơn khi mỗi nhiệm vụ nhỏ được chia thành một chức năng
- Chức năng tăng khả năng đọc
Trong Javascript, hàm cũng có thể được định nghĩa là biểu thức. Ví dụ,
// declaring a function named greet() function greet() { console.log("Hello there"); }1đầu ra
// declaring a function named greet() function greet() { console.log("Hello there"); }2Trong chương trình trên, biến x được dùng để lưu hàm. Ở đây hàm được coi như một biểu thức. Và hàm được gọi bằng tên biến
Hàm trên được gọi là hàm ẩn danh
Ghi chú. Trong ES2015, các biểu thức JavaScript được viết dưới dạng hàm mũi tên. Bạn sẽ tìm hiểu về chúng trong các hướng dẫn sau