Chức năng

3.1 Khai báo hàm

Hàm là một trong những khối xây dựng cơ bản trong JavaScript. Nó cho phép bạn tổ chức mã, sử dụng lại logic và tạo ra các cấu trúc phức tạp hơn. Hãy xem xét ba cách chính để khai báo và sử dụng hàm: khai báo hàm, biểu thức hàm và hàm mũi tên.

Khai báo hàm — là cách tạo một hàm có tên mà bạn có thể gọi sau này. Những hàm này được "nâng lên" (hoisted) lên đỉnh của phạm vi của chúng, cho phép chúng được gọi trước khi được khai báo trong mã.

Cú pháp:

    
      function name (arguments) {
        // body của hàm
      }
    
  

Ví dụ sử dụng:

    
      // Khai báo hàm
      function greet(name) {
        return `Hello, ${name}!`;
      }

      // Gọi hàm
      console.log(greet('Alice')); // Xuất: Hello, Alice!
    
  

3.2 Biểu thức hàm

Biểu thức hàm tạo ra các hàm ẩn danh (hàm không có tên) và có thể được gán cho biến. Những hàm này không "nâng lên", vì vậy chúng chỉ có thể được gọi sau khi khai báo.

Cú pháp:

    
      const name = function (arguments) {
        // body của hàm
      }
    
  

Ví dụ sử dụng:

    
      // Biểu thức hàm

      const greet = function(name) {
        return `Hello, ${name}!`;
      };

      // Gọi hàm
      console.log(greet('Bob')); // Xuất: Hello, Bob!
    
  

3.3 Hàm mũi tên

Hàm mũi tên (arrow functions) — là cách khai báo hàm ngắn gọn, đồng thời giữ lại ngữ cảnh this từ phạm vi cha. Hàm mũi tên không có this riêng, vì vậy chúng đặc biệt hữu ích trong các event handlers và phương thức của mảng.

Cú pháp:

    
      const name = (arguments) => {
        // body của hàm
      }
    
  

Nếu hàm nhận một tham số, có thể bỏ qua dấu ngoặc. Nếu hàm trả về một biểu thức, có thể bỏ qua dấu ngoặc nhọn và từ khóa return.

Ví dụ 1: Đầy đủ

    
      // Hàm mũi tên

      const greet = (name) => {
        return `Hello, ${name}!`;
      };

      // Gọi hàm
      console.log(greet('Charlie')); // Xuất: Hello, Charlie!
    
  

Ví dụ 2: Ngắn gọn

    
      // Hàm mũi tên với một tham số và một biểu thức
      const greet = name => `Hello, ${name}!`;

      // Gọi hàm
      console.log(greet('Dana')); // Xuất: Hello, Dana!
    
  

3.4 So sánh cách khai báo hàm

Nâng lên (hoisting):

• Khai báo hàm: các hàm được nâng lên, cho phép chúng được gọi trước khi khai báo
• Biểu thức hàm và Hàm mũi tên: không được nâng lên, chỉ có thể gọi sau khi khai báo

Ngữ cảnh this:

• Khai báo hàm và Biểu thức hàm: có ngữ cảnh this riêng
• Hàm mũi tên: không có this riêng, ngữ cảnh được kế thừa từ phạm vi cha

Tiện lợi viết mã:

• Hàm mũi tên: ngắn gọn hơn và thường được sử dụng cho các hàm ngắn và callback