Hàm JavaScript và Biểu thức hàm (với Ví dụ)

Trong hướng dẫn này, bạn sẽ tìm hiểu về hàm JavaScript và các biểu thức hàm với sự trợ giúp của các ví dụ.

Hàm JavaScript

Hàm là một khối mã thực hiện một nhiệm vụ cụ thể.

Giả sử bạn cần tạo một chương trình để tạo một hình tròn và tô màu cho nó. Bạn có thể tạo hai hàm để 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 cho 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ể sử dụng lại.

JavaScript cũng có một số lượng lớn các hàm sẵn có. Ví dụ, Math.sqrt()là một 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 hàm

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 functiontừ khóa.
• Các quy tắc cơ bản của việc đặt tên một hàm tương tự như đặt tên cho một 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 để thêm hai số, bạn có thể đặt tên cho hàm addhoặc addNumbers.
• Phần thân của hàm được viết bên trong ().

Ví dụ,

 // declaring a function named greet() function greet() ( console.log("Hello there"); )

Gọi một hàm

Trong chương trình trên, chúng ta đã khai báo một hàm có tên greet(). Để 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 greet()hàm trên .

 // function call greet();

Hoạt động của một hàm trong JavaScript

Ví dụ 1: Hiển thị Văn bản

 // program to print a text // declaring a function function greet() ( console.log("Hello there!"); ) // calling the function greet();

Đầu ra

 Xin chào!

Tham số chức năng

Một hàm cũng có thể được khai báo với các tham số. Tham số là một giá trị được truyền khi khai báo một hàm.

Hoạt động của Hàm JavaScript với tham số

Ví dụ 2: Hàm với cá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

 Nhập tên: Simon Xin chào Simon :)

Trong chương trình trên, greethàm được khai báo với một nametham số. 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.

Lưu ý : Khi một giá trị được truyền 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 11

Trong chương trình trên, addhàm dùng để tìm tổng của hai số.

• Hàm được khai báo với hai tham số avà b.
• Hàm được gọi bằng cách sử dụng tên của nó và chuyển hai đối số 3 và 4 trong một và 2 và 9 trong một đối số khác.

Lưu ý rằng bạn có thể gọi một hàm bao nhiêu lần tùy ý. Bạn có thể viết một hàm và sau đó gọi hàm đó nhiều lần với các đối số khác nhau.

Hàm trả về

Câu returnlệnh có thể được sử dụng để trả về giá trị cho một lời gọi hàm.

Câu returnlệnh biểu thị rằng chức năng đã kết thúc. Bất kỳ mã nào sau đó returnkhông được thực thi.

Nếu không có gì được trả về, hàm sẽ trả về một undefinedgiá trị.

Hoạt động của Hàm JavaScript với câu lệnh trả về

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

 Nhập số đầu tiên: 3.4 Nhập số thứ hai: 4 Tổng là 7.4

Trong chương trình trên, tổng các số được trả về bởi hàm sử dụng returncâu lệnh. 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ể sử dụng lại. 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 vì 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.

Biểu thức hàm

Trong Javascript, các hàm cũng có thể được định nghĩa dưới dạng các biểu thức. Ví dụ,

 // program to find the square of a number // function is declared inside the variable let x = function (num) ( return num * num ); console.log(x(4)); // can be used as variable value for other variables let y = x(3); console.log(y);

Đầu ra

 16 9

Trong chương trình trên, biến x được sử dụng để lưu trữ hàm. Ở đây hàm được coi như một biểu thức. Và hàm được gọi bằng cách sử dụng tên biến.

Hàm trên được gọi là hàm ẩn danh.

Lưu ý: 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 bài hướng dẫn sau.