Sử dụng Arrow Functions trong javascript

Hi mọi người,
Trong bài viết này mình sẽ chia sẻ cách sử dụng arrow function trong ES6 nhé.
Từ khi ES6 được sử dụng, chúng ta sẽ có thể viết cú pháp code ngắn gọn hơn so với trước đây.
Ví dụ, trước đây một hàm tính tổng mình sẽ viết code như bên dưới.

letadd=function(x, y){return x + y;};

console.log(add(10,20));// 30

Bây giờ mình sẽ sử dụng arrow function để thay thế trong cách viết code ở trên.

letadd=(x, y)=> x + y;

console.log(add(10,20));// 30;

Cách viết mới sử dụng arrow function thì ngắn gọn hơn và cho kết quả giống với cách viết trước đây.
Tuy nhiên, thay vì viết:

let add = (x, y) => x + y;

Bạn có thể thay thế cách viết sau:

letadd=(x, y)=>{return x + y;};

Cách viết này sử dụng dấu ngoặc {} và từ khóa return. Cách viết này được sử dụng khi có nhiều câu lệnh được xử lý bên trong dấu {} và 2 cách viết đều cho kết quả giống nhau.

Sử dụng arrow functions với nhiều parameters

Nếu một arrow function có một hoặc nhiều parameters thì bạn có thể sử dụng cú pháp sau:

(p1, p2,..., pn)=> expression;

Thay vì viết:

=> expression;

Bạn có thể thay thế bằng code sau:

=>{return expression;}

Cả 2 cách viết đều cho kết quả giống nhau nhé.
Tiếp theo các bạn hãy xem ví dụ sắp sếp thứ tự các phần tử trong mảng theo chiều tăng dần các giá trị nhé.
Code trước đây:

let numbers =[4,2,6,7];
	numbers.sort(function(a,b){return a-b;});
	console.log(numbers);// [2, 4, 6, 7]

Code sử dụng arrow function:

let numbers =[4,2,6,7];
	numbers.sort((a,b)=> a-b);
	console.log(numbers);// [2, 4, 6, 7]

Như các bạn thấy code sử dụng cú pháp arrow function nhìn ngắn gọn hơn code trước đây.

Sử dụng arrow functions với một parameter

Nếu một arrow function có một parameter thì bạn có thể sử dụng cú pháp sau:

(p1)=>{ statements }

Hoặc bạn có thể bỏ qua dấu ngoặc () như sau:

p=>{ statements }

Ví dụ:

letsource=name_source=>{return name_source ;}
	console.log(source('Javascript'));//Javascript

Sử dụng arrow functions với no parameter

Cú pháp sử dụng:

()=>{ statements }

Ví dụ:

letlogString=()=> console.log('Hello ES6');logString();

Tóm tắt:

• Sử dụng (….args) => expression; để định nghĩa một arrow function.
• Sử dụng (….args) => { expression } để định nghĩa một arrow function, cái có nhiều câu lệnh xử lý bên trong.