Hướng Dẫn Chi Tiết Các Loại Hàm Trong JavaScript Dễ Hiểu Nhất

1. Hàm Khai Báo (Function Declaration)

Cách định nghĩa: Sử dụng từ khóa function để định nghĩa hàm với một tên.

function sayHello() {
    console.log("Xin chào!");
}

Đặc điểm:

• Có thể gọi hàm trước khi nó được định nghĩa (do hoisting).
• Thích hợp để viết các hàm thông thường, dễ đọc.

Ví dụ:

sayHello(); // Kết quả: Xin chào!

2. Hàm Biểu Thức (Function Expression)

Cách định nghĩa: Gán một hàm vào một biến.

const sayGoodbye = function() {
    console.log("Tạm biệt!");
};

Đặc điểm:

• Không thể gọi hàm trước khi nó được định nghĩa (do không hoisting).
• Thường dùng khi cần gán hàm vào biến hoặc truyền hàm như tham số.

Ví dụ:

sayGoodbye(); // Lỗi: Cannot access 'sayGoodbye' before initialization

3. Hàm Mũi Tên (Arrow Function)

Cách định nghĩa: Dùng cú pháp => để tạo hàm.

const greet = () => {
    console.log("Hello!");
};

Đặc điểm:

• Ngắn gọn hơn so với hàm khai báo hoặc hàm biểu thức.
• Không có this riêng: Kế thừa this từ bối cảnh bao quanh.
• Không thể dùng làm hàm tạo (constructor).

Ví dụ:

const add = (a, b) => a + b; // Hàm 1 dòng, không cần `return`
console.log(add(2, 3)); // Kết quả: 5

4. Hàm Ẩn Danh (Anonymous Function)

Cách định nghĩa: Hàm không có tên, thường được sử dụng như một giá trị (trong biểu thức hoặc tham số).

setTimeout(function() {
    console.log("Đã hết 1 giây!");
}, 1000);

Đặc điểm:

• Không thể tự gọi trực tiếp vì không có tên.
• Thường dùng khi không cần tái sử dụng.

5. Hàm Tự Gọi (IIFE – Immediately Invoked Function Expression)

Cách định nghĩa: Hàm được định nghĩa và gọi ngay lập tức.

(function() {
    console.log("Tôi được gọi ngay!");
})();

Đặc điểm:

• Dùng để tạo phạm vi riêng mà không ảnh hưởng tới bên ngoài.
• Thường dùng để khởi tạo các module hoặc chạy mã ngay khi tải trang.

Ví dụ:

(function(name) {
    console.log(`Xin chào, ${name}!`);
})("Hà"); // Kết quả: Xin chào, Hà!

6. Hàm Dựng (Constructor Function)

Cách định nghĩa: Dùng để tạo đối tượng mới với từ khóa new.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Đặc điểm:

• Dùng từ khóa this để tham chiếu tới đối tượng mới.
• Thường sử dụng khi làm việc với lập trình hướng đối tượng (OOP).

Ví dụ:

const person = new Person("Nam", 25);
console.log(person.name); // Kết quả: Nam

7. Hàm Callback

Cách định nghĩa: Hàm được truyền như một tham số vào một hàm khác.

function greet(name, callback) {
    console.log(`Xin chào, ${name}!`);
    callback();
}

Đặc điểm:

• Rất phổ biến trong các tác vụ bất đồng bộ (asynchronous), như xử lý dữ liệu hoặc sự kiện.

Ví dụ:

greet("Hà", function() {
    console.log("Chúc một ngày tốt lành!");
});