Arrow Function là gì? ưu nhược điểm khi sử dụng?

Trong quá trình viết mã JavaScript hay các framework js như: AngularJS, React, VueJS,… có thể bạn sẽ gặp những hàm khai báo có cấu trúc như sau:

FunctionName =()=>{
//TODO: code
}

Có thể nếu chưa biết bạn sẽ thắc mắc cách khai báo này có tên gọi là gì? Ưu và nhược điểm của cách khai báo này? Cách khai báo hàm cấu trúc này có tên gọi là “Arrow Function”.

Các khái niệm liên quan

Outer Context

Hay còn gọi là lexical scope, đây là phạm vi của các biến và hàm được định nghĩa bên ngoài một hàm. Khi một hàm được định nghĩa trong một context (chẳng hạn như trong một hàm khác), nó có thể truy cập các biến và hàm được định nghĩa trong context đó và các context cha của nó. Arrow function sẽ bị giới hạn bởi quy chuẩn này.

Ví dụ sử dụng arrow function hợp lệ:

function outerFunction() {
  const outerVar = 'outer';
  function innerFunction() {
    console.log(outerVar); //có thể truy cập biến outerVar của outerFunction.
  }
  innerFunction();
}
outerFunction(); // logs 'outer'

Ví dụ viết lại đoạn mã trên theo cấu trúc khai báo hàm dạng arrow function;

outerFunction=()=> {
  const outerVar = 'outer';
  innerFunction=()=>{
    console.log(outerVar);//có thể truy cập biến outerVar của outerFunction.
  }
  innerFunction();
}
outerFunction();//logs 'outer'

Ví dụ sử dụng arrow function không hợp lệ:

const person = {
  name: "John",
  age: 30,
  greet: () => {
    console.log(`Hi, my name is ${this.name}`); //Không hoạt động
  }
};
person.greet();

Như đã đề cập arrow function có nhược điểm là không có phạm vi riêng của nó mà sử dụng phạm vi của hàm sử dụng nó. Tức là ở trong ví dụ trên this chính là hàm cha của nó.

Do đó, trường hợp này cần phải sử dụng khai báo function như thông thường:

const person = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hi, my name is ${this.name}`); // Hoạt động
  }
};
person.greet();

Đối số rest và default arguments

Là các tính năng của JavaScript cho phép định nghĩa các hàm với số lượng đối số không xác định hoặc giá trị mặc định cho các đối số.

Rest

Đối số rest được định nghĩa bằng cách sử dụng ba chấm (“…”) trước tên đối số cuối cùng, nó cho phép truyền vào nhiều đối số hơn số lượng đối số được khai báo và lưu trữ chúng vào một mảng. Ví dụ:

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // logs 10

Default arguments

Được định nghĩa bằng cách gán giá trị mặc định cho một đối số trong khai báo hàm. Nếu đối số không được truyền vào hoặc được truyền vào giá trị undefined, giá trị mặc định sẽ được sử dụng. Ví dụ:

function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}
greet(); // logs "Hello, World!"
greet('Ngọc'); // logs "Hello, Ngọc!"