1. Giới thiệu về hàm trong JavaScript

Hàm là một hay nhiều đoạn mã được viết ra để thực thi một hoặc nhiều hành động khi gọi nó. Hàm(Function) gọi chung là subprogram (chương trình con) có thể được gọi ở bên ngoài hoặc bên trong chính nó.

Một số đặc điểm của hàm trong Js:

  • Hàm có thể không có tham số, 1 tham số hay thậm chí là nhiều tham số
  • Nội dung của hàm phải được đặt trong cặp dấu ngoặc nhọn ({}), dù cho không có câu lệnh nào hoặc nhiều câu lệnh bên trong nó.
  • Hàm có thể có giá trị trả về hoặc không có giá trị trả về.
  • Kiểu của tham số hay giá trị trả về trong hàm là không được quy định. Do đó, bạn thường phải kiểm tra kiểu của giá trị truyền vào hàm. Nếu không, bạn sẽ rất dễ bị sai.

2. Khai báo hàm trong JavaScript

Để khai báo hàm, chúng ta dùng từ khóa function, theo sau nó là:

  • Tên hàm
  • Danh sách các tham số truyền vào hàm, được đặt trong ngoặc đơn và cách nhau bởi dấu phẩy.
  • Các câu lệnh của JavaScript để tạo ra một hàm, được đặt trong ngoặc nhọn {…}.

2.1. Hàm cơ bản

Đây là dạng cơ bản nhất của hàm trong javascript, có cú pháp như sau:

function funName() {
//code
}

Trong đó: funName là tên của hàm mà các bạn muốn đặt còn function là từ khóa bắt buộc.

Ví dụ:

function getWebsite() {
document.write('https://laptrinhtudau.com');
}

2.2. Hàm có tham số truyền vào

Đây là một dạng hàm rất hay được sử dụng trong dự án. Hàm có tham số là loại hàm mà khi gọi hàm ta phải truyền giá trị vào cho nó. Tùy vào giá trị được truyền mà hàm sẽ thực thi và cho ra kết quả khác nhau.

Cú pháp :

function funName(param_1, ..., pram_n) {
//code
}

Trong đó:

  • funName là tên của hàm các bạn muốn đặt.
  • param_1,…,pram_n là các tham số mà các bạn muốn truyền vào hàm(không giới hạn số lượng)

Ví dụ: tạo hàm tính tổng của 2 số bất kỳ

function getSum(a, b) {
document.write('Tổng: ' + (a + b));
}

2.3. Hàm có tham số mặc định

Đây thực ra là dạng hàm có truyền tham số và đồng thời xét luôn giá trị mặc định cho các tham số đó. Cú pháp của nó gần tương tự việc khai báo hàm có tham số truyền vào:

function funName(param_1 = value_1, ..., pram_n = value_2) {
//code
}

Trong đó:

  • funName là tên của hàm các bạn muốn đặt.
  • param_1,…,pram_n là các tham số mà các bạn muốn truyền vào hàm(không giới hạn số lượng).
  • value_1,…,value_n là các giá trị tương ứng với các pram.

Ví dụ:

function getSum(a = 1, b = 2) {
document.write('Tổng: ' + (a + b));
}

3. Biểu thức hàm

Một hàm Js cũng có thể được định nghĩa bằng cách sử dụng một biểu thức . Một biểu thức hàm có thể được lưu trữ trong một biến

<script>
const x = function (a, b) {return a * b};
document.write(x);
</script>

Sau khi một biểu thức hàm đã được lưu trữ trong một biến, biến đó có thể được sử dụng như một hàm:

<script>
const x = function (a, b) {return a * b};
document.write(x(4, 3));
</script>

Hàm trên thực chất là một hàm ẩn danh (một hàm không có tên). Các hàm được lưu trữ trong biến không cần tên hàm. Chúng luôn được gọi (gọi) bằng cách sử dụng tên biến. Hàm trên kết thúc bằng dấu chấm phẩy vì nó là một phần của câu lệnh thực thi.

4. Hàm constructor trong JavaScript

Như bạn đã thấy trong các ví dụ trước, các hàm Js được định nghĩa với function từ khóa. Các hàm cũng có thể được định nghĩa bằng một phương thức khởi tạo hàm Js tích hợp được gọi là Function() .

<script>
const myFunction = new Function("a", "b", "return a * b");
document.write(myFunction(4, 3));
</script>

Ta thực sự không phải sử dụng hàm tạo hàm. Ví dụ trên cũng giống như cách viết:

<script>
const myFunction = function (a, b) {return a * b}
document.write(myFunction(4, 3));
</script>

5. Hàm với chức năng tự gọi

Biểu thức hàm có thể được thực hiện “tự gọi”. Một biểu thức tự gọi được gọi (bắt đầu) tự động mà không cần gọi. Biểu thức hàm sẽ tự động thực thi nếu biểu thức được theo sau bởi () .

Ta không thể tự gọi một khai báo hàm. Ta phải thêm dấu ngoặc đơn xung quanh hàm để chỉ ra rằng nó là một biểu thức hàm:

<p id="demo"></p>

<script>
(function () {
  document.getElementById("demo").innerHTML = "Xin chào! Tôi đã tự gọi mình";
})();
</script>

Hàm trên thực chất là một hàm tự gọi ẩn danh (hàm không có tên).

6. Hàm có thể được sử dụng làm giá trị

Các hàm Js có thể được sử dụng làm giá trị:

<script>
function myFunction(a, b) {
  return a * b;
}
let x = myFunction(4, 3);
document.write(x);
</script>

Các hàm Js có thể được sử dụng trong các biểu thức:

<script>
function myFunction(a, b) {
  return a * b;
}
let x = myFunction(4, 3) * 2;
document.write(x);
</script>

7. Hàm cũng là một đối tượng

Toán tử typeof trong Js trả về “hàm” cho các hàm. Tuy nhiên, các hàm Js tốt nhất có thể được mô tả dưới dạng các đối tượng.

Các hàm Js có cả thuộc tính và phương thức . Thuộc tính arguments.length trả về số lượng đối số nhận được khi hàm được gọi:

<script>
function myFunction(a, b) {
  return arguments.length;
}
document.write(myFunction(4, 3));
</script>

Phương thức toString() trả về hàm dưới dạng một chuỗi:

<script>
function myFunction(a, b) {
  return a * b;
}
document.write(myFunction.toString());
</script>

Một hàm được định nghĩa là thuộc tính của một đối tượng, được gọi là một phương thức của đối tượng.
Một hàm được thiết kế để tạo các đối tượng mới, được gọi là hàm tạo đối tượng.

8. Hàm mũi tên – Arrow Functions

Hàm mũi tên cho phép viết một cú pháp ngắn gọn để viết biểu thức hàm. Ta không cần từ khóa function , return và dấu ngoặc nhọn .

<script>
const x = (x, y) => x * y;
document.write(x(5, 5));
</script>

Các hàm mũi tên không có this . Chúng không phù hợp để xác định các phương thức đối tượng . Cùng với đó, hàm mũi tên chúng phải được xác định trước khi sử dụng.

Sử dụng const an toàn hơn sử dụng var , bởi vì biểu thức hàm luôn có giá trị không đổi. Ta chỉ có thể bỏ qua từ khóa return và dấu ngoặc nhọn nếu hàm là một câu lệnh duy nhất. Bởi vì điều này, có thể là một thói quen tốt để luôn giữ chúng:

<script>
const x = (x, y) => { return x * y };
document.write(x(5, 5));
</script>