[Tự học Javascript] Hàm mũi tên trong Javascript

Có một cú pháp rất đơn giản và ngắn gọn khác để tạo các hàm, thường tốt hơn Biểu thức hàm.

Nó được gọi là hàm mũi tên, vì nó trông như thế này:

let func = (arg1, arg2, ...argN) => expression

Điều này tạo ra một hàm funcchấp nhận các đối số arg1..argN, sau đó đánh giá expressionphía bên phải với việc sử dụng chúng và trả về kết quả của nó.

Nói cách khác, đó là phiên bản ngắn hơn của:

let func = function(arg1, arg2, ...argN) {
  return expression;
};

Hãy xem một ví dụ cụ thể:

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/


let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

Như bạn có thể, thấy (a, b) => a + bcó nghĩa là một hàm chấp nhận hai đối số có tên avà b. Khi thực hiện, nó đánh giá biểu thức a + bvà trả về kết quả.

• Nếu chúng ta chỉ có một đối số, thì dấu ngoặc đơn xung quanh các tham số có thể được bỏ qua, làm cho nó thậm chí còn ngắn hơn.

Vídụ:

let double = n => n * 2; // roughly the same as: let double = function(n) { return n * 2 } alert( double(3) ); // 6

Nếu không có đối số, dấu ngoặc đơn sẽ trống (nhưng chúng phải có):

let sayHi = () => alert("Hello!");

sayHi();

Các hàm mũi tên có thể được sử dụng giống như Biểu thức hàm.

Chẳng hạn, để tự động tạo một hàm:

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello') :
  () => alert("Greetings!");

welcome();

Các hàm mũi tên có thể trông lạ lẫm và không dễ đọc lúc đầu, nhưng điều đó nhanh chóng thay đổi khi mắt quen với cấu trúc đó.

Chúng rất thuận tiện cho các hành động một dòng đơn giản, khi chúng ta quá lười biếng để viết nhiều từ.

1. Hàm mũi tên đa dòng

Các ví dụ trên lấy các đối số từ bên trái =>và đánh giá biểu thức phía bên phải với chúng.

Đôi khi chúng ta cần một cái gì đó phức tạp hơn một chút, như nhiều biểu thức hoặc câu lệnh. Cũng có thể, nhưng chúng ta nên đặt chúng trong các dấu ngoặc nhọn. Sau đó sử dụng một bình thường returntrong nó.

Như thế này:

let sum = (a, b) => {  // the curly brace opens a multiline function
  let result = a + b;
  return result; // if we use curly braces, then we need an explicit "return"
};

alert( sum(1, 2) ); // 3

Thêm nữa

Ở đây chúng ta ca ngợi các hàm mũi tên khá ngắn gọn. Nhưng đó không phải là tất cả!

Hàm mũi tên có các tính năng thú vị khác.

Để nghiên cứu sâu về chúng, trước tiên chúng ta cần tìm hiểu một số khía cạnh khác của JavaScript, vì vậy chúng ta sẽ quay lại các hàm mũi tên sau trong chương sau.

Hiện tại, chúng ta đã có thể sử dụng các hàm mũi tên cho các hành động và gọi lại một dòng.

2. Tóm lược

Các hàm mũi tên thì tiện dụng và Chúng có :

1. Không có dấu ngoặc nhọn: (...args) => expression– phía bên phải là một biểu thức: hàm đánh giá nó và trả về kết quả.
2. Với dấu ngoặc nhọn: (...args) => { body }– dấu ngoặc cho phép chúng ta viết nhiều câu lệnh bên trong hàm, nhưng chúng ta cần một hàm rõ ràng returnđể trả về một cái gì đó.

Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

• Group Facebook
• Fanpage
• Youtube
• Instagram
• Twitter
• Linkedin
• Pinterest
• Trang chủ

Chào thân ái và quyết thắng!