1. Giới thiệu

Arrow function  là một trong những tính năng mới rất hay của ES6. Việc sử dụng đúng cách arrow function giúp code trở nên ngắn gọn và dễ hiểu hơn. Vì vậy, trong bài viết này mình sẽ giúp bạn hiểu rõ hơn về arrow function trong JavaScript, cũng như biết cách sử dụng và những điều cần lưu ý khi sử dụng nó.  Arrow function  được định nghĩa là:

Arrow function – also called “fat arrow” function, from CoffeeScript (a transcompiled language) — are a more concise syntax for writing function expressions.

Nghĩa là: Hàm mũi tên – hay còn gọi là hàm “mũi tên béo”, từ CoffeeScript (một ngôn ngữ được biên dịch) – là một cú pháp ngắn gọn hơn để viết các biểu thức hàm.

2. Cách sử dụng

Cú pháp cơ bản với nhiều tham số

// ES5
var multiTestEs5 = function(a, b) {
  return a * b;
};

// ES6
const multiTestEs6 = (a, b) => { return a * b };

Cú pháp cơ bản với một tham số

// ES5
var phraseSplitterEs5 = function phraseSplitter(phrase) {
  return phrase.split(' ');
};

// ES6
const phraseSplitterEs6 = phrase => phrase.split(" ");

console.log(phraseSplitterEs6("Coding Bootcamp"));  // ["Coding ", "Bootcamp"]

Arrow function  đúng như những gì mà người ta nói về nó. Sử dụng  Arrow function  giải quyết bài toán với một tham số, code khá là gọn, đơn giản và dễ hiểu.

Không có tham số

// ES5
var docLogEs5 = function docLog() {
    console.log(document);
};

// ES6
var docLogEs6 = () => { console.log(document); };
docLogEs6();

Cú pháp Object literals

//ES5
var setNameIdsEs5 = function setNameIds(id, name) {
  return {
    id: id,
    name: name
  };
};

// ES6
var setNameIdsEs6 = (id, name) => ({ id: id, name: name });

console.log(setNameIdsEs6 (4, "Van Quy"));   // Object {id: 4, name: "Van Quy"}

Promise và Callback

// ES5
aAsync().then(function() {
  returnbAsync();
}).then(function() {
  returncAsync();
}).done(function() {
  finish();
});

// ES6
aAsync().then(() => bAsync()).then(() => cAsync()).done(() => finish);

Có thể thấy rõ với Promises and Callbacks khi sử dụng arrow function, thay vì phải viết quá nhiều  function()  giờ chỉ cần viết  () =>  là đủ rồi =))

3. Những điều cần chú ý khi sử dụng arrow function

Qua các cách sử dụng ở trên chúng ta thấy được  Arrow function  ngắn gọn, dễ hiểu. Tuy nhiên, không phải lúc nào cũng sử dụng tùy tiện được. Dưới đây là một vài trường hợp không nên sử dụng  Arrow function .

• Click handle

Đầu tiên. mình có một button lớn, có thể đặt tên cho nó là “push me”:

<button id="pushy">Push me</button>

<style>
    button { font-size: 100px; }
    .on { background: #ffc600; }
</style>

Khi ai đó  click  vào nút, mình muốn nút này chuyển (thay đổi) class thành  on  và nút sẽ chuyển sang màu vàng.

const button = document.querySelector('#pushy');
button.addEventListener('click', () => {
    this.classList.toggle('on');
});

Nhưng nếu bạn  click  vào nút này thì bạn sẽ nhận được lỗi trả về là:

Uncaught TypeError: Cannot read property 'toggle' of undefined
Code language:JavaScript(javascript)

Vậy điều này có nghĩa là gì?  this  trong trường hợp này, nó là thuộc tính  window  của trình duyệt. Bạn có thể sử dụng  console.log  để confirm nó.

const button = document.querySelector('#pushy');
button.addEventListener('click', () => {
    console.log(this); // Window!
    this.classList.toggle('on');
});

Hãy nhớ rằng: Chúng ta đang nói về việc sử dụng  Arrow functions , vậy nên  this  không bị ràng buộc bởi button này. Ngược lại, nếu chúng ta sử dụng function thông thường,  this  sẽ bị ràng buộc vào button mà bạn  click  vào đó.

const button = document.querySelector('#pushy');
button.addEventListener('click', function() {
    console.log(this);
    this.classList.toggle('on');
});

Hiển nhiên khi  console.log(this)  kết quả trả về chính là button mà chúng ta vừa  click , và button ban đầu sẽ chuyển sang màu vàng như ý muốn.

• Object Methods

Kết thúc ví dụ về Click handle ở trên, tiếp đến chúng ta sẽ đi làm một ví dụ về object methods. Trước tiên, chúng ta cần một method để  bind (ràng buộc) một object.

const person = {
    points: 23,
    score: () => {
        this.points++;
    }
}

Giả sử chúng ta có một object là  person . Chúng ta có một method được gọi là  score  và có thể gọi nó ra bằng  person.score .  score  có sẽ tăng dần  points  tùy vào số lần nó được  run  và  points  hiện tại là 23.

Khi sử dụng arrow function dù có run  person.score  bao nhiêu lần đi chăng nữa,  points  vẫn chỉ dừng lại ở con số 23.

Tại sao vậy???

Khi sử dụng arrow function  this  không bị ràng buộc bởi thứ gì cả. Nó chỉ kế thừa từ phạm vi cha mà trong trường hợp này là  window .

Và khi dùng function thông thường nếu chúng ta chạy  person.score();  , trong một vài lần,  points  sẽ có giá trị > 23.

Bởi vậy chúng ta không nên dùng arrow function trong trường hợp này:

const person = {
    points: 23,
    score: function()  {
        this.points++;
    }
}

• Prototype Methods

Sau khi dừng lại 2 ví dụ ở trên, chắc rằng chúng ta cũng đã có thêm được những lưu ý cần thiết khi sử dụng arrow function rồi đúng không nhỉ! Tại ví dụ tiếp theo, hãy cùng tìm hiểu về  prototype methods  để có thêm cái nhìn rõ nét hơn.

class Car {
    constructor(make, colour) {
        this.make = make;
        this.colour = colour;
    }
}

Ở ví dụ này, chúng ta khởi tạo một  class  là car. Và để thêm các  new Car  ta sử dụng:

const beemer = new Car('BMW', 'blue');
const subie = new Car('Subaru', 'white');

Dễ dàng nhận thấy rằng đã có  subie  là một Car {make: “Subaru”, colour: “white”}, và beemer là một Car {make: “BMW”, colour: “blue”}. Sau đó thử thêm một prototype method:

Car.prototype.summarize = () => {
    return `This car is a ${this.make} in the colour ${this.colour}`;  
};

Sau tất cả những gì chúng ta đã tạo ra, chúng ta có thể thêm được tất cả các methods vào tất cả chúng. Bởi vậy  Car.prototype.summarize  được thiết lập, vì vậy hãy viết vào console  subie.summarize

Trường hợp này khi sử dụng arrow function  this.car  trả về  undefined  và  this.colour  cũng trả về  undefined .

Bạn phải sử dụng  this  trong một function thông thường:

Car.prototype.summarize = function() {
    return `This car is a ${this.make} in the colour ${this.colour}`;  
};

Kết luận

• Arrow function  với cú pháp rút gọn, dễ hiểu là sự chọn lựa thông minh cho coder.
• Arrow function  không ràng buộc  this .

Tham khảo:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/

https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.