Bài 04: Arrow Function trong ES6

Trong bài này chúng ta tìm hiểu một cách định nghĩa function mới bằng cách sử dụng dấu mui tên =>, cách này được thêm vào bộ ES6 với cú pháp hoàn toàn mới lạ.

Trong Javascript để tạo một function thì thông thường chúng ta sử dụng hai cách sau:

// Cách 1
function Name(var1, var2){
    
}

// Cách 2
var Name = function(var1, var2,){
    
}

Với ES6 thì bạn có thêm một cách đó là sử dụng dấu mũi tên => rất phức tạp, chi tiết thế nào thì chúng ta cùng tìm hiểu nhé.

1. Sử dụng Arrow function trong ES6

Nói là ES6 nhưng thực chất hầu hết các trình duyệt hiện nay đều đã hỗ trợ ES6 nên bạn có thẻ coi như đây là một tính năng mới của Javascript.

Cú pháp căn bản:

Cú pháp căn bản nhất của arrow function như sau:

var functionName = (var1, var2) => {
    // Nội dung function
};

Ví dụ: Viết arrow function in ra câu chào và so sánh với cách tạo function thông thường.

Arrow function:

var hello = (name, message) => {
    console.log("Chào " + name + ", bạn là " + message);
};

hello('Cường', 'admin freetuts.net');

Normal function:

function hello(name, message)
{
    console.log("Chào " + name + ", bạn là " + message);
}

hello('Cường', 'admin freetuts.net');

So sánh hai các trên thì rõ ràng cách thông thường sẽ đơn giản hơn rất nhiều, và cả hai đoạn code đều cho kết quả như sau:

Nội dung là một câu lệnh đơn:

Trường hợp trong thân của hàm chỉ có một lệnh duy nhất thì bạn có thể sử dụng theo ví dụ dưới đây.

var hello = (name, message) => console.log("Chào " + name + ", bạn là " + message);

Nghĩa là bạn có thể bỏ đi cặp dấu {}, điều này tuân thủ theo nguyên tắc "nếu bên thân cặp {} chỉ là một câu lệnh thì bạn có thể bỏ cặp {}".

Trường hợp một tham số:

Trường hợp truyền vào chỉ một tham số thì bạn có thể bỏ cặp ().

var hello = message => {
    console.log(message);
};
    
hello('Chào mừng bạn đến với freetuts.net');

Trường hợp không có tham số:

Trường hợp không có tham số truyền vào thì bạn sử dụng cặp () rỗng, xem ví dụ sau:

var hello = () => {
    console.log('Chào mừng bạn đến với freetuts.net');
};
    
hello();

2. Một số ví dụ arrow function trong ES6

Bây giờ ta sẽ thực hành thông qua một số ví dụ để sau này các bạn không bị bỡ ngỡ khi gặp các đoạn code người ta viết trong thực tế.

Ví dụ với hàm map:

Ví dụ đầu tiên ta sử dụng kết hợp hàm map của array trong Javascript, hàm này giống như vòng lặp vậy, nó có một tham số truyền vào và đó là một callback function, hàm callback function này sẽ có hai tham số truyền vào đại diện cho valuekey của mỗi phần tử trong mảng.

Ví dụ: Sử dụng hàm map để chuyển đổi các giá trị của các phần tử trong mảng sang chữ in hoa.

Sử dụng code thông thường:

var domain = ["freetuts.net", 'qa.freetuts.net', 'demo.freetuts.net'];

domain.map(function(val, key){
    console.log(val.toUpperCase());   
});

console.log(domain);

Chạy lên kết quả sẽ như sau:

Nêu bạn thắc mắc tại sao danh sách domain sau khi xử lý (tức là lệnh console.log(domain);) lại không chuyển sang chữ in hoa thì ban phải xem lại đoạn code ở trên mình đã không lưu lại giá trị sau khi chuyển sang uppercase, vì vậy để giải quyết thì bạn chỉ việc lưu lại là được.

var domain = ["freetuts.net", 'qa.freetuts.net', 'demo.freetuts.net'];

domain.map(function(val, key){
    console.log(val.toUpperCase());
    
    // Lưu lại
    domain[key] = val.toUpperCase();
});

console.log(domain);

Chạy lên kết quả như hình sau:

Ok bây giờ ta sử dụng Arrow Function để viết.

var domain = ["freetuts.net", 'qa.freetuts.net', 'demo.freetuts.net'];

domain.map((val, key) => {
    console.log(val.toUpperCase());
});

Quá đơn giản phải không các bạn :)

Ví dụ với hàm setTimeout:

Hàm setTimeout cũng có một callback function nên ta sẽ truyền vào callback đó một Arrow Function.

setTimeout(() => {
    console.log('3 giây đã trôi qua');
}, 3000);

Do arrow function không có tham số truyền vào nên mình chỉ để là ().

3. Lời kết

ES6 quá thú vị phải không các bạn, mới chỉ bài viết thứ tư trong serise thôi mà có quá nhiều thứ bất ngờ và rất đáng để học hỏi. 

Qua cách sử dụng Arrow Function thì cá nhân mình thấy vẫn chưa có điểm mạnh gì hơn so với các cách còn lại, vì vậy tùy vào sở thích của mỗi người mà chọn cách viết function cho phù hợp.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.