Sắc thái của biểu thức hàm trong JavaScript

Tên gọi Function Expression không phải ngẫu nhiên. Nó thực sự có nghĩa như vậy - rằng những hàm như vậy là một phần của một biểu thức nào đó.

Ví dụ, chúng ta có thể cộng một chuỗi nào đó với một hàm không tên:

let str = 'str' + function() {return 3;};
console.log(str); // sẽ hiển thị 'strfunction() {return 3;}'

Tại sao chúng ta thấy kết quả kỳ lạ như vậy, mà không phải là số 3? Bởi vì số hạng thứ hai không phải là kết quả của việc gọi hàm, mà là mã nguồn của nó (vì chúng ta không gọi hàm đó, mà chỉ đơn giản viết nó ra).

Tức là, tên gọi biểu thức hàm biểu thị rằng một hàm như vậy tham gia vào một biểu thức nào đó.

Phép gán cho một biến cũng là một biểu thức:

let func = function() {
	console.log('!');
};

Chúng ta cũng có thể, ví dụ, truyền một hàm dưới dạng tham số vào console.log và nó sẽ xuất mã nguồn của hàm đó ra console - điều này cũng sẽ được coi là một biểu thức:

console.log(function() {return 3;});

Tại sao điều này quan trọng: bởi vì sự khác biệt giữa Function Declaration và Function Expression hoàn toàn không phải là hàm thứ nhất được tạo với tên, còn hàm thứ hai ban đầu không có tên. Không phải vậy.

Ví dụ. Đây là một hàm không tên, nhưng đồng thời không tham gia vào bất kỳ biểu thức nào (tức là không có hành động nào được thực hiện với nó, nói một cách đơn giản):

/*
	Hàm này sẽ là Function Declaration,
	nhưng có lỗi cú pháp:
*/
function() {
	console.log('!');
}

Mã như vậy thậm chí sẽ báo lỗi! Tại sao: vì hàm không tham gia vào bất kỳ biểu thức nào, trình duyệt coi nó là Function Declaration, nhưng không tìm thấy tên của nó và báo lỗi.

Để lỗi biến mất, cần làm cho hàm trở thành một phần của một biểu thức nào đó. Ví dụ, viết thêm phép toán + trước nó:

+function() { // mã như vậy là chính xác
	console.log('!');
};

Cách thức hoạt động: bản thân phép toán + không làm gì cả, nó giống như viết số +3 thay vì số 3 - được phép, nhưng không thay đổi gì.

Nhưng trong trường hợp với hàm - nó thay đổi. Bây giờ hàm của chúng ta không chỉ đơn giản được viết ra, mà còn tham gia vào một biểu thức. Do đó, bây giờ sẽ không có lỗi. Cũng sẽ không có kết quả thực thi của hàm, vì chúng ta chỉ viết nó ra, chứ không gọi nó.

Thay vì +, có thể viết bất cứ thứ gì. Ví dụ:

-function() { // mã như vậy là chính xác
	console.log('!');
};

!function() { // mã như vậy là chính xác
	console.log('!');
};

Chúng ta cũng có thể đặt hàm của chúng ta trong dấu ngoặc tròn, trong trường hợp này nó cũng sẽ trở thành một biểu thức hàm:

(function() { // mã như vậy là chính xác
	console.log('!');
});