arrow-function-la-gi

Arrow Function là gì? Phân biệt Arrow Function và Function 

Chia sẻ kinh nghiệm

Arrow Function là một trong những tính năng rất hữu ích của ES6. Tuy nhiên không phải ai cũng hiểu rõ cách sử dụng hàm này. Vì vậy trong bài viết này, topviecit.vn sẽ chia sẻ tới bạn những thông tin về Arrow Function là gì và cách phân biệt Arrow Function và Function.

Arrow Function là gì?

Để có thể phân biệt rõ ràng Arrow Function và Function, bạn cần hiểu rõ về hai khái niệm Arrow Function là gì và Function là gì. Đây là hai hàm thường xuyên được sử dụng trong quá trình code module của lập trình viên. Tuy nhiên thực tế đây là 2 hàm khác nhau và được sử dụng cho nhiều trường hợp khác nhau. Trong đó:

Function: Hay còn gọi là Regular Function, là việc khai báo hàm thông thường. Hàm thông thường là những hàm bạn chỉ cần khai báo 1 lần và có thể gọi sử dụng ở nhiều nơi khác. 

Arrow Function: Hay còn gọi là hàm mũi tên. Arrow Function là tính năng mới xuất hiện trong phiên bản ES6. Sử dụng hàm này sẽ giúp code ngắn gọn và súc tích hơn.

>>>Xem thêm: Function là gì? Bí mật về Function mà dân lập trình cần biết

Arrow Function và Function là 2 hàm khác biệt
Arrow Function và Function là 2 hàm khác biệt

Phân biệt Arrow Function và Regular Function

Tuy cả 2 đều là funtion nhưng Arrow Function và Regular Function có sự khác biệt nhất định. Những điểm khác biệt giữa Function và Arrow Function là gì cụ thể như sau:

Cú pháp thành lập

Arrow Function sử dụng ký tự => trong cú pháp. Ví dụ:

hero = () => { console.log(‘hero’) } // hero()

Còn Regular Function có cú pháp như sau:

function hero(){ console.log(‘hero’) } // hero() 

Cú pháp cho hàm có tham số:

hero = age => { console.log(‘hero ‘, age) } 

Từ những ví dụ trên có thể thấy cú pháp của Arrow Function thường ngắn gọn hơn so với Regular Function. Ngoài ra, sự khác biệt trong cú pháp giữa 2 hàm này nằm ở từ khóa return.

Với Arrow Function, ta có thể bỏ qua từ khóa này. Ví dụ:

double = a => a * 2

Còn với Regular Function thì không. Ví dụ: 

function double(q){

return a * 2

}

Giá trị của từ khóa ‘this’

‘This’ là một từ khóa rất quan trọng bởi nó chứa đựng reference. Đây là từ khóa dùng để trỏ tới object gọi hàm đó. Tùy thuộc vào điều kiện lập trình mà reference có thể là bất cứ object nào. Vậy sự khác biệt của ‘this’ giữa Regular Function và Arrow Function là gì?

Đối với Regular Function, giá trị của ‘this’ thay đổi theo ngữ cảnh. Nó có thể là global object hoặc undefeined. Ví dụ: 

const myObject = {

  method() {

    console.log(this);

  }

};

myObject.method(); 

// => “myObject”

Còn với Arrow Function, giá trị của ‘this’ sẽ bằng giá trị của function ở ngoài. Ví dụ: 

const myObject = {

  myMethod(items) {

    console.log(this); // “myObject”

    const callback = () => {

      console.log(this); // “myObject”

    };

    items.forEach(callback);

  }

};

myObject.myMethod([1, 2, 3]);

>>>Xem thêm: Git Rebase là gì? Tất tần tật thông tin bạn cần biết

Khác với Regular Function, Arrow Function không bind keyword ‘this’
Khác với Regular Function, Arrow Function không bind keyword ‘this’

Biến argument 

Tương tự như giá trị của ‘this’, Arrow Function không bind biến argument. Thông thường, argument thường được dùng cho những Function không thể xác định số lượng tham số. Ví dụ:

function sum() {

  return Array.from(arguments).reduce(

    (accumulator, currentValue) => accumulator + currentValue

  );

}

console.log(sum(0, 2));         // => 2

console.log(sum(0, 2, 4));      // => 6

console.log(sum(0, 2, 4, 6));   // => 12

Còn nếu bạn sử dụng argument cho hàm Arrow Function có thể dẫn tới kết quả lỗi. Bởi vì biến này đã bị blind và không thể định nghĩa. Ví dụ:

let sum = () => {

  return Array.from(arguments).reduce(

    (accumulator, currentValue) => accumulator + currentValue

  );

}

console.log(sum(0, 2));

// Uncaught ReferenceError: arguments is not defined

Hàm constructor

Regular Function tạo ra object theo cách sau:

function Bike(color) {

    this.color = color;

}

const yellowBike = new Bike(‘yellow’);

yellowBike instanceof Bike; // => true

Còn Arrow Function do không có vùng tự trị riêng (execution context) nên không thể dùng như một constructor. Ví dụ

const Bike = (color) => {

  this.color = color;

};

const yellowBike = new Bike(‘yellow’);

// => TypeError: Bike is not a constructor

Thuộc tính Prototype

Trong Java, tất cả mọi đối tượng đều sở hữu và kế thừa thuộc tính prototype. Tuy nhiên hàm Arrow Function không thể được dùng làm constructor nên hàm này không có thuộc tính prototype. Ví dụ:

let Hi = () => {};

console.log(Hi.prototype); // undefined

Tóm lại, những điểm khác biệt giữa Regular Function và Arrow Function là gì có thể kể tới như sau: 

  • Arrow Function giúp code trở nên ngắn gọn hơn so với hàm Function thông thường:
  • Arrow Function có thể dùng chung với map, filter, reducer,…
  • Arrow Function không có bind và không định nghĩa giá trị của từ khóa ‘this’.
  • Hàm này không có thuộc tính prototype.
  • Không nên sử dụng Arrow Function là method của object. Thay vào đó bạn hãy sử dụng Function thông thường. 

Khi nào nên sử dụng Regular Function và Arrow Function?

Từ những ví dụ trên có thể thấy 2 hàm Regular Function và Arrow Function có sự khác biệt nhất định. Vậy câu hỏi đặt ra là nên sử dụng những hàm này trong trường hợp nào? 

Với Arrow Function, bạn nên sử dụng nó khi làm việc với callbacks function như map, filter, reducer,… Còn Regular Function lại phát huy hiệu quả tốt hơn khi làm việc với object. Hai hàm này không thể thay thế nhau mà hãy sử dụng chúng hợp lý để phát huy hiệu quả cao nhất. 

Nên sử dụng Arrow Function và Regular Function phù hợp với mục đích code
Nên sử dụng Arrow Function và Regular Function phù hợp với mục đích code

Trên đây là những thông tin mà bạn nên biết về hàm Arrow Function mới xuất hiện trong ES6. Hy vọng qua bài viết này bạn đã hiểu Arrow Function là gì và biết cách phân biệt hàm này với Function thông thường. Chia sẻ bài viết này nếu bạn thấy những thông tin trên hữu ích nhé. Chúng tôi sẽ tiếp tục cập nhật những thông tin chuyên sâu khác bề hàm Arrow Function trong những bài viết tiếp theo.

>>>Xem thêm: Side Effect là gì? Tất cả những kiến thức newbie cần biết

Hình ảnh: Sưu tầm

Trả lời

Email của bạn sẽ không được hiển thị công khai.