Bài 4: Arrow Functions trong ES6

Ở trong javascript chúng ta có rất nhiều cách khai báo hàm, đặc biệt là chúng ta cũng có thể gán 1 biến bằng một hàm ẩn danh (closure function) như sau:

var name = function () {
    return "Vũ Thanh Tài";
}
//call
name();

Hay chúng ta cũng có thể truyền nó và dưới dạng tham số:

function getFull(name, age) {
    return "name: " + name() + " age: " + age;
}
//call
getFull(function () {
    return 'Vũ Thanh Tài';
}, 22);

…. Nhưng Sau khi đọc xong bài này chúng ta sẽ biết thêm một cách khai báo closure function nữa mới được thêm vào trong ES6.

1, Arrow Functions.

Ở đây nếu như bạn nào biết một chút tiếng anh thì cũng sẽ nhận ra 1 phần nào đó của chức năng này trong ES6. Trong trường hợp này arrow là mũi tên và function thì cũng ta giữ nguyên (vì dịch nó không đúng nghĩa), như vậy chúng ta cũng có thể hiểu nôm là arrow function là khai báo function bằng các sử dụng mũi tên (tương đương với =>).

Để khai báo một closure function trong ES6 chúng ta sử dụng cú pháp:

(param1, param2,...,paramN) => {
  //content function
}

Trong đó: param1, param2,... paramN là các tham số chúng ta muốn truyền vào hàm (nếu có).

VD: Khai báo một arrow function không truyền vào tham số.

var getName = () => {
    return "Vũ Thanh Tài";
}
console.log(getName());

Nhưng do trong trường hợp này nội dung của function chỉ có có 1 dòng, nên chúng ta hoàn toàn có thể bỏ cặp dấu {} đi. Do đó VD trên sẽ thành như sau:

var getName = () => "Vũ Thanh Tài";
console.log(getName());

VD: Khai báo arrow function có truyền vào 1 tham số.

var getName = (name) => alert(name);
getName("Vũ Thanh Tài");

Và cũng do function này chỉ truyền vào duy nhất có 1 tham số, nên chúng ta cũng có thể bỏ cặp dấu () đi được.

var getName = name => alert(name);
getName("Vũ Thanh Tài");

2, Các ví dụ khác về arrow function.

Ví dụ với phương thức map

var listData = [
    'Vũ Thanh Tài',
    'Nam Định',
    22,
    'Độc Thân'
];
listData.map(value => console.log(isNaN(value) === false ? value + 1 : value.toUpperCase()));
console.log(listData);

Trong ví dụ trên mình đã truyền một arrow function để xử lý mảng. Nếu như phần tử là số thì nó sẽ + 1 còn là chuỗi thì sẽ in hoa.

Ví dụ với phương thức forEach.

var listNums = [1, 2, 4, 5, 99, 55, 7, 66];
var match = [];
listNums.forEach(value => {
    if (value % 2 == 0) {
        match.push(value);
    }
});
console.log(match);

Trong ví dụ trên mình đã sử dụng phương thức forEach để duyệt mảng và tìm ra những phần tử là số chẵn.

Arrow function trong object

Mời mọi người tham khảo ví dụ sau khi chưa sử dụng arrow function trong ES6.

var obj = {
    name: "Vũ Thanh Tài",
    age: 22,
    getName: function (param) {
        console.log(param());
    },
    getAge: function (param) {
        console.log(param());
    },
    showAll : function () {
        var self = this;
        //getName
        this.getName(function () {
            return "name: " + self.name;
        });
        //getAge
        this.getAge(function () {
            return "age: " + self.age;
        });
    }
}
obj.showAll();

Như các bạn cũng đã thấy, rất phức tạp đúng không, chúng ta phải gán 1 biến bằng với đối tượng đó rồi mới truy cập được đến các thuộc tính trong object đó. Bây giờ mọi người cũng xem khi sử dụng arrow function thì có cần phức tạp như vậy nữa không nhé.

var obj = {
    name: "Vũ Thanh Tài",
    age: 22,
    getName: function (param) {
        console.log(param());
    },
    getAge: function (param) {
        console.log(param());
    },
    showAll : function () {
        //getName
        this.getName(() => {
            return "name: " + this.name;
        });
        //getAge
        this.getAge(() => {
            return "age: " + this.age;
        });
    }
}
obj.showAll();

Đó đơn giản hơn nhiều rồi đúng không

3, Lời kết.

Arrow function quả thật rất thú vị đúng không mọi người, đặc biệt nó sẽ rất có lợi khi chúng ta sử dụng nó trong đối tượng.