Tham số hàm Function trong JavaScript

Trong JavaScript, hàm (function) là một thành phần quan trọng giúp tổ chức và tái sử dụng mã nguồn hiệu quả. Để hàm có thể hoạt động linh hoạt hơn, ta cần truyền dữ liệu vào thông qua tham số (parameters). Tham số giúp hàm nhận giá trị từ bên ngoài, xử lý và trả về kết quả mong muốn.

Việc hiểu rõ cách sử dụng tham số trong JavaScript không chỉ giúp tối ưu mã nguồn mà còn nâng cao khả năng xây dựng các chương trình phức tạp. JavaScript cung cấp nhiều cơ chế làm việc với tham số như tham số mặc định, toán tử rest (...args), truyền tham số theo giá trị hoặc tham chiếu, và thậm chí là destructuring parameters giúp viết mã gọn gàng và dễ hiểu hơn.

Trong bài viết này, mình sẽ tìm hiểu chi tiết về tham số trong hàm, cách truyền dữ liệu, cũng như những kỹ thuật nâng cao giúp lập trình viên tận dụng tối đa sức mạnh của JavaScript.

Tham số trong Hàm JavaScript

Trong JavaScript, hàm (function) là một khối mã được thiết kế để thực hiện một tác vụ cụ thể. Để một hàm hoạt động linh hoạt và có thể tái sử dụng trong nhiều tình huống khác nhau, chúng ta cần sử dụng tham số (parameters).

Tham số là gì?

Tham số là các biến được khai báo trong phần định nghĩa của một hàm và được sử dụng để truyền dữ liệu từ bên ngoài vào hàm. Khi gọi hàm, chúng ta cung cấp đối số (arguments) – tức là giá trị thực tế truyền vào tham số để hàm xử lý.

Ví dụ về tham số trong JavaScript:

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

greet("Linh"); // Output: Xin chào, Linh!
greet("An");   // Output: Xin chào, An!

Ở ví dụ trên, name là tham số của hàm greet(), và khi gọi hàm, chúng ta truyền vào các đối số như "Linh" và "An" để nhận kết quả tương ứng.

Vai trò của tham số trong hàm

Tham số giúp hàm hoạt động linh hoạt hơn bằng cách cho phép truyền dữ liệu vào thay vì sử dụng các giá trị cố định. Một số vai trò chính của tham số trong hàm:

Truyền dữ liệu từ bên ngoài vào hàm để xử lý

Thay vì sử dụng giá trị cố định trong hàm, tham số giúp nhận giá trị động, giúp mã nguồn linh hoạt và dễ tái sử dụng hơn.

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

console.log(add(5, 3));  // Output: 8
console.log(add(10, 20)); // Output: 30

Ở đây, a và b là hai tham số giúp hàm add() có thể thực hiện phép cộng với nhiều giá trị khác nhau.

Giúp hàm có thể tái sử dụng nhiều lần với nhiều dữ liệu khác nhau

Hàm có tham số có thể áp dụng cho nhiều tình huống mà không cần viết lại mã nhiều lần.

function calculateArea(width, height) {
    return width * height;
}

console.log(calculateArea(5, 10)); // Output: 50
console.log(calculateArea(7, 3));  // Output: 21

Nếu không có tham số, chúng ta phải viết riêng từng hàm cho từng giá trị width và height, làm mã nguồn trở nên rườm rà.

Giúp tối ưu hóa mã nguồn và tăng tính bảo trì

Thay vì phải sửa đổi trực tiếp trong hàm mỗi khi muốn xử lý dữ liệu mới, chúng ta chỉ cần thay đổi giá trị của tham số khi gọi hàm. Điều này giúp mã nguồn dễ đọc, dễ quản lý và dễ bảo trì hơn.

Tăng hiệu suất và tiết kiệm bộ nhớ

Việc sử dụng tham số giúp tránh việc tạo nhiều biến không cần thiết, giảm lượng mã trùng lặp và giúp chương trình chạy nhanh hơn.

Khái niệm về tham số hàm trong JavaScript

• Tham số (parameters): Là các biến được định nghĩa trong phần khai báo của một hàm. Chúng đại diện cho các giá trị mà hàm sẽ nhận khi được gọi.

• Đối số (arguments): Là các giá trị thực tế được truyền vào khi gọi hàm.

Ví dụ minh họa:

function greet(name) { // name là tham số
    console.log(`Xin chào, ${name}!`);
}

greet("Linh"); // "Linh" là đối số, Output: Xin chào, Linh!
greet("An");   // "An" là đối số, Output: Xin chào, An!

function add(a, b) {  // a, b là tham số
    return a + b;
}

console.log(add(5, 3));  // 5 và 3 là đối số, Output: 8
console.log(add(10, 20)); // 10 và 20 là đối số, Output: 30

function multiply(x, y) {
    return x * y;
}
console.log(multiply(4, 5)); // Output: 20

function printPerson(person) {
    console.log(`Tên: ${person.name}, Tuổi: ${person.age}`);
}

const student = { name: "Minh", age: 22 };
printPerson(student); // Output: Tên: Minh, Tuổi: 22

function sum(numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum([1, 2, 3, 4])); // Output: 10

function execute(callback) {
    callback();
}

execute(() => console.log("Hàm được gọi!")); // Output: Hàm được gọi!

function functionName(parameter = defaultValue) {
    // Code xử lý
}

function greet(name = "Người dùng") {
    console.log(`Xin chào, ${name}!`);
}

greet();         // Output: Xin chào, Người dùng!
greet("Linh");   // Output: Xin chào, Linh!

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

console.log(multiply(5, 3)); // Output: 15
console.log(multiply(4));    // Output: 4 (b mặc định là 1)
console.log(multiply());     // Output: 1 (cả a và b mặc định là 1)

function generateRandom() {
    return Math.floor(Math.random() * 10);
}

function printNumber(num = generateRandom()) {
    console.log(`Số được chọn: ${num}`);
}

printNumber(); // Output: Số được chọn: (một số ngẫu nhiên từ 0 đến 9)
printNumber(7); // Output: Số được chọn: 7

function tenHam(...args) {
    // args là một mảng chứa tất cả các đối số được truyền vào
}

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // Output: 15
console.log(sum(10, 20, 30));    // Output: 60
console.log(sum());              // Output: 0

function introduce(name, age, ...hobbies) {
    console.log(`Xin chào, tôi là ${name}, ${age} tuổi.`);
    console.log(`Sở thích của tôi: ${hobbies.join(", ")}`);
}

introduce("Linh", 25, "Đọc sách", "Chơi game", "Du lịch");
// Output:
// Xin chào, tôi là Linh, 25 tuổi.
// Sở thích của tôi: Đọc sách, Chơi game, Du lịch

function displayInfo(first, second, ...others) {
    console.log("Người đầu tiên:", first);
    console.log("Người thứ hai:", second);
    console.log("Những người còn lại:", others);
}

displayInfo("An", "Bình", "Châu", "Dũng", "Hà");
// Output:
// Người đầu tiên: An
// Người thứ hai: Bình
// Những người còn lại: [ 'Châu', 'Dũng', 'Hà' ]

function changeValue(x) {
    x = 10;
    console.log("Giá trị bên trong hàm:", x);
}

let num = 5;
changeValue(num);
console.log("Giá trị bên ngoài hàm:", num);

// Output:
// Giá trị bên trong hàm: 10
// Giá trị bên ngoài hàm: 5 (Không bị thay đổi)

function updatePerson(person) {
    person.age = 30;
    console.log("Tuổi bên trong hàm:", person.age);
}

let student = { name: "Linh", age: 25 };
updatePerson(student);
console.log("Tuổi bên ngoài hàm:", student.age);

// Output:
// Tuổi bên trong hàm: 30
// Tuổi bên ngoài hàm: 30 (Bị thay đổi)

function updatePerson(person) {
    let newPerson = Object.assign({}, person); // Sao chép object
    newPerson.age = 30;
    console.log("Tuổi bên trong hàm:", newPerson.age);
}

let student = { name: "Linh", age: 25 };
updatePerson(student);
console.log("Tuổi bên ngoài hàm:", student.age);

// Output:
// Tuổi bên trong hàm: 30
// Tuổi bên ngoài hàm: 25 (Không bị thay đổi)

function updatePerson(person) {
    let newPerson = { ...person }; // Tạo bản sao mới
    newPerson.age = 30;
    console.log("Tuổi bên trong hàm:", newPerson.age);
}

let student = { name: "Linh", age: 25 };
updatePerson(student);
console.log("Tuổi bên ngoài hàm:", student.age);

// Output:
// Tuổi bên trong hàm: 30
// Tuổi bên ngoài hàm: 25 (Không bị thay đổi)

function sum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(sum(1, 2, 3, 4)); // Output: 10
console.log(sum(10, 20));     // Output: 30
console.log(sum());           // Output: 0

const testArgs = () => {
    console.log(arguments);
};

testArgs(1, 2, 3); // Error: arguments is not defined

function normalFunction() {
    console.log(arguments); // arguments object
}

const arrowFunction = (...args) => {
    console.log(args); // Mảng thực sự
};

normalFunction(1, 2, 3);  // Output: [Arguments] { '0': 1, '1': 2, '2': 3 }
arrowFunction(1, 2, 3);   // Output: [1, 2, 3]

function printUserInfo({ name, age, city }) {
    console.log(`Tên: ${name}`);
    console.log(`Tuổi: ${age}`);
    console.log(`Thành phố: ${city}`);
}

const user = {
    name: "Linh",
    age: 25,
    city: "Hà Nội"
};

printUserInfo(user);

// Output:
// Tên: Linh
// Tuổi: 25
// Thành phố: Hà Nội

function greet({ name = "User", age = 18 }) {
    console.log(`Xin chào ${name}, bạn ${age} tuổi.`);
}

greet({ name: "Dũng" }); 
// Output: Xin chào Dũng, bạn 18 tuổi.

greet({});
// Output: Xin chào User, bạn 18 tuổi.

function displayBook({ title: bookTitle, author: bookAuthor }) {
    console.log(`Sách: ${bookTitle}`);
    console.log(`Tác giả: ${bookAuthor}`);
}

const book = {
    title: "JavaScript Basics",
    author: "John Doe"
};

displayBook(book);

// Output:
// Sách: JavaScript Basics
// Tác giả: John Doe

function printCoordinates([x, y]) {
    console.log(`Tọa độ X: ${x}`);
    console.log(`Tọa độ Y: $2025`);
}

const point = [10, 20];
printCoordinates(point);

// Output:
// Tọa độ X: 10
// Tọa độ Y: 20

function displayUser([name = "User", age = 18]) {
    console.log(`Tên: ${name}, Tuổi: ${age}`);
}

displayUser(["Linh"]); // Output: Tên: Linh, Tuổi: 18
displayUser([]);       // Output: Tên: User, Tuổi: 18

function getThirdItem([, , third]) {
    console.log(`Phần tử thứ ba: ${third}`);
}

const numbers = [10, 20, 30, 40];
getThirdItem(numbers);

// Output:
// Phần tử thứ ba: 30