Các hàm mũi tên của JavaScript là một cách khai báo các hàm. Các hàm mũi tên có thể được sử dụng để viết các hàm JavaScript hiệu quả hơn và sử dụng cú pháp ngắn gọn hơn. Cú pháp hàm mũi tên hỗ trợ trả về ngầm định cho các biểu thức đơn lẻ.
Hàm là một khối mã thực hiện một hành động cụ thể và / hoặc trả về một giá trị. Các hàm được lập trình viên sử dụng để tạo mã có thể được sử dụng lại nhiều lần. Điều này giúp giảm số lượng dòng trong một chương trình, do đó làm cho nó hiệu quả hơn.
Theo truyền thống, JavaScript cung cấp một cách để khai báo một hàm:sử dụng hàm function từ khóa. Tuy nhiên, kể từ ES6, JavaScript hỗ trợ arrow functions có thể được sử dụng để xác định một hàm hiệu quả hơn.
Trong hướng dẫn này, chúng ta sẽ khám phá những điều cơ bản về các hàm trong JavaScript và thảo luận về cách sử dụng hàm mũi tên trong JavaScript. Chúng tôi cũng sẽ thảo luận về nơi bạn có thể muốn sử dụng hàm mũi tên và khám phá một vài ví dụ để minh họa cách các hàm mũi tên có thể được sử dụng trong thực tế.
Trình làm mới chức năng JavaScript
Phương pháp phổ biến nhất được sử dụng để khai báo một hàm trong JavaScript là sử dụng hàm function thông thường từ khóa. Hàm function từ khóa cho phép người viết mã khai báo một hàm có thể được tham chiếu trong toàn bộ mã của họ.
Đây là cú pháp cho một hàm JavaScript:
function nameOfTheFunction() {
// Code
}
Chức năng của chúng tôi chứa một số bộ phận. Đầu tiên, chúng tôi sử dụng hàm function từ khóa để cho chương trình của chúng ta biết rằng chúng ta sẽ khai báo một hàm. Sau đó, chúng tôi chỉ định tên hàm của chúng tôi, trong ví dụ trên là nameOfTheFunction . Điều quan trọng cần lưu ý là tên hàm sử dụng các quy tắc giống như các biến và do đó chúng được viết theo kiểu chữ hoa camel.
Sau đó, hàm của chúng ta được theo sau bởi một tập hợp các dấu ngoặc, có thể tùy chọn được sử dụng để phân tích cú pháp các tham số. Sau đó, mã của chúng tôi được chứa trong một tập hợp các dấu ngoặc nhọn ({} ).
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Hãy sử dụng một ví dụ để minh họa cách một hàm hoạt động trong JavaScript. Đoạn mã sau tạo một hàm có tên là wakeUpRoutine sẽ in một thông báo buổi sáng tới bảng điều khiển:
function wakeUpRoutine() {
console.log("Good morning! Today is a great day.");
}
Ngay bây giờ, nếu chúng tôi chạy chương trình của mình, sẽ không có gì xảy ra. Điều này là do hàm của chúng ta đã được khai báo, nhưng chúng ta vẫn chưa gọi hàm. Nếu chúng ta muốn chạy hàm của mình, chúng ta có thể gọi nó bằng cách viết ra tên của hàm:
wakeUpRoutine();
Chương trình của chúng tôi trả về:
Good morning! Today is a great day.
Chúng ta có thể sử dụng hàm của mình nhiều lần tùy thích trong suốt chương trình của mình bằng cách gọi hàm ở nơi chúng ta muốn nó được thực thi.
Các hàm JavaScript cũng có thể nhận các tham số. Tham số là đầu vào được truyền vào một hàm và hoạt động như các biến cục bộ trong hàm. Vì vậy, giả sử rằng chúng tôi muốn thông báo đánh thức của mình bao gồm tên của chúng tôi. Chúng tôi có thể sử dụng mã sau để đưa tên của chúng tôi vào thông báo đánh thức:
function wakeUpRoutine(name) {
console.log(`Good morning, ${name}! Today is a great day.`);
}
Trong mã của chúng tôi, chúng tôi chưa xác định name của chúng tôi tham số. Đó là bởi vì chúng tôi gán cho nó một giá trị khi chúng tôi gọi hàm của mình. Giả sử tên của chúng ta là Peter . Để làm cho thông báo của chúng tôi xuất hiện với tên của chúng tôi, chúng tôi sẽ sử dụng mã sau:
wakeUpRoutine("Peter");
Chương trình của chúng tôi trả về:
Good morning, Peter! Today is a great day.
Giá trị của name của chúng tôi tham số được truyền vào hàm awUpRoutine, trong trường hợp này là Peter . Sau đó, chúng tôi sử dụng name trong hàm của chúng tôi để tham chiếu đến tên mà chương trình của chúng tôi đã chỉ định.
Hàm mũi tên trong JavaScript
Các hàm mũi tên trong JavaScript, đôi khi được gọi là fat arrow là một trong những tính năng phổ biến nhất được giới thiệu trong ES6. Các biểu thức hàm này có thể được sử dụng để viết các hàm hiệu quả hơn và sử dụng cú pháp ngắn gọn hơn.
Cú pháp cho một hàm mũi tên JavaScript như sau:
functionName = (parameters) => {
// Code
}
Hãy sử dụng ví dụ về quy trình đánh thức để minh họa cách hoạt động của mũi tên JavaScript. Trong đoạn mã trên, chúng tôi phải sử dụng từ khóa "function". " Tuy nhiên, với hàm mũi tên, chúng tôi sử dụng => cú pháp thay thế. Dưới đây là một ví dụ về hàm quy trình đánh thức của chúng tôi được viết dưới dạng hàm mũi tên:
wakeUpRoutine = (name) => {
console.log(`Good morning, ${name}! Today is a great day.`);
}
Để gọi hàm của chúng ta, chúng ta sử dụng cú pháp giống như cách chúng ta làm với một hàm truyền thống:
wakeUpRoutine("Sophia") Hàm của chúng ta trả về:
Good morning, Sophia! Today is a great day.
Cấu trúc của các hàm mũi tên rất giống với cấu trúc của một hàm truyền thống. Sự khác biệt duy nhất là chúng tôi không sử dụng hàm function từ khóa trong một hàm mũi tên và thay vào đó chúng tôi sử dụng => mũi tên.
Ngoài ra, hãy lưu ý rằng chúng tôi không cần sử dụng return từ khóa trong hàm mũi tên của chúng tôi, làm cho mã của chúng tôi ngắn gọn hơn nữa.
Lợi nhuận ngầm định
Các hàm mũi tên đặc biệt hữu ích nếu thân hàm là một biểu thức đơn lẻ. Nếu thân hàm là một biểu thức duy nhất, bạn có thể xóa dấu ngoặc nhọn và tạo một trả về ngầm định để đơn giản hóa hàm của mình. Điều này khác với một hàm truyền thống trong đó số dòng được sử dụng trong hàm của bạn không ảnh hưởng đến cách hàm được xác định.
Dưới đây là một ví dụ về hàm mũi tên một dòng:
const multiplyNumbers = (a, b) => a * b; multiplyNumbers(2, 2);
Mã của chúng tôi trả về:4 . Như bạn có thể thấy, hàm mũi tên của chúng tôi đã nhân hai số của chúng tôi.
Cú pháp trả về ngầm định thường được sử dụng nếu bạn đang trả về các giá trị, giống như chúng tôi đã làm ở trên. Tuy nhiên, bạn cũng có thể sử dụng cú pháp để thực thi mã sẽ không trả về bất kỳ giá trị nào. Vì vậy, nếu bạn muốn sử dụng cú pháp ngầm định để tạo lại hàm quy trình đánh thức của chúng tôi, bạn có thể sử dụng mã này:
const wakeUpRoutine = name => console.log(`Good morning, ${name}! Today is a great day.`);
wakeUpRoutine("Ava");
Mã của chúng tôi trả về như sau:
Good morning, Ava! Today is a great day.
Xóa dấu ngoặc đơn
Các hàm mũi tên trong JavaScript chỉ cần dấu ngoặc đơn xung quanh các tham số nếu không có tham số nào hoặc nhiều hơn một tham số. Vì vậy, nếu hàm mũi tên của bạn chỉ có một tham số, bạn có thể loại bỏ các dấu ngoặc đơn như sau:
wakeUpRoutine = name => {
console.log(`Good morning, ${name}! Today is a great day.`);
}
Như bạn có thể thấy, name của chúng tôi tham số không còn được bao quanh bởi dấu ngoặc đơn.
Hàm mũi tên với Bản đồ, Bộ lọc và Rút gọn
Các hàm mũi tên thường được sử dụng với các phương thức bản đồ, bộ lọc và rút gọn mảng JavaScript, vì các hàm mũi tên cho phép bạn biến đổi một mảng chỉ trong một dòng.
Giả sử rằng chúng ta có một loạt các điểm số của học sinh. Chúng tôi muốn thêm 1 cho từng cấp học của học sinh vì đã xảy ra lỗi trong bài kiểm tra gần đây có nghĩa là học sinh không thể trả lời một câu hỏi nhất định và vì vậy không ai có thể đạt điểm tuyệt đối 30 . Dưới đây là một ví dụ về chức năng mũi tên mà chúng tôi có thể sử dụng để sửa điểm kiểm tra:
const grades = [25, 26, 22, 28]; const fixStudentGrades = grades.map( score => score + 1 ); console.log(fixStudentGrades);
Mã của chúng tôi trả về:
[26, 27, 23, 29]
Như bạn có thể thấy, mã của chúng tôi đã thêm 1 đến từng lớp trong grades của chúng tôi mảng.
Kết luận
Hàm mũi tên là một tính năng được giới thiệu trong ES6 JavaScript có thể được sử dụng để viết mã ngắn gọn và hiệu quả hơn. Các hàm mũi tên cho phép bạn sử dụng => mũi tên thay cho function và cũng tạo điều kiện thuận lợi cho việc viết các hàm một dòng trong một số trường hợp nhất định.
Trong hướng dẫn này, chúng tôi đã khám phá những điều cơ bản về cách các hàm hoạt động trong JavaScript, sau đó chúng tôi thảo luận về cách viết các hàm mũi tên. Ngoài ra, chúng tôi cũng khám phá các kết quả trả về ngầm định, loại bỏ dấu ngoặc đơn và sử dụng các hàm mũi tên với map , filter và reduce chức năng.
Giờ đây, bạn đã được trang bị kiến thức cần thiết để viết hàm mũi tên như một chuyên gia!