Arrow Function Cơ Bản Trong Javascript

Hôm nay bạn hãy cùng mình đi vào tìm hiểu khái niệm cũng như cách sử dụng cơ bản arrow function trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Trước khi tìm hiểu arrow function thì bạn cần nắm vững những kiến thức cơ bản của hàm trong ngôn ngữ lập trình javascript đã nha. Nếu bạn muốn tham khảo hay xem lại về định nghĩa hoặc cách sử dụng hàm có thể tham khảo ở đây nhé: Function. Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu arrow function nào!

Hàm arrow function giúp chúng ta tạo một hàm đơn giản và ngắn hơn nhiều so với một hàm thông thường trong javascript. Đây là một tính này rất hữu ích được giới thiệu trong phiên bản ES6. Để hiểu rõ hơn bạn xem cú pháp của nó nhé:

 let Hàm = (Tham số 1, Tham số 2,... Tham số n) => Biểu thức

• Đây là cách chúng ta tạo một hàm arrow function với tham số là nơi để đưa dữ liệu vào hàm và biểu thức là nơi chúng ta xử lý các dữ liệu để trả về kết quả.

Còn đây là cú pháp của một hàm bình thường:

 let Hàm = function(Tham số 1, Tham số 2,... Tham số n){
     return Biểu thức;
 };

Nghe hơi mơ hồ nhỉ, để dễ hình dung và nắm rõ hơn chúng ta thử viết hàm tính tổng hai số theo hai cách viết hàm khác nhau để có cái nhìn tống quát hơn nhé:

Hàm Thông Thường:

Đoạn Code:

 let tongHaiSo = function(so1, so2){
     return so1 + so2;
 };

 console.log(tongHaiSo(5,9));

Kết Quả:

Arrow Function:

Đoạn Code:

 /* Cách Viết Arrow Function */
 let tongHaiSo = (so1, so2) => so1 + so2;

 console.log(tongHaiSo(5,9));

Kết Quả:

Trong ví dụ trên, arrow function nhận hai giá trị là so1, so2 và biểu thức là so1 + so2. Sau khi hoàn thành biểu thức thì trả về kết quả của tổng hai số. Chúng ta có thể thấy cách này tạo một hàm nhanh, gọn và giúp cho đoạn code của bạn dễ nhìn hơn.

Trong thực tế chúng ta sẽ có những hàm phức tạp như cần nhiều biểu thức để tính toán, cần gán nhiều giá trị... thì với cú pháp trên thì ta không thể xử lý được. Do đó trong arrow function cho phép chúng ta kết hợp với dấu {} để giải quyết vấn đề trên. Nhưng bạn cần chú ý là khi muốn trả về kết quả thì chúng ta phải bắt buộc có lệnh return trong hàm arrow function nha. Để hiểu rõ hơn bạn xem ví dụ sau nhé:

Đoạn Code:

 let tongBaSo = (so1, so2, so3) => {
   let tongBaSo = so1 + so2 + so3;
   return tongBaSo;
 };

 console.log(tongBaSo(2, 4, 6));

Kết Quả:

Khi sử dụng với một tham số thì chúng ta có thể bỏ qua dấu () để bọc tham số trong khai báo arrow function. Để hiểu rõ hơn bạn xem ví dụ sau nhé:

Đoạn Code:

 let dienTichHinhVuong = a => a * a;
 console.log(dienTichHinhVuong(4));

Kết Quả:

Sau đây mình sẽ có một ví dụ minh họa khi chúng ta không sử tham số trong khai báo arrow funtion ở đoạn code dưới đây nhé:

Đoạn Code:

 let xinChao = () => console.log("Xin Chào Các Bạn");
 xinChao();

Kết Quả:

Ví dụ khi bạn xuống hàng như khai báo arrow function trong đoạn code phía dưới sẽ xảy ra lỗi:

 let tong = (a, b)
 => a + b; //Lỗi Unexpected token '=>'

Chúng ta có thể xuống hàng như sau trong arrow function:

 let tong = (a, b) => 
 a + b;// Hoạt động bình thường

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được cách sử dụng cơ bản arrow function trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!