Anonymous Function - Hàm Nặc Danh Và Hàm Nặc Danh Trong JavaScript

Anonymous Function hay hàm nặc danh được sử dụng rất nhiều trong JavaScript.

Anonymous Function là gì?

Anonymous Function hay hàm nặc danh là một hàm không có (không cần) tên hàm

Hàm thông thường

function funcName(param1, param2, ...) {

}

Ví dụ

function add(a, b) {
  return a + b;
}

Anonymous function

Anonymous function là 1 hàm không có tên hàm, hàm có dạng như sau:

function() {

}

Có thể truyền thêm tham số vào Anonymous Function như 1 hàm thông thường:

function(a, b) {

}

Cách sử dụng Anonymous Function

Giả sử ta cần viết một hàm dùng để tìm ra giá trị lớn nhất của 2 số

Ví dụ

Không sử dụng Anonymous Function

function max(a, b) {
  return a > b ? a : b;
};

console.log(max(1, 2));

Sử dụng Anonymous Function

function (a, b) {
  return a > b ? a : b;
};

Không có cách nào gọi được hàm này do không có tên hàm?! Đối với JavaScript tất cả đều là đối tượng kể cả function, do đó thực hiện phép gán sau:

let maxFunc = function(a, b){
  return a > b ? a : b;
};

maxFunc(1, 2);

Vì sao cần Anonymous Function?

Hàm được truyền hoặc gọi tại 1 nơi duy nhất trong code

Nếu hàm cần được truyền ở nhiều nơi:

• Định nghĩa 1 hàm thông thường.
• Truyền hàm đó vào 1 hàm.

Nếu hàm chỉ truyền 1 nơi?

• Bất tiện khi tạo ra 1 hàm mới (các chi phí như đặt tên hàm).
• Giúp tăng tính ràng buộc cho việc chỉ được phép truyền 1 lần.
• Bên cạnh đó hỗ trợ được thêm khả năng chỉ gọi 1 lần.

Ví dụ truyền 1 nơi duy nhất

• Giả sử cần truyền 1 hàm có chức năng xóa dữ liệu deleteAction vào 1 hàm quản lý popup confirmDelete.
• confirmDelete chờ xác nhận từ người dùng, khi đã xác nhận thì tiến hành gọi deleteAction để xóa dữ liệu.

function deleteAction() {
  delete();
  console.log("Data was deleted!");
}

confirmDelete(deleteAction);

Nếu deleteAction chỉ có nhu cầu truyền vào confirmDelete, lúc này việc tạo 1 hàm deleteAction sẽ không:

• Thể hiện được tính ràng buộc này vì hàm này vẫn có thể được truyền hoặc gọi nơi khác.
• Tốn chi phí dựng: suy nghĩ tên hàm, đặt hàm tại vị trí phù hợp.

Do đó, anonymous function là lựa chọn phù hợp, cải tiến code trên thành phương pháp sử dụng anonymous function.

confirmDelete(function () {
  delete();
  console.log("Data was deleted!");
});

Ví dụ gọi 1 nơi duy nhất

Giả sử có danh sách đường dẫn cần download.

• Xử lý danh sách đường dẫn: lọc trùng, đồng bộ http sang https, loại bỏ những đường dẫn có giao thức khác.
• Tiến hành download dữ liệu.
• Nén toàn bộ dữ liệu sau khi sao chép.

Với 3 nhu cầu trên có thể chia thành 3 hàm thành phần để thực hiện mỗi công đoạn.

function preprocess(urlsA) { /* preprocess urls */ }
function download(urlsA) { /* download files */ }
function compress(filesA) { /* compress files */ }

function mainTask(urls) {
  urls = preprocess(urls);
  const files = download(urls);
  compress(files);
}

Nếu 3 hàm preprocess, download, compress chỉ có nhu cầu sử dụng cho mainTask? Các hàm này đang được viết với scope (tầm vực) rộng hơn, về thực tế vẫn có thể được gọi ở nơi khác. Để tăng khả năng ràng buộc mà vẫn giữ được khả năng chia nhỏ chương trình để đạt được tính tường minh cao, anonymous function cũng là 1 lựa chọn tốt.

function mainTask(urls) {
  urls = function (urlsA) { /* preprocess urls */ }(urls);
  const files = (urlsA) { /* download files */ }(files);
  compress(filesA) { /* compress files */ }(files);
}

Một số ứng dụng Anonymous Function

Facebook SDK

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4&appId=123456789";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Google Analytics

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-123456789-1', 'auto');
ga('send', 'pageview');