Tìm hiểu về function trong JavaScript

Trong lập trình có một kiến thức khá là quan trọng mà bất cứ ai khi học đều phải nắm đó là hàm. Vậy hàm là gì, các loại hàm trong JavaScript và cách sử dụng đều sẽ được trình bày ở bài viết dưới đây.

I. Hàm là gì?

Hàm là một tập hợp các dòng lệnh dùng để giải quyết một vấn đề cụ thể nào đó tùy thuộc đầu vào và có thể trả về kết quả tương ứng. Điều này giúp việc lập trình dễ dàng hơn, cho phép sử dụng lại code cũng như thay đổi, nâng cấp sản phẩm một cách hiệu quả.

II. Các loại hàm(function) trong JavaScript

1. Function bình thường

Function không có tham số là hàm mà kết quả thực thi của nó luôn luôn không thay đổi.

Ví dụ về một Function bình thường không tham số và không có giá trị trả về.

function sayHelloWord () {
  console.log("Hello Word!");
}

sayHelloWord(); // Gọi function sayHelloWord

Ví dụ về 1 function bình thường có tham số và có giá trị trả về

function square(number) {
 return number * number;
}
console.log(square(2));

2. Arrow function

Arrow Function là một cách viết function khác được bổ sung từ ES6, giúp code được ngắn gọn, dể hiểu hơn. Arrow functions không ràng buộc this.

Ví dụ về một Arrow Function không tham số và không trả về bất cứ giá trị gì.  

const sayHelloWord = () => {
  console.log("Hello Word!");
}
sayHelloWord();  //Cách gọi 1 Arrow Function giống như gọi 1 Function bình thường

Tại sao hàm trên là không trả về bất cứ giá trị gì?

=> Nếu bạn cố gắng để lưu trữ kết quả của function được gọi ở trên vào một biến nó sẽ nhận giá trị "undefined". Theo dõi ví dụ dưới đây

let message = sayHelloWord();
// The below console.log will return undefined as the function 
// doesn't return any value.
console.log (message);

Lưu ý: Nếu function không return bất cứ một giá trị nào một cách rõ ràng, thì mặc định khi gọi hàm sẽ trả về "undefined"

Ví dụ về một Arrow Function có tham số và có trả về giá trị

const total = (a, b) => {
 return a + b 
};

 3. Anonymous functions

Anonymous functions là hàm ẩn danh, là một hàm được sinh ra đúng vào thời điểm chạy của chương trình. Anonymous functions được khai báo bằng cách sử dụng toán tử thay vì sử dụng cú pháp định nghĩa hàm thông thường.

Ví dụ 1 Anonymous function

var callMe = function()
{
    alert('Alo!');
};
callMe();

4. Function lấy function như một tham số(callback funtion)

Function là first-class object do đó chúng có thể được truyền như là tham số/ đối số trong một hàm.

Theo dõi ví dụ dưới để hiểu hơn

    // Định nghĩa một hàm tên là dispatch để nhận một hàm làm tham số truyền vào.
    function dispatch(cb) {
        cb();
    }

    // Cách 1: khai báo 1 arrow function để làm tham số
    const say = () => {
        console.log("Hello Word 1!");
    }
    dispatch(say);

    // Cách 2: khai báo 1 anonymous function bên trong
    dispatch(function () {
        console.log("Hello Word 2!");
    });

    // Cách 3: khai báo 1 arrow function bên trong
    dispatch(() = > {
        console.log("Hello Word 3!");
    });
    

5. Function có thể gọi chính nó (giống như đệ quy) 

Trong lập trình có 1 khái niệm là đệ quy, hàm có thể được gọi lại chính nó. Nếu bạn không cho thêm điều kiện để dừng thì nó sẽ chạy mãi mãi đến khi tràn bộ nhớ và lỗi.

Ví dụ một function được gọi lại và có xử lý điều kiện dừng.

function countDown(n) {
  console.log (n);
  if (n >= 1) {  //Điều kiện để dừng
    countDown(n-1);
  }
}

countDown(5);  // -> Output sẽ là 5, 4, 3, 2, 1, 0

Bài viết nên đọc

• Phân loại thẻ HTML và cách chuyển đổi khối
• Tìm hiểu về cấu trúc và cách định dạng của thẻ HTML
• Phân nhóm định dạng CSS
• Tìm hiểu selectors trong CSS
• Javascript là gì?
• Tìm hiểu về biến trong JavaScript

Trên đây là những kiến thức từ kinh nghiệm bản thân mình nên các bạn có thể tham khảo. Nếu các bạn có góp ý cho mình thì hãy gửi vào đây, mình sẵn sàng nhận ý kiến đóng góp từ các bạn.