Sự Khác Biệt Giữa Hàm Khai Báo và Hàm Biểu Thức Trong JavaScript

Sự Khác Biệt Giữa Hàm Khai Báo (Function Declaration) và Hàm Biểu Thức (Function Expression) Trong JavaScript

Trong JavaScript, có hai cách cơ bản để định nghĩa một hàm: hàm khai báo (function declaration) và hàm biểu thức (function expression). Mỗi cách có các đặc điểm và cách thức hoạt động khác nhau. Dưới đây là chi tiết về sự khác biệt giữa chúng:

Hàm Khai Báo (Function Declaration)

• Cú pháp:

  function functionName(parameters) {
    // function body
  }
  

• Hoisting: Hàm khai báo được hoisted (đưa lên đầu) trong phạm vi của chúng, nghĩa là bạn có thể gọi hàm trước khi nó được định nghĩa trong mã nguồn.

• Ví dụ:

  greet(); // Output: "Hello, World!"
  
  function greet() {
    console.log("Hello, World!");
  }
  

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

• Cú pháp:

  const functionName = function(parameters) {
    // function body
  };
  

• Hoisting: Hàm biểu thức không được hoisted, nghĩa là bạn không thể gọi hàm trước khi nó được định nghĩa trong mã nguồn.

• Ví dụ:

  greet(); // Error: Cannot access 'greet' before initialization
  
  const greet = function() {
    console.log("Hello, World!");
  };
  

So Sánh Chi Tiết

1. Hoisting

• Hàm Khai Báo (Function Declaration):

  • Hàm khai báo được hoisted, tức là bạn có thể gọi hàm trước khi nó được định nghĩa.
  • Ví dụ:

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

• Hàm Biểu Thức (Function Expression):

  • Hàm biểu thức không được hoisted, tức là bạn không thể gọi hàm trước khi nó được định nghĩa.
  • Ví dụ:

    sayHello(); // Error: Cannot access 'sayHello' before initialization
    
    const sayHello = function() {
      console.log("Hello!");
    };
    

2. Tên Hàm

• Hàm Khai Báo (Function Declaration):

  • Luôn có tên hàm.
  • Ví dụ:

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

• Hàm Biểu Thức (Function Expression):

  • Có thể là hàm ẩn danh (anonymous function) hoặc hàm có tên.
  • Ví dụ:

    const sayHello = function() {
      console.log("Hello!");
    };
    
    const sayHelloNamed = function greet() {
      console.log("Hello!");
    };
    

3. Phạm Vi (Scope)

• Hàm Khai Báo (Function Declaration):

  • Được định nghĩa trong phạm vi hàm hoặc khối (block) chứa nó.
  • Ví dụ:

    function outer() {
      function inner() {
        console.log("Inner function");
      }
      inner(); // Có thể gọi hàm inner
    }
    

• Hàm Biểu Thức (Function Expression):

  • Được định nghĩa trong phạm vi của biến chứa nó.
  • Ví dụ:

    const outer = function() {
      const inner = function() {
        console.log("Inner function");
      };
      inner(); // Có thể gọi hàm inner
    };
    

Tổng Kết

• Hàm Khai Báo (Function Declaration):

  • Hoisting: Được hoisted, có thể gọi trước khi định nghĩa.
  • Tên hàm: Luôn có tên.
  • Phạm vi: Được định nghĩa trong phạm vi hàm hoặc khối chứa nó.
  • Ví dụ:

    function greet() {
      console.log("Hello, World!");
    }
    

• Hàm Biểu Thức (Function Expression):

  • Hoisting: Không được hoisted, không thể gọi trước khi định nghĩa.
  • Tên hàm: Có thể là hàm ẩn danh hoặc hàm có tên.
  • Phạm vi: Được định nghĩa trong phạm vi của biến chứa nó.
  • Ví dụ:

    const greet = function() {
      console.log("Hello, World!");
    };
    

Hiểu rõ sự khác biệt giữa hàm khai báo và hàm biểu thức sẽ giúp bạn sử dụng chúng một cách hiệu quả hơn trong các tình huống lập trình cụ thể.