TopDev
# JavaScript

Cách sử dụng hàm (Function) trong JavaScript

minhu 📖 4 phút đọc

Hàm (function) trong JavaScript là một khối mã thực hiện một nhiệm vụ cụ thể và có thể được gọi lại nhiều lần trong mã của bạn. Hàm giúp tổ chức mã, tái sử dụng mã và làm cho chương trình dễ đọc hơn. Dưới đây là hướng dẫn chi tiết về cách sử dụng hàm trong JavaScript:

1. Khai Báo Hàm#

Bạn có thể khai báo hàm theo nhiều cách khác nhau trong JavaScript:

a. Hàm Thông Thường (Function Declaration)

  • Cú Pháp: function functionName(parameters) { // Thân hàm return result; // (tùy chọn) }

  • Ví Dụ: function greet(name) { returnHello, ${name}!`; }

    console.log(greet('Alice')); // "Hello, Alice!" `

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

  • Cú Pháp: const functionName = function(parameters) { // Thân hàm return result; // (tùy chọn) };

  • Ví Dụ: ` const add = function(a, b) { return a + b; };

    console.log(add(3, 4)); // 7 `

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

  • Cú Pháp: const functionName = (parameters) => { // Thân hàm return result; // (tùy chọn) };

  • Ví Dụ: ` const multiply = (x, y) => x * y;

    console.log(multiply(5, 6)); // 30 `

    Nếu hàm chỉ có một câu lệnh và trả về giá trị, bạn có thể bỏ qua dấu ngoặc nhọn và từ khóa return: ` const square = n => n * n;

    console.log(square(5)); // 25 `

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

  • Cú Pháp: (function() { // Thân hàm })();

  • Ví Dụ: (function() { console.log("This is an IIFE!"); })();

2. Gọi Hàm#

Sau khi khai báo, bạn có thể gọi hàm bằng cách sử dụng tên hàm và cung cấp các đối số nếu cần:

  • Ví Dụ: ` function sayHello() { console.log("Hello, world!"); }

    sayHello(); // In ra "Hello, world!" `

3. Tham Số và Đối Số#

  • Tham Số: Là các biến được định nghĩa trong phần khai báo hàm.

  • Đối Số: Là các giá trị được truyền vào khi gọi hàm.

  • Ví Dụ: function greet(name, age) { console.log(Hello, ${name}. You are ${age} years old.`); }

    greet('Bob', 25); // "Hello, Bob. You are 25 years old." `

4. Giá Trị Mặc Định#

Bạn có thể đặt giá trị mặc định cho tham số của hàm:

  • Cú Pháp: function greet(name = 'Guest') { returnHello, ${name}!`; }

    console.log(greet()); // "Hello, Guest!" `

5. Hàm Trả Về Giá Trị#

Hàm có thể trả về một giá trị sử dụng từ khóa return. Nếu không có từ khóa return, hàm sẽ trả về undefined.

  • Ví Dụ: ` function add(a, b) { return a + b; }

    let result = add(10, 5); console.log(result); // 15 `

6. Hàm Nặc Danh (Anonymous Function)#

Hàm nặc danh là hàm không có tên, thường được sử dụng như một tham số của hàm khác hoặc để gán vào biến.

  • Ví Dụ: setTimeout(function() { console.log("Executed after 1 second"); }, 1000);

7. Hàm Callback#

Hàm callback là một hàm được truyền như một đối số cho một hàm khác và được gọi khi một số sự kiện xảy ra hoặc một phép toán hoàn tất.

  • Ví Dụ: ` function fetchData(callback) { setTimeout(() => { callback('Data fetched'); }, 2000); }

    fetchData(function(data) { console.log(data); // "Data fetched" }); `

8. Hàm Đệ Quy (Recursive Function)#

Hàm đệ quy là hàm gọi chính nó để giải quyết các vấn đề phức tạp hơn theo cách chia nhỏ.

  • Ví Dụ: ` function factorial(n) { if (n === 0) { return 1; } else { return n * factorial(n - 1); } }

    console.log(factorial(5)); // 120 `

9. Tóm Tắt#

  • Khai Báo Hàm: Có thể thực hiện bằng cách sử dụng hàm thông thường, hàm biểu thức, hàm mũi tên, hoặc hàm tự gọi.

  • Gọi Hàm: Sử dụng tên hàm và cung cấp đối số.

  • Tham Số và Đối Số: Tham số là biến định nghĩa trong hàm, đối số là giá trị được truyền vào.

  • Giá Trị Mặc Định: Có thể thiết lập giá trị mặc định cho tham số.

  • Hàm Callback: Hàm được truyền và gọi trong một hàm khác.

  • Hàm Đệ Quy: Hàm gọi chính nó để giải quyết vấn đề.

Hàm là một phần quan trọng trong JavaScript giúp tổ chức mã và tái sử dụng logic, và việc hiểu rõ cách sử dụng chúng giúp bạn viết mã hiệu quả và dễ bảo trì hơn.

Bài liên quan trong # JavaScript

✓ Đã sao chép link