Phân biệt 3 loại hàm trong JavaScript: Declaration, Expression và Arrow

1. 3 loại hàm trong JavaScript?

1.1 Hàm khai báo là gì?

Hàm khai báo (Declaration function) là cách truyền thống để định nghĩa một hàm trong JavaScript. Hàm này có thể được gọi trước khi nó được định nghĩa.

Cú pháp:

function tenHam(thamSo) {
  // Khối lệnh
}

function tinhTong(a, b) {
  return a + b;
}
console.log(tinhTong(5, 3)); // 8

Khuyến nghị: Nên gọi hàm sau khi khai báo giúp code trở nên dễ dàng đọc-hiểu hơn, nhất là khi chúng ta mới học JavaScript.

1.2 Hàm biểu thức là gì?

Hàm biểu thức (Function expression) là một cách để định nghĩa hàm thông qua việc gán hàm cho một biến. Hàm này chỉ có thể được gọi sau khi nó được định nghĩa.

Cú pháp:

const tenHam = function(thamSo) {
  // Khối lệnh
};

Ví dụ thực tế:

const tinhHieu = function(a, b) {
  return a - b;
};
console.log(tinhHieu(5, 3)); // 2

Lưu ý: Nếu gọi hàm trước khi định nghĩa sẽ xảy ra lỗi: Uncaught ReferenceError: Cannot access 'tinhHieu' before initialization.

2.3 Hàm mũi tên là gì?

Hàm mũi tên (Arrow function) là một cú pháp ngắn gọn được giới thiệu trong ES6, dùng để viết hàm biểu thức một cách ngắn gọn hơn. Hàm mũi tên đặc biệt hữu ích khi làm việc với các hàm vô danh và hàm callback.

Cú pháp:

const tenHam = (thamSo) => {
  // Khối lệnh
};

Ví dụ thực tế:

const tinhTich = (a, b) => {
  return a * b;
};

console.log(tinhTich(5, 3)); // 15

Hoặc return luôn sau dấu mũi tên:

const tinhTich = (a, b) => a * b;

console.log(tinhTich(5, 3)); // 15

Hoặc rút gọn không cần cặp ngoặc đơn:

const double = n => n * 2;

console.log(double(2)); // 4

Lưu ý: Nếu gọi hàm trước khi định nghĩa sẽ xảy ra lỗi: Uncaught ReferenceError: Cannot access 'double' before initialization.

2. Khi nào cần sử dụng hàm nào?

• Hàm khai báo (Declaration function): Khi cần sử dụng được hàm trước khi khai báo, hoặc đơn giản muốn dùng cách truyền thống.
• Hàm biểu thức (Function expression): Khi muốn chỉ gọi được hàm sau khi khai báo, hoặc khi hàm được sử dụng như một giá trị (ví dụ, truyền hàm như một tham số).
• Hàm mũi tên (Arrow function): Khi cần một cú pháp ngắn gọn hoặc khi làm việc với this trong một ngữ cảnh nhất định (vì hàm mũi tên không có this riêng của nó).

3. Tóm tắt: 

• Hàm khai báo: Hàm khai báo cho phép định nghĩa hàm trước hoặc sau khi nó được gọi, là cách truyền thống để tạo hàm.
  • Ví dụ:

function tinhTong(a, b) {
  return a + b;
}
console.log(tinhTong(5, 3)); // 8

• Hàm biểu thức: Định nghĩa hàm thông qua việc gán hàm cho một biến, chỉ có thể được gọi sau khi được định nghĩa.
  • Ví dụ:

const tinhHieu = function(a, b) {
  return a - b;
};
console.log(tinhHieu(5, 3)); // 2

• Hàm mũi tên: Cú pháp ngắn gọn của hàm biểu thức được giới thiệu trong ES6.
  • Ví dụ:

const tinhTich = (a, b) => {
  return a * b;
};
console.log(tinhTich(5, 3)); // 15

• • Hoặc:

const tinhTich = (a, b) => a * b;
console.log(tinhTich(5, 3)); // 15

• Khi nào sử dụng?: Dùng hàm khai báo khi muốn gọi được hàm trước khi khai báo; dùng hàm biểu thức khi cần chỉ gọi được hàm sau khi khai báo hoặc sử dụng hàm như giá trị (gán vào biến, truyền làm tham số của hàm khác, v.v.); Dùng hàm mũi tên khi muốn có cú pháp ngắn gọn.