Phân biệt arrow function và function trong JavaScript

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. Tuy nhiên, arrow function không hề thay thế sửa chữa trọn vẹn function được .

Vì vậy, bài viết này sẽ giúp bạn phân biệt arrow function và function trong JavaScript. Qua đó, bạn biết cách sử dụng chúng sao cho phù hợp nhất với từng hoàn cảnh.

Giống nhau

Arrow function và function đều là function .

Khác nhau cơ bản

Cú pháp

Arrow function sử dụng kí tự =>:

let sayHi = () => {
  console.log(" Hi ");
};

sayHi();

Function sử dụng từ khoá function:

let sayHi = function () {
  console.log(" Hi ");
};

sayHi();

Arrow function thường ngắn gọn hơn function

Với hàm có 1 tham số, arrow function hoàn toàn có thể bỏ lỡ cặp dấu ngoặc đơn .

// Sử dụng arrow function
let greeting = name => {
  console.log(`Hello, my name is ${name}`);
};

greeting("Lam");
// Hello, my name is Lam

Tương đương với function :

let greeting = function (name) {
  console.log(
`Hello, my name is
USD {name}
`);
};

greeting(" Lam ");

Ngoài ra, arrow function cũng có thể bỏ qua từ khoá return.

 
let double = (x) => x * 2;
double(1); 

Tương đương với function :

let double = function (x) {
  return x * 2;
};

double(1); 

Ví dụ sử dụng arrow function với những higher-order functions như : forEach, map, filter, …

► Sử dụng map với function:

let arr = [1, 2, 3, 4];

let square1 = arr.map(function (e) {
  return e * e;
});
console.log(square1); 

► Sử dụng map với arrow function:

let arr = [1, 2, 3, 4];

let square2 = arr.map((e) => e * e);
console.log(square2); 

Arrow function không bind this

Arrow function không định nghĩa giá trị this của riêng nó giống như function.

Ví dụ sử dụng function :

var x = 0;

function DelayPrint(
x, timeout
) {
  this.x = x;

  setTimeout(function print() {
    console.log(
`The value is
USD {this.x}
.`);
  }, timeout);
}

let p = new DelayPrint(1, 1000);

Trong chế độ none-strict, function print định nghĩa this chính là đối tượng global (đối với trình duyệt thì đó là window). Do đó, this.x tương đương với window.x và bằng 0.

Để đoạn code trên hoạt động giải trí theo đúng mong ước thì bạn phải sửa lại như sau :

var x = 0;

function DelayPrint(
x, timeout
) {
  this.x = x;
  let self = this;

  setTimeout(function print() {
    console.log(
`The value is
USD {self.x}
.`);
  }, timeout);
}

let p = new DelayPrint(1, 1000);

Ví dụ sử dụng arrow function :

var x = 0;

function DelayPrint(
x, timeout
) {
  this.x = x;

  setTimeout(() => {
    console.log(
`The value is
USD {this.x}
.`);
  }, timeout);
}

let p = new DelayPrint(1, 1000);

Ngược lại với function, arrow function không định nghĩa lại this.

Do đó, giá trị của this sẽ ứng với ngữ cảnh gần nhất của nó. Vì vậy, trong đoạn code trên this.x tương ứng với giá trị x được truyền vào và bằng 1.

Arrow function không bind arguments

Tương tự như đối với this, arrow function cũng không định nghĩa giá trị arguments của riêng nó.

Đối tượng arguments đặc biệt hữu ích đối với những function không xác định trước số lượng tham số.

Ví dụ hàm tính tổng toàn bộ giá trị những tham số truyền vào :

function sum
(
Xem thêm: Ý nghĩa các con số từ 00 đến 99 trong kết quả xổ số 
) {
  return Array.from(arguments).reduce(
    (
accumulator, currentValue
) => accumulator + currentValue
  );
}

console.log(sum(1, 2));  
console.log(sum(1, 2, 3));  
console.log(sum(1, 2, 3, 4)); 

Đối với arrow function, việc sử dụng arguments sẽ lỗi vì biến này không được định nghĩa ở arrow function.

let sum = () => {
  return Array.from(arguments).reduce(
    (
accumulator, currentValue
) => accumulator + currentValue
  );
};

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

Tuy nhiên, bạn vẫn có thể sử dụng rest parameters để thay thế cho arguments.

let sum = (
...args
) => {
  return Array.from(args).reduce(
    (
accumulator, currentValue
) => accumulator + currentValue
  );
};

console.log(sum(1, 2));  
console.log(sum(1, 2, 3));  
console.log(sum(1, 2, 3, 4)); 

Arrow function không phù hợp làm phương thức cho object

Chính vì arrow function không định nghĩa giá trị this của riêng nó, nên arrow function không phù hợp làm phương thức cho object.

let obj = {
  a: 1,
  b: () => console.log(this.a, this),
  c: function () {
    console.log(this.a, this);
  },
};

obj.b();  
obj.c(); 

Vì vậy, nếu muốn định nghĩa phương thức cho object thì bạn nên sử dụng function.

Arrow function không thể sử dụng làm hàm constructor

Trước khi ES6 sinh ra, bạn hoàn toàn có thể sử dụng function làm hàm khởi tạo cho object .

function Dog(
name, color
) {
  this.name = name;
  this.color = color;
}

let myDog = new Dog(" Nick ", " White ");
console.log(myDog.name, myDog.color);

Nếu thay đoạn code trên bằng arrow function, bạn sẽ bị lỗi: TypeError: Dog is not a constructor.

let Dog = (
name, color
) => {
  this.name = name;
  this.color = color;
};

let myDog = new Dog(" Nick ", " White ");
console.log(myDog.name, myDog.color);

Arrow function không có thuộc tính prototype

Mọi đối tượng trong JavaScript đều có thuộc tính prototype và kế thừa cũng theo prototype.

Tuy nhiên, nếu arrow function đã không hề làm constructor cho object thì điều này cũng trọn vẹn hài hòa và hợp lý .

let Foo = () => {};
console.log(Foo.prototype); 

Arrow function không được hoisted

Để hiểu thêm về hoisting bạn có thể tham khảo thêm tại bài viết: Understanding Hoisting in JavaScript.

Về cơ bản, hoisting được hiểu là biến và hàm được đưa lên đầu của phạm vi biến, hàm trước khi đoạn code đó được thực hiện.

Arrow function không được hoisted. Nghĩa là bạn phải định nghĩa arrow function trước khi sử dụng nó.

 
let myFunc1 = () => {};
myFunc1();  

 
myFunc2();  
let myFunc2 = () => {};

Ngược lại, function declaration được hoisted nên bạn có thể gọi hàm trước khi định nghĩa nó.

myFunc();  
function myFunc() 
{
Xem thêm: 0225 là mã vùng ở đâu? Đầu số 0225 là mạng gì? - Edanhba
}

Tổng kết

Trên đây là một số ít điểm giúp bạn phân biệt arrow function và function trong JavaScript. Để tiện theo dõi, mình tóm tắt lại những đặc thù khác nhau của chúng như sau :

• Cú pháp
• Arrow function thường ngắn gọn hơn function
• Arrow function không bind this
• Arrow function không bind arguments
• Arrow function không phù hợp làm phương thức cho object
• Arrow function không thể sử dụng làm hàm khởi tạo
• Arrow function không có thuộc tính prototype
• Arrow function không được hoisted

Tham khảo :