Hàm mũi tên JavaScript là cách khai báo hàm. Hàm mũi tên dùng để viết hàm JavaScript hiệu quả hơn và cú pháp ngắn gọn hơn. Cú pháp hàm mũi tên hỗ trợ trả về ngầm (implicit returns) cho biểu thức đơn.
Hàm là khối mã thực hiện hành động cụ thể và/hoặc trả về giá trị. Lập trình viên dùng hàm để tạo mã có thể tái sử dụng nhiều lần. Giúp giảm số dòng mã, làm cho chương trình hiệu quả hơn.
Truyền thống, JavaScript chỉ cung cấp một cách khai báo hàm: dùng từ khóa function. Tuy nhiên, kể từ ES6, JavaScript hỗ trợ hàm mũi tên (arrow functions) để định nghĩa hàm hiệu quả hơn.
Trong hướng dẫn này, chúng ta sẽ khám phá cơ bản về hàm trong JavaScript và thảo luận cách hàm mũi tên JavaScript có thể dùng. Chúng ta cũng thảo luận nơi bạn có thể muốn dùng hàm mũi tên, và khám phá vài ví dụ minh họa cách dùng hàm mũi tên thực tế.
Ôn tập hàm JavaScript
Phương pháp phổ biến nhất khai báo hàm trong JavaScript là dùng từ khóa function thông thường. Từ khóa function cho phép coder khai báo hàm có thể tham chiếu khắp mã.
Cú pháp hàm JavaScript:
function nameOfTheFunction() { // Code }
Hàm chứa nhiều phần. Đầu tiên, dùng function nói cho chương trình biết sẽ khai báo hàm. Sau đó, chỉ định tên hàm, ví dụ nameOfTheFunction. Quan trọng tên hàm dùng cùng quy tắc biến, viết theo camel case.
Hàm theo sau là cặp ngoặc tròn, tùy chọn dùng để truyền tham số. Sau đó, mã nằm trong cặp ngoặc nhọn ({}).
Hãy dùng ví dụ minh họa cách hàm hoạt động. Mã sau tạo hàm wakeUpRoutine in thông báo buổi sáng ra console:
function wakeUpRoutine() { console.log("Chào buổi sáng! Hôm nay là một ngày tuyệt vời."); }
Ngay bây giờ, chạy chương trình, không gì xảy ra. Vì hàm đã khai báo, nhưng chưa gọi hàm. Nếu muốn chạy hàm, gọi bằng viết tên hàm:
wakeUpRoutine();
Chương trình trả về:
Chào buổi sáng! Hôm nay là một ngày tuyệt vời.
Chúng ta dùng hàm bao nhiêu lần tùy ý khắp chương trình bằng gọi ở chỗ muốn thực thi.
Hàm JavaScript cũng nhận tham số. Tham số là đầu vào truyền vào hàm và hoạt động như biến cục bộ trong hàm. Giả sử muốn thông báo chào buổi sáng bao gồm tên. Dùng mã sau:
function wakeUpRoutine(name) { console.log(`Chào buổi sáng, ${name}! Hôm nay là một ngày tuyệt vời.`); }
Trong mã, không định nghĩa tham số name. Đó là vì gán giá trị khi gọi hàm. Giả sử tên là Peter. Để thông báo xuất hiện tên, dùng:
wakeUpRoutine("Peter");
Chương trình trả về:
Chào buổi sáng, Peter! Hôm nay là một ngày tuyệt vời.
Giá trị tham số name truyền vào wakeUpRoutine, trường hợp này Peter. Chúng ta dùng biến name trong hàm tham chiếu tên chương trình chỉ định.
Hàm mũi tên JavaScript
Hàm mũi tên JavaScript, đôi khi gọi là hàm fat arrow, là một trong tính năng phổ biến nhất giới thiệu trong ES6. Các biểu thức hàm này dùng để viết hàm hiệu quả hơn và cú pháp ngắn gọn hơn.
Cú pháp hàm mũi tên JavaScript:
functionName = (parameters) => { // Code }
Dùng ví dụ wake up routine minh họa hàm mũi tên. Trong mã trước, dùng từ khóa "function". Tuy nhiên, với hàm mũi tên, dùng cú pháp =>. Ví dụ hàm wake up routine viết dạng hàm mũi tên:
wakeUpRoutine = (name) => { console.log(`Chào buổi sáng, ${name}! Hôm nay là một ngày tuyệt vời.`); }
Để gọi hàm, dùng cùng cú pháp như hàm truyền thống:
wakeUpRoutine("Sophia")
Hàm trả về:
Chào buổi sáng, Sophia! Hôm nay là một ngày tuyệt vời.
Cấu trúc hàm mũi tên rất giống hàm truyền thống. Chỉ khác là không dùng function trong hàm mũi tên, thay vào đó dùng mũi tên =>.
Thêm vào đó, chú ý không cần dùng từ khóa return trong hàm mũi tên, làm mã ngắn gọn hơn.
Trả về ngầm (Implicit Returns)
Hàm mũi tên đặc biệt hữu ích nếu thân hàm là biểu thức đơn. Nếu thân hàm là biểu thức đơn, bạn có thể bỏ ngoặc nhọn và tạo trả về ngầm để đơn giản hóa hàm. Khác với hàm truyền thống nơi số dòng trong hàm không ảnh hưởng cách định nghĩa hàm.
Ví dụ hàm mũi tên một dòng:
const multiplyNumbers = (a, b) => a * b; multiplyNumbers(2, 2);
Mã trả về: 4. Như thấy, hàm mũi tên nhân hai số.
Cú pháp trả về ngầm thường dùng nếu trả về giá trị, như trên. Tuy nhiên, bạn cũng dùng cú pháp thực thi mã không trả về giá trị. Vì vậy, nếu muốn dùng cú pháp ngầm tái tạo hàm wake up routine, dùng mã:
const wakeUpRoutine = name => console.log(`Chào buổi sáng, ${name}! Hôm nay là một ngày tuyệt vời.`); wakeUpRoutine("Ava");
Mã trả về:
Chào buổi sáng, Ava! Hôm nay là một ngày tuyệt vời.
Loại bỏ ngoặc tròn
Hàm mũi tên JavaScript chỉ cần ngoặc tròn quanh tham số nếu không có tham số hoặc nhiều hơn một. Vì vậy, nếu hàm mũi tên chỉ có một tham số, bạn có thể bỏ ngoặc tròn như sau:
wakeUpRoutine = name => { console.log(`Chào buổi sáng, ${name}! Hôm nay là một ngày tuyệt vời.`); }
Như thấy, tham số name không còn bao quanh bởi ngoặc tròn.
Hàm mũi tên với Map, Filter, Reduce
Hàm mũi tên thường dùng với phương thức mảng map, filter, reduce JavaScript, vì hàm mũi tên cho phép biến đổi mảng chỉ trong một dòng.
Giả sử có mảng điểm học sinh. Muốn cộng 1 vào mỗi điểm vì lỗi bài kiểm tra gần đây khiến học sinh không trả lời câu hỏi nhất định, nên không ai đạt điểm tối đa 30. Ví dụ hàm mũi tên sửa điểm:
const grades = [25, 26, 22, 28]; const fixStudentGrades = grades.map( score => score + 1 ); console.log(fixStudentGrades);
Mã trả về:
[26, 27, 23, 29]
Như thấy, mã cộng 1 vào mỗi điểm trong mảng grades.
Kết luận
Hàm mũi tên là tính năng giới thiệu trong ES6 JavaScript dùng để viết mã hiệu quả và ngắn gọn hơn. Hàm mũi tên cho phép dùng mũi tên => thay câu lệnh function, và hỗ trợ viết hàm một dòng trong trường hợp nhất định.
Trong hướng dẫn, khám phá cơ bản cách hàm hoạt động trong JavaScript, sau đó thảo luận cách viết hàm mũi tên. Ngoài ra, khám phá trả về ngầm, bỏ ngoặc tròn, và dùng hàm mũi tên với map, filter, và reduce.
Bây giờ bạn đã trang bị kiến thức viết hàm mũi tên như chuyên gia!