Cú Pháp Hàm Mũi Tên (Arrow Function)

Cú Pháp Hàm Truyền Thống

1. Hàm Định Nghĩa Truyền Thống:

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

1. Hàm Định Nghĩa Qua Biến:

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

const add = (a, b) => a + b;
Cú pháp ngắn gọn và rõ ràng hơn.
Nếu hàm chỉ có một biểu thức, bạn có thể bỏ qua dấu {} và từ khóa return

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

function Timer() {
this.seconds = 0;
setInterval(function() {
this.seconds++; // this không trỏ đến đối tượng Timer, mà đến đối tượng toàn cục
}, 1000);
}

function Timer() {
this.seconds = 0;
setInterval(() => {
this.seconds++; // this kế thừa từ đối tượng Timer
}, 1000);
}

Để hiểu rõ hơn về sự khác biệt giữa hàm mũi tên và hàm truyền thống trong việc xử lý đối tượng arguments, chúng ta sẽ làm rõ từng điểm bằng ví dụ cụ thể.

Đối Tượng arguments
arguments: Đây là một đối tượng giống mảng trong JavaScript, chứa tất cả các đối số được truyền vào hàm. Nó có thể được sử dụng trong hàm truyền thống để truy cập các đối số mà không cần phải định nghĩa chúng là các tham số riêng lẻ.
Ví Dụ Cụ Thể

1. Hàm Truyền Thống với arguments

function logArgs() {
console.log(arguments); // Hiển thị tất cả các đối số được truyền vào hàm
}

logArgs(1, 2, 3, 4); // In ra: [1, 2, 3, 4]

Giải thích:
Hàm logArgs sử dụng đối tượng arguments để lấy tất cả các đối số được truyền vào.
Khi gọi logArgs(1, 2, 3, 4), arguments chứa [1, 2, 3, 4] và in ra console.

1. Hàm Mũi Tên và arguments

const logArgs = () => {
console.log(arguments); // Lỗi: arguments không tồn tại trong hàm mũi tên
}

logArgs(1, 2, 3, 4);

Sử Dụng Rest Parameters
Thay vào đó, bạn có thể sử dụng cú pháp rest parameters trong hàm mũi tên để đạt được hiệu quả tương tự:

javascript
Copy code
const logArgs = (...args) => {
console.log(args); // In ra: [1, 2, 3, 4]
}

Giải thích:
...args: Đây là cú pháp rest parameters, cho phép bạn nhóm tất cả các đối số truyền vào thành một mảng.
args sẽ chứa tất cả các đối số được truyền vào hàm, tương tự như arguments trong hàm truyền thống, nhưng theo cách rõ ràng hơn trong hàm mũi tên.

1. Rest Parameters và Spread Syntax Rest Parameters: Thu thập các đối số còn lại vào một mảng. function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); } console.log(sum(1, 2, 3, 4)); // In ra: 10 Spread Syntax: Phân tách mảng hoặc đối tượng thành các phần tử.

const nums = [1, 2, 3];
const moreNums = [...nums, 4, 5];
console.log(moreNums); // In ra: [1, 2, 3, 4, 5]

const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3 };
console.log(newObj); // In ra: { a: 1, b: 2, c: 3 }