Tìm hiểu Functions trong JavaScript

Lưu ý: Biến b được khai báo bằng let chỉ tồn tại trong block if.

Closure trong JavaScript

Closure là gì?

Closure là function có thể ghi nhớ và truy cập các biến từ phạm vi bên ngoài của nó, ngay cả khi function đó được gọi sau này.

Ứng dụng của Closure

Tạo biến private trong JavaScript
Viết hàm callback, hàm factory
Giữ trạng thái trong function

function outerFunction() {
    let count = 0; // Biến cục bộ

    return function innerFunction() {
        count++; 
        console.log(`Count: ${count}`);
    };
}

const counter = outerFunction(); // Tạo một closure
counter(); // Output: Count: 1
counter(); // Output: Count: 2
counter(); // Output: Count: 3

Giải thích:

• outerFunction() trả về innerFunction(), nhưng innerFunction() vẫn nhớ biến count dù outerFunction() đã kết thúc.

Ứng dụng thực tế của Closure

Đếm số lần click nút (Counter)

function createCounter() {
    let count = 0;
    return function() {
        count++;
        console.log(`Bạn đã nhấn ${count} lần`);
    };
}

const clickCounter = createCounter();
document.getElementById("myButton").addEventListener("click", clickCounter);

Mỗi lần click vào nút, biến count vẫn được nhớ nhờ closure.

Tạo Factory Function (Hàm tạo đối tượng động)

function multiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5)); // Output: 10
console.log(triple(5)); // Output: 15

Closure giúp tạo ra các function chuyên biệt (double, triple).

Function Callback và Higher-Order Functions trong JavaScript

Function Callback

Định nghĩa callback function

Callback function là một function được truyền vào một function khác như một đối số, và được thực thi sau khi function đó hoàn thành tác vụ.

JavaScript là ngôn ngữ bất đồng bộ (asynchronous), nên callback được sử dụng rộng rãi trong Xử lý sự kiện (Event Handling), Xử lý bất đồng bộ (Async Processing), Lập trình hàm (Functional Programming), v.v.

Ví dụ sử dụng callback trong JavaScript

Callback trong hàm thông thường

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

function afterGreeting() {
    console.log("Chúc bạn một ngày tốt lành!");
}

greet("Kiên", afterGreeting);

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

function afterGreeting() {
    console.log("Chúc bạn một ngày tốt lành!");
}

greet("Kiên", afterGreeting);

Kết quả:

Xin chào, Kiên!
Chúc bạn một ngày tốt lành!

afterGreeting() được truyền vào greet() và được gọi sau khi lời chào được in ra.

Callback trong setTimeout() (Xử lý bất đồng bộ)

console.log("Bắt đầu...");
setTimeout(function() {
    console.log("Đã chờ 2 giây...");
}, 2000);
console.log("Hoàn thành!");

Kết quả (thực thi bất đồng bộ):

Bắt đầu...
Hoàn thành!
(Chờ 2 giây...)
Đã chờ 2 giây...

setTimeout() nhận một callback function và thực thi nó sau 2 giây.

Callback trong xử lý sự kiện (Event Handling)

document.getElementById("myButton").addEventListener("click", function() {
    console.log("Nút đã được nhấn!");
});

Callback giúp xử lý sự kiện khi người dùng nhấn nút.

Kết bài

Functions đóng vai trò quan trọng trong JavaScript, giúp tổ chức code một cách khoa học, tối ưu hóa hiệu suất và tăng tính tái sử dụng. Từ các cách khai báo function như Function Declaration, Function Expression, Arrow Function đến những khái niệm nâng cao như Callback, Higher-Order Functions, Scope, Closure, mỗi tính năng đều giúp lập trình viên viết code hiệu quả hơn.

Ngoài ra, các cải tiến trong ES6+ như Default Parameters, Rest Parameters, Destructuring giúp việc xử lý dữ liệu linh hoạt hơn, giảm thiểu lỗi và làm cho code dễ đọc, dễ bảo trì.

Việc nắm vững function trong JavaScript không chỉ giúp bạn xây dựng các ứng dụng web mạnh mẽ mà còn là nền tảng quan trọng để tiếp cận các khái niệm nâng cao như Asynchronous JavaScript (Promises, Async/Await) và lập trình hướng đối tượng trong JavaScript.