Định nghĩa hàm Function trong JavaScript

Trong lập trình JavaScript, hàm (Function) là một phần quan trọng giúp tổ chức và quản lý mã nguồn một cách hiệu quả. Hàm cho phép chúng ta nhóm các dòng lệnh lại với nhau để thực hiện một nhiệm vụ cụ thể, giúp mã dễ đọc, dễ bảo trì và có thể tái sử dụng nhiều lần.

JavaScript cung cấp nhiều cách để định nghĩa hàm, từ cách khai báo truyền thống đến các phương pháp hiện đại như arrow function hay callback function. Ngoài ra, phạm vi biến trong hàm, cơ chế hoisting, và các phương thức xử lý hàm như call(), apply(), bind() cũng là những khía cạnh quan trọng giúp lập trình viên kiểm soát luồng thực thi trong chương trình.

Bài viết này sẽ giúp bạn hiểu rõ về khái niệm hàm trong JavaScript, cách khai báo, sử dụng, cũng như các tính năng nâng cao liên quan đến hàm.

Giới thiệu về Hàm (Function) trong JavaScript

Trong JavaScript, hàm (function) là một khối mã được thiết kế để thực hiện một nhiệm vụ cụ thể. Hàm giúp lập trình viên viết mã nguồn gọn gàng hơn, tránh trùng lặp, tăng tính tái sử dụng và dễ bảo trì.

Hàm là một tập hợp các câu lệnh thực hiện một chức năng cụ thể và có thể được gọi nhiều lần trong chương trình. Hàm có thể nhận tham số (parameters) làm đầu vào và có thể trả về giá trị (return value) làm kết quả đầu ra.

Ví dụ về một hàm đơn giản:

function sayHello() {
    console.log("Xin chào!");
}
sayHello(); // Gọi hàm và hiển thị "Xin chào!"

Tầm quan trọng của hàm trong lập trình

Giúp tái sử dụng mã nguồn (Code Reusability)

• Khi một đoạn mã cần được sử dụng nhiều lần, thay vì viết lại, ta có thể đặt nó vào một hàm và gọi lại bất cứ khi nào cần.

Ví dụ, thay vì viết lệnh cộng hai số nhiều lần, ta có thể tạo một hàm như sau:

function add(a, b) {
    return a + b;
}
console.log(add(5, 10)); // Kết quả: 15
console.log(add(20, 30)); // Kết quả: 50

Giúp tổ chức mã tốt hơn (Code Organization)

• Chia chương trình thành các phần nhỏ giúp dễ hiểu và dễ quản lý.

• Ví dụ, thay vì viết tất cả mã vào một nơi, ta có thể chia thành các hàm nhỏ để xử lý từng nhiệm vụ cụ thể.

Dễ bảo trì (Maintainability)

• Khi cần sửa đổi hoặc nâng cấp chương trình, chỉ cần chỉnh sửa trong hàm mà không ảnh hưởng đến toàn bộ mã nguồn.

• Giả sử ta muốn thay đổi cách hiển thị lời chào, chỉ cần sửa trong hàm sayHello().

Giúp kiểm thử dễ dàng hơn (Testing & Debugging)

• Hàm giúp kiểm tra từng phần riêng lẻ thay vì phải kiểm tra toàn bộ chương trình.

Tăng hiệu suất và tối ưu hóa chương trình

• Sử dụng hàm giúp tối ưu bộ nhớ và tránh lặp lại công việc không cần thiết.

Nhờ những ưu điểm này, hàm đóng vai trò quan trọng trong lập trình JavaScript, giúp code trở nên rõ ràng, dễ đọc và dễ bảo trì hơn.

Định nghĩa hàm trong JavaScript

Trong JavaScript, hàm (function) là một khối mã được thiết kế để thực hiện một nhiệm vụ cụ thể. Hàm có thể được gọi nhiều lần mà không cần viết lại mã, giúp tăng tính tái sử dụng, tổ chức mã tốt hơn và dễ bảo trì.

Cấu trúc cơ bản của một hàm trong JavaScript

Một hàm trong JavaScript có thể có:

• Tên hàm (optional, tùy thuộc vào cách khai báo).

• Tham số (parameters): Dữ liệu đầu vào truyền vào hàm.

• Khối lệnh: Tập hợp các câu lệnh thực thi khi hàm được gọi.

• Giá trị trả về (return value): Giá trị kết quả của hàm (nếu có).

Ví dụ về một hàm cơ bản:

function greet(name) { 
    return `Xin chào, ${name}!`; 
}
console.log(greet("John")); // Output: Xin chào, John!

Các cách khai báo hàm trong JavaScript

JavaScript cung cấp nhiều cách để khai báo hàm, mỗi cách có đặc điểm riêng.

Hàm khai báo (Function Declaration)

Cú pháp:

function tenHam(thamSo1, thamSo2) {
    // Khối lệnh
    return giaTri;
}

Đặc điểm:

• Có thể gọi trước khi khai báo do hoisting (cơ chế kéo lên đầu).

• Cấu trúc dễ đọc, phù hợp cho các hàm cần sử dụng nhiều lần.

Ví dụ:

console.log(sum(5, 10)); // Gọi trước khi khai báo vẫn hoạt động (hoisting)

function sum(a, b) {
    return a + b;
}

Hàm biểu thức (Function Expression)

Cú pháp:

const tenHam = function(thamSo1, thamSo2) {
    // Khối lệnh
    return giaTri;
};

Đặc điểm:

• Không thể gọi trước khi khai báo (do không được hoisting như Function Declaration).

• Được lưu trữ trong một biến, có thể sử dụng như một giá trị.

• Thường dùng trong callback hoặc truyền vào các hàm khác.

Ví dụ:

console.log(multiply(5, 2)); // Lỗi: Cannot access 'multiply' before initialization

const multiply = function(a, b) {
    return a * b;
};

console.log(multiply(5, 2)); // Output: 10

const tenHam = (thamSo1, thamSo2) => {
    // Khối lệnh
    return giaTri;
};

const add = (a, b) => a + b; // Viết ngắn gọn khi có một câu lệnh return
console.log(add(3, 7)); // Output: 10

const functionExample = function() {
    console.log("Hàm ẩn danh!");
};

setTimeout(function() {
    console.log("Hàm ẩn danh được thực thi sau 2 giây!");
}, 2000);

(function() {
    console.log("Hàm IIFE được gọi ngay sau khi khai báo!");
})();

(function() {
    let secret = "Đây là một biến private!";
    console.log(secret); // Output: Đây là một biến private!
})();

// console.log(secret); // Lỗi: secret is not defined

function greet(name) {
    return `Xin chào, ${name}!`;
}
console.log(greet("John")); // Output: Xin chào, John!

function greet(name = "User") {
    return `Xin chào, ${name}!`;
}
console.log(greet()); // Output: Xin chào, User!
console.log(greet("Alice")); // Output: Xin chào, Alice!

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10
console.log(sum(5, 10, 15)); // Output: 30

function multiply(a, b) {
    return a * b;
}
console.log(multiply(5, 3)); // Output: 15

function sayHello() {
    console.log("Hello, world!");
}
console.log(sayHello()); // Output: Hello, world! + undefined

let globalVar = "Tôi là biến toàn cục";

function showGlobalVar() {
    console.log(globalVar); // Có thể truy cập
}
showGlobalVar(); // Output: Tôi là biến toàn cục
console.log(globalVar); // Output: Tôi là biến toàn cục

function myFunction() {
    let localVar = "Tôi là biến cục bộ";
    console.log(localVar); // Output: Tôi là biến cục bộ
}
myFunction();

// console.log(localVar); // Lỗi: localVar is not defined

function outerFunction(outerValue) {
    return function innerFunction(innerValue) {
        return `Outer: ${outerValue}, Inner: ${innerValue}`;
    };
}

const myClosure = outerFunction("Hello");
console.log(myClosure("World")); // Output: Outer: Hello, Inner: World

console.log(hello()); // Output: Xin chào!

function hello() {
    return "Xin chào!";
}

console.log(sayHi()); // Lỗi: Cannot access 'sayHi' before initialization

const sayHi = function() {
    return "Chào bạn!";
};

function greet(name, callback) {
    console.log("Xin chào, " + name);
    callback();
}

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

greet("Alice", sayGoodbye);
// Output:
// Xin chào, Alice
// Tạm biệt!

console.log("Bắt đầu");

setTimeout(() => {
    console.log("Đây là một Callback Function");
}, 2000);

console.log("Kết thúc");
// Output:
// Bắt đầu
// Kết thúc
// (Sau 2 giây) Đây là một Callback Function

function operate(a, b, callback) {
    return callback(a, b);
}

function add(x, y) {
    return x + y;
}

console.log(operate(5, 3, add)); // Output: 8

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

const scores = [45, 80, 90, 60, 75];
const passed = scores.filter(score => score >= 60);
console.log(passed); // Output: [80, 90, 60, 75]

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 15

const person = {
    name: "John",
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

const anotherPerson = { name: "Alice" };
person.greet.call(anotherPerson); // Output: Hello, Alice

function introduce(age, city) {
    console.log(`Tôi là ${this.name}, ${age} tuổi, đến từ ${city}`);
}

const person = { name: "David" };
introduce.apply(person, [25, "Hà Nội"]);
// Output: Tôi là David, 25 tuổi, đến từ Hà Nội

setTimeout(() => {
    console.log("Hàm này chạy sau 3 giây");
}, 3000);

let count = 0;
const interval = setInterval(() => {
    count++;
    console.log(`Lần thứ ${count}`);
    if (count === 5) clearInterval(interval); // Dừng sau 5 lần
}, 1000);