Giới thiệu về biểu thức IIFE

IIFE là một dạng thức mà chúng ta cần nắm vững khi viết một chương trình Javascript. Trong bài viết này sẽ giúp các nắm rõ được nó.

Dạng thức của IIFE

IIFE phát âm na ná là ‘íph-phi’, có dạng thức

lưu ý:

• Có thể sử dụng 1 trong 2.
• thêm dấu chấm phẩy ở cuối
• hàm có thể được đặt tên nếu thích

Kiến trúc IIFE: giới thiệu một phạm vi mới

Đôi khi bạn không muốn tạo một biến có giá trị toàn cục. Để làm được như vậy, ta không thể đặt nơi khai báo biến ở trong một khối lệnh — block scope, thay vào đó, ta đặt ở trong một hàm, bởi vì biến có phạm vi hàm — function scope. Tuy nhiên, có một giải pháp để giả lập phạm vi khối lệnh là IIFE — Immediately Invoked Function Expression.

> Lưu ý 1: Khối lệnh được sử dụng để nhóm từ 0 tới nhiều câu lệnh. Nó được xác định bởi cặp ngoặc xoắn `{ }` và tùy chọn được đánh nhãn:

> Lưu ý 2: Block scope — Phạm vi khối lệnh là rất phổ biến ở các ngôn ngữ khác. Lập trình viên mới từ các ngôn ngữ đấy chuyển sang sử dụng sẽ thấy khá bối rối khi làm quen với phạm vi của các biến trong Javascript.

VD về IIFE như sau:

Dịch ra có nghĩa “biểu thức hàm được thực thi tức thời”.

Giải thích: Khi ta đặt phần định nghĩa hàm trong cặp ngoặc tròn `( )` ta sẽ được một biểu thức hàm. Sau đó ta có thể thực thi hàm bằng cách thêm vào một cặp ngoặc `( )` nữa. Như vậy, ngoặc `( )` thứ nhất cho ta một biểu thức hàm, và ngoặc `( )` thứ hai sẽ thực thi hàm.

❓❓❓ Vẫn còn thắc mắc 🤔

> Tại sao nói IIFE đi giả lập phạm vi khối lệnh — block scope?

Trước tiên hãy xem một ví dụ sau:

Một lập trình viên dùng ngôn ngữ sử dụng phạm vi khối lệnh sẽ không thấy có gì sai với đoạn mã trên, và nghĩ câu lệnh cuối sẽ cho kết quả — Alice has an apple. Vấn đề này đưa ra giải pháp là tránh khai báo các biến có chung tên trong cùng một phạm vi, chả hạn đổi tên fruit ở (2) thành f. Nhưng giả sử chúng ta thực sự muốn sử dụng phạm vi khối lệnh trong Javascript, ta có thể làm như sau:

Giải pháp này sử dụng IIFE để giả lập phạm vi khối lệnh. Vì trong Javascript có cơ chế phạm vi hàm, chúng ta sẽ định nghĩa và gọi ngay một hàm mới trong mỗi lần lặp. Đây là cách thức tương tự phạm vi khối lệnh, có thể coi mỗi biến fruit chỉ hoạt động ở bên trong vòng lặp for.

Ngẫu nhiên chia sẻ biến thông qua closure

Cơ chế Closures giúp cho hàm ở bên trong có thể truy xuất tới các biến bên ngoài, mà trong một số trường hợp nó không phải cách bạn muốn:

Giá trị trả về ở dòng (1) luôn luôn là giá trị hiện thời của year, không phải giá trị tại mỗi thời điểm khởi tạo hàm nặc danh. Sau khi kết thúc vòng lặp, year có giá trị là 5, đó là lý do tại sao tất cả các hàm trong mảng cùng trả về 5. 😵😵😵

> ❓❓❓ Làm sao để hàm ở dòng (1) trả về giá trị của year tại các thời điểm khác nhau? 🤔

Cách thức: Vì year có phạm vi không chỉ trong vòng lặp for. Ta cần có một biến khác chỉ có phạm vi trong vòng lặp for. Vậy ta sẽ tạo ra một biến y có mục đích lưu giá trị tại thời điểm của từng lần lặp.

Đó vẫn chưa phải kết quả ta muốn. Điểm nữa là y không thỏa mãn tiêu chí chỉ có phạm vi trong khối lệnh của for. Ta cần phải “thu hẹp” phạm vi của y. Ta sẽ sử dụng biểu thức IIFE.

> A: Sử dụng ra sao?

> B: Đặt (2) & (3) vào (function() {…})()

Lưu ý: Với ES6, sử dụng let, const, Javascript đã cho phép tạo biến có phạm vi khối lệnh

Thuật ngữ trong bài: #IIFE #immediately_invoked_function_expression #closure #block_scope #function_scope

Hãy tiếp tục ủng hộ và giữ kết nối với Vnknowledge các bạn nhé:

• Vnknowledge Page
• Vnknowledge Youtube
• Vnknowledge Patreon

Xin cảm ơn các bạn!