Arrow Function vs Function in JavaScript: Nắm vững Sự Khác Biệt để Viết Code Nhanh hơn, Hiệu quả hơn

vào

Bạn đang học JavaScript và bắt gặp hai khái niệm “arrow function” và “function”? Bạn phân vân không biết nên chọn loại nào để viết code? Hãy cùng “Truyền Thông Bóng Đá” khám phá sự khác biệt giữa hai loại hàm này và tìm ra cách sử dụng hiệu quả nhất cho từng trường hợp.

Arrow Function là gì?

Arrow function là một loại hàm ngắn gọn được giới thiệu trong ES6 (ECMAScript 2015) và được thiết kế để viết code JavaScript một cách đơn giản và dễ đọc hơn.

Ví dụ: 

const square = x => x * x;

Trong ví dụ trên, chúng ta định nghĩa một hàm square sử dụng arrow function. Hàm này nhận vào một tham số x và trả về bình phương của x.

Function Declaration là gì?

Function declaration là cách khai báo hàm truyền thống trong JavaScript.

Ví dụ:

function square(x) {
  return x * x;
}

Trong ví dụ này, chúng ta khai báo hàm square sử dụng function declaration. Hàm nhận vào tham số x và trả về bình phương của x.

So sánh Arrow Function và Function Declaration:

1. Cú pháp:

  • Arrow function: Cú pháp ngắn gọn, dễ đọc.
  • Function declaration: Cú pháp truyền thống, đầy đủ hơn.

2. this binding:

  • Arrow function: Không có this binding riêng, this luôn tham chiếu đến this của context bao quanh (lexical this).
  • Function declaration: this binding phụ thuộc vào cách gọi hàm.

Ví dụ: 

const obj = {
  name: 'Truyền Thông Bóng Đá',
  sayHello: function() {
    console.log(`Xin chào từ ${this.name}`);
  },
  sayGoodbye: () => {
    console.log(`Tạm biệt từ ${this.name}`);
  }
};

obj.sayHello(); // In ra: Xin chào từ Truyền Thông Bóng Đá
obj.sayGoodbye(); // In ra: Tạm biệt từ Truyền Thông Bóng Đá (this tham chiếu đến obj)

const anotherSayGoodbye = obj.sayGoodbye;
anotherSayGoodbye(); // In ra: Tạm biệt từ undefined (this tham chiếu đến window)

3. Áp dụng cho các hàm ẩn danh (Anonymous Function):

  • Arrow function: Thích hợp để viết hàm ẩn danh, tạo code gọn gàng hơn.
  • Function declaration: Có thể dùng cho cả hàm có tên và hàm ẩn danh.

4. Sử dụng trong các method của đối tượng:

  • Arrow function: Dễ dàng sử dụng trong các method của đối tượng, đặc biệt khi this binding quan trọng.
  • Function declaration: Cần lưu ý this binding khi sử dụng trong các method của đối tượng.

5. Hoạt động trong callback:

  • Arrow function: Dễ dàng sử dụng trong các callback, vì this binding luôn giữ nguyên.
  • Function declaration: Cần lưu ý this binding khi sử dụng trong callback.

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

  • Khi bạn cần một cú pháp ngắn gọn và dễ đọc.
  • Khi bạn muốn sử dụng this binding của context bao quanh.
  • Khi bạn viết hàm ẩn danh.
  • Khi bạn sử dụng hàm trong callback.

Khi nào nên sử dụng Function Declaration?

  • Khi bạn cần this binding linh hoạt.
  • Khi bạn muốn sử dụng hàm có tên.
  • Khi bạn cần hỗ trợ các trình duyệt cũ hơn (ES5).

Ví dụ minh họa:

Arrow function:

const add = (a, b) => a + b;
const square = x => x * x;
const greet = () => console.log('Xin chào!');
const double = numbers => numbers.map(number => number * 2);

Function declaration:

function add(a, b) {
  return a + b;
}

function square(x) {
  return x * x;
}

function greet() {
  console.log('Xin chào!');
}

function double(numbers) {
  return numbers.map(function(number) {
    return number * 2;
  });
}

Kết luận:

Arrow function và Function declaration đều là những công cụ mạnh mẽ trong JavaScript, mỗi loại có ưu điểm riêng. Nắm vững sự khác biệt giữa hai loại hàm này giúp bạn viết code hiệu quả hơn, dễ đọc hơn và tránh các lỗi liên quan đến this binding.

FAQ:

1. Arrow function có thể được sử dụng làm constructor không?

Không. Arrow function không có this binding riêng, nên không thể được sử dụng làm constructor.

2. Khi nào nên sử dụng arrow function cho callback?

Sử dụng arrow function cho callback khi bạn muốn this binding của context bao quanh được giữ nguyên.

3. Arrow function có thể sử dụng các từ khóa arguments và super không?

Không. Arrow function không có this binding riêng, nên cũng không có arguments và super.

4. Arrow function và Function declaration có cùng hiệu suất không?

Hiệu suất của arrow function và Function declaration gần như tương đương nhau, nhưng arrow function có thể hơi nhanh hơn một chút trong một số trường hợp cụ thể.

5. Liệu nên sử dụng arrow function hay Function declaration trong JavaScript hiện đại?

Trong JavaScript hiện đại, arrow function thường được sử dụng vì cú pháp ngắn gọn và dễ đọc hơn. Tuy nhiên, vẫn có những trường hợp cần sử dụng Function declaration.

VS