Giải thích sự khác biệt về cách sử dụng foo giữa function foo() {} và var foo = function() {} là gì?

Question

Tử Tuyết · Accepted Answer

Sự khác biệt giữa cách sử dụng foo trong function foo() {} và var foo = function() {}
Trong JavaScript, cả hai cú pháp function foo() {} và var foo = function() {} đều tạo ra một hàm, nhưng có một số khác biệt quan trọng về cách chúng hoạt động, đặc biệt là về hoisting, cách khai báo và phạm vi sử dụng.
1. function foo() {} (Function Declaration)
Hoisting (Kéo lên): Với cú pháp này, hàm được hoisted (được &#8220;kéo lên&#8221;) trong phạm vi của nó. Điều này có nghĩa là bạn có thể gọi hàm foo trước khi hàm được khai báo trong mã của bạn.
Khai báo toàn cục: Hàm này được tạo ra tại thời điểm biên dịch, và có sẵn ở bất cứ đâu trong phạm vi chứa nó, trước khi đoạn mã thực thi.
Ví dụ:
foo(); // Có thể gọi hàm trước khi khai báo
function foo() {
    console.log('Function Declaration');
}
Kết quả là:
Function Declaration
Hàm foo được kéo lên đầu phạm vi và có thể sử dụng ở bất cứ đâu trước hay sau khi được khai báo.
2. var foo = function() {} (Function Expression)
Hoisting (Kéo lên): Trong trường hợp này, chỉ có biến foo được kéo lên, nhưng giá trị của biến chưa được gán cho hàm cho đến khi mã thực thi tới dòng đó. Điều này có nghĩa là bạn không thể gọi foo trước khi hàm được gán cho biến.
Khai báo như biến: Hàm này được gán cho biến foo, và chỉ có sẵn sau khi mã gán hàm cho biến được thực thi.
Ví dụ:
foo(); // Lỗi: foo is not a function
var foo = function() {
    console.log('Function Expression');
}
Kết quả là:
Uncaught TypeError: foo is not a function
Ở đây, việc gọi foo trước khi gán hàm cho nó sẽ gây ra lỗi vì foo ban đầu chỉ là undefined do hoisting, nhưng chưa được gán giá trị là một hàm.
3. Sự khác biệt chính
Hoisting:
function foo() {}: Được hoisting đầy đủ, nghĩa là hàm có thể được gọi trước khi nó được khai báo trong mã.
var foo = function() {}: Chỉ biến foo được hoisting (kéo lên), nhưng giá trị của nó không được hoisted. Vì vậy, bạn không thể gọi hàm trước khi gán giá trị.
Khả năng sử dụng trước khai báo:
function foo() {}: Có thể gọi hàm trước khi khai báo.
var foo = function() {}: Không thể gọi hàm trước khi gán giá trị.
4. Ví dụ minh họa chi tiết
Function Declaration:
foo(); // Gọi được, vì hàm đã được hoisting
function foo() {
    console.log('This is a function declaration');
}
Function Expression:
foo(); // Lỗi: foo is not a function
var foo = function() {
    console.log('This is a function expression');
};
Tóm lại, function foo() {} cho phép bạn gọi hàm ở bất kỳ đâu trong phạm vi trước và sau khi khai báo do cơ chế hoisting, trong khi var foo = function() {} đòi hỏi bạn phải gán hàm trước khi có thể gọi nó.