Tất cả về arrow function trong javascript

1. Arrow function là gì?

Nói nôm na arrow function là cú pháp để viết function theo kiểu mới, xuất hiện trong ES6. Và nó cũng có vài đặc tính nhỏ khác với regular function.

Cú pháp như sau: 

const bbmcode = (param1, param2, ..) => { // statement }

🔅 Với param1, param2 là những arguments, tiếp đến sẽ là dấu mũi tên (=>) và bên trong cặp ngoặc nhọn {} là phần thân của function. Xử lý sẽ viết trong đây.

🔅 Như vậy so với regular function, cú pháp cũ

function bbmcode (param1, param2) { // statement}

thì có thể thấy rõ là đã bỏ đi chữ function và thêm vào mũi tên => sau các arguments.

2. Các cách viết arrow function

2.1 Với hàm chỉ có 1 argument và chỉ chứa 1 dòng code xử lý

// Cách viết normal (regular function)
function sayHello(name) {
    return `hello ${name}`;
}

// arrow function. Cách viết 1
const sayHello1 = (name) => {return `hello ${name}`}
// arrow function. Cách viết 2. Nếu chỉ 1 dòng lệnh và return luôn thì có thể bỏ cả chữ return
const sayHello2 = (name) => `hello ${name}`;
// arrow function. Cách viết 3. Nếu chỉ 1 argument, có thể bỏ dấu ()
const sayHello3 = name => `hello ${name}`;

console.log(sayHello1('bbmcode'), sayHello2('bbmcode'), sayHello3('bbmcode'));
// Output: hello bbmcode hello bbmcode hello bbmcode

2.2 Với hàm chứa nhiều dòng code xử lý

// 1. Tính tổng:
// Cách viết normal (regular function)
function total(num1, num2) {
    return num1 + num2;
}

// arrow function. Cách viết 1
const total1 = (num1, num2) => {return num1 + num2}
// arrow function. Cách viết 2. Nếu chỉ 1 dòng lệnh và return luôn thì có thể bỏ cả chữ return
const total2 = (num1, num2) => num1 + num2

console.log(total(1, 2), total1(1, 2), total2(1, 2)); // Output: 3 3 3

//--------
// 2. Chuyển số tiền tệ
// Cách viết normal (regular function)
function money(num1, num2) {
    let total = num1 + num2;
    return total.toFixed(2);
}

// arrow function
const money1 = (num1, num2) => {
    let total = num1 + num2;
    return total.toFixed(2);
}

console.log(money(100.102939, 200.2020202), money1(100.102939, 200.2020202));
// Output: 300.30 300.30

3. Ngoài cú pháp, arrow function còn khác regular function điểm nào nữa?

Có đấy, những điểm sau sẽ quan trọng để chúng ta lưu ý khi sử dụng arrow function.

3.1 Arrow function không có object arguments

Với function bình thường (regular function), object arguments là một biến local, tự động lưu trữ các arguments của function. 

function print() {
  console.log(arguments)
}
bbmcode(1, 'test', [1,2,3]); // [1, 'test', [1,2,3] ]

// arrow function
const bbmcode2 = () => {console.log(arguments)}
bbmcode2(1, 'test', [1,2,3]); // error: arguments is not defined

3.2 Arrow function có biến this mang ý nghĩa và scope khác hoàn toàn

 Với function bình thường (regular function), một biến this sẽ được tạo để reference tới "đối tượng" đã gọi nó.

Còn với arrow function, this lúc này là một global window object luôn.

const obj = {
  name: 'bbmcode',
  age: 20,
  test: function() {
    console.log(this)
  }
}

obj.test() // {name: 'bbmcode', age: 20, test: ƒ}

// arrow function
const obj2 = {
  name: 'bbmcode',
  age: 20,
  test: () => {console.log(this)}
}
obj2.test(); // Window {window: Window, self: Window, document: document, name: '', location: Location, …}

3.3 Không thể gọi arrow function trước chỗ khai báo

// không bị lỗi
sayHello('bbmcode'); // hello bbmcode
function sayHello(name) {
    return `hello ${name}`;
}

// error!
sayHello2('bbmcode'); // sayHello2 is not defined
const sayHello2 = name => `hello ${name}`;

Trên đây là khá đầy đủ về arrow function, nhìn chung cách dùng khá thú vị và ngắn gọn. Và tất nhiên chúng ta cũng không bỏ regular function. Tùy ngữ cảnh mà uyển chuyển sử dụng.

Chủ đề này mình cũng có làm video trên youtube. Mời các bạn xem nha.

Xin cảm ơn!