Đình Anh

03/03/2023

ES6 Series #2: Bạn Đã Hiểu Rõ Về Arrow Function?

ES6 đã giới thiệu với chúng ta Arrow Function - một cách khai báo function mới giúp tiết kiệm thời gian, dễ hiểu và đơn giản hóa phạm vi function hơn. Hãy cùng mình tìm hiểu rõ hơn nhé.

Một số cách khai báo Arrow Function:

Nếu trong ES5, chúng ta sẽ khai báo function như sau: 

const greeting = function(name) {
    return "hello " + name;
}

Thì với ES6, bạn chỉ cần dùng mũi tên => là đã có thể khai báo một function, cụ thể như sau:

const greeting = (name) => {
    return `hello ${name}`;
}

Nếu chỉ có 1 parameter (tham số) thì ta còn có thể bỏ dấu ngoặc tròn đi 

const greeting = name => {
    return `hello ${name}`;
}

Tuy nhiên, nếu như chúng ta không có tham số nào thì bắt buộc phải có dấu ngoặc

const greeting = () => {
    return "hello";
}

Implicitly return

Trong arrow function, ta có thể bỏ qua từ khóa return mà return ngầm theo cú pháp sau:

const greeting = name => `hello ${name}`;

Bạn thấy đó, cú pháp mới này đã giúp code ngắn gọn hơn. Tuy nhiên bạn phải chú ý, đoạn code này cũng sẽ khó hiểu hơn. Nếu trong team có một người chưa nắm được về ES6 thì bạn hãy tránh sử dụng cú pháp implicity return này.

Ta cũng có thể implicity return cùng với  object literal như sau:

const race = "100m dash";
const runners = [ "Usain Bolt", "Justin Gatlin", "Asafa Powell" ];

const results = runners.map((runner, i) =>  ({ name: runner, race, place: i + 1}));

console.log(results);
// [{name: "Usain Bolt", race: "100m dash", place: 1}
// {name: "Justin Gatlin", race: "100m dash", place: 2}
// {name: "Asafa Powell", race: "100m dash", place: 3}]

Để Javascript hiểu dược chúng ta sẽ trả về (implicity return) là một  object literal thì ta cần đặt trong một cặp ngoặc nhọn.

Arrow Function là một Anonymous Funcion

Anonymous function (hàm ẩn danh), là một hàm được sinh ra đúng vào thời điểm chạy của chương trình. Thông thường khi bạn khai báo một hàm thì trình biên dịch sẽ lưu lại trong bộ nhớ nên bạn có thể gọi ở trên hay dưới vị trí khai báo hàm đều được, nhưng với anonymous function thì nó sẽ được sinh ra khi trình biên dịch xử lý tới vị trí của nó.

Callback cũng là 1 ví dụ điển hình cho anonymous function, bạn hoàn toàn có thể khai báo arrow function thành 1 callback như sau:

setTimeout(() => { 
   console.log("Hello");
}, 3000);

Nếu muốn gán arrow function với một cái tên, hãy gán hàm đó vào một biến.

const greeting = name => `hello ${name}`;
greeting("UniTech Blog");

// UniTech Blog

'This' trong Arrow Funtion

Đây là là điều bạn cần chú ý nhất khi sử dụng arrow function bởi vì nó rất khác so với các function thường. Trong arrow function, từ khóa this sẽ được thừa hưởng từ scope cha của nó, ví dụ như sau:

<div class="box open">
	This is a box
</div>

const box = document.querySelector(".box");

box.addEventListener("click", function() {
    this.classList.toggle("opening");
    setTimeout(function(){
        this.classList.toggle("opening");
    },500);
});

Nếu bạn chạy đoạn code trên thì sẽ gặp lỗi sau:

Uncaught TypeError: cannot read property "toggle" of undefined

Tại sao lại vậy?? Ta có thể thấy, this ở trong callback của Event Click sẽ được gán thành biến box, tuy nhiên this ở setTimeout thì sẽ là Window ==> classList sẽ là undefined.

Do arrow function không có this riêng biệt như các function khác, vậy nên nó sẽ thừa hưởng this ở scope cha. Dựa vào tính chất này, để sửa lại đoạn code trên thành như sau:

const box = document.querySelector(".box");

box.addEventListener("click", function() {
    this.classList.toggle("opening");
    setTimeout(() => {
        this.classList.toggle("opening");
    },500);
});

Lúc này, this của hàm setTimeout sẽ được thừa hưởng từ scope cha (event click) và sẽ được gán với box. Lúc này đoạn code của chúng ta sẽ hoạt động đúng.

Tạm kết

Vậy là mình đã chia sẻ với các bạn những điểm thú vị của arrow function mà có thể bạn chưa biết đến. Hy vọng bài viết đã giúp bạn hiểu hơn về arrow function cũng như cách tận dụng nó.