Một cách ngắn gọn và hiệu quả để viết các function
JavaScript Arrow Function là một tính năng mạnh mẽ trong JavaScript, cho
phép bạn viết hàm một cách ngắn gọn và hiệu quả. Trong tiêu đề này,
chúng tôi giới thiệu về cách sử dụng JavaScript Arrow Function và những
lợi ích của nó. Bạn sẽ tìm hiểu cách viết các hàm một dòng, tránh việc
mất thời gian và tăng tính khả dụng của mã nguồn. Với cú pháp đơn giản
và khả năng liên kết với ngữ cảnh gốc, Arrow Function là công cụ hữu ích
cho những lập trình viên muốn tối ưu hóa mã nguồn JavaScript của mình.
Khám phá cách sử dụng JavaScript Arrow Function để viết mã ngắn gọn và
dễ đọc hơn ngay hôm nay!
Arrow function là một trong những tính năng được giới thiệu trong phiên
bản ES6 của JavaScript. Nó cho phép bạn tạo các function theo cách gọn
gàng hơn so với các function thông thường. Ví dụ,
Function này
// function expression
let x = function(x, y) {
return x * y;
}
Bạn có thể viết như thế này khi sử dụng Arrow Function
// using arrow functions
let x = (x, y) => x * y;
Arrow Function Syntax
Cú pháp của Arrow Function như sau:
let myFunction = (arg1, arg2, ...argN) => {
statement(s)
}
Ở đây
- myFunction: là tên của function.
- (arg1, arg2, ...argN): là các đối số của function.
- statement(s): là function body.
Nếu phần nội dung chỉ có một câu lệnh hoặc biểu thức, bạn có thể viết arrow
function dưới dạng:
let myFunction = (arg1, arg2, ...argN) => expression
Example 1: Arrow Function with No Argument
Nếu một function không nhận bất kỳ đối số nào, thì bạn nên sử dụng dấu ngoặc
đơn trống. Ví dụ,
let greet = () => console.log('Hello');
greet(); // Hello
Example 2: Arrow Function with One Argument
Nếu một function chỉ có một đối số, bạn có thể bỏ qua dấu ngoặc đơn. Ví dụ,
let greet = x => console.log(x);
greet('Hello'); // Hello
Example 3: Arrow Function as an Expression
Bạn cũng có thể tự động tạo một function và sử dụng nó như một biểu thức. Ví
dụ,
let age = 5;
let welcome = (age < 18) ?
() => console.log('Baby') :
() => console.log('Adult');
welcome(); // Baby
Example 4: Multiline Arrow Functions
Nếu function body có nhiều câu lệnh, bạn cần đặt chúng bên trong dấu ngoặc
nhọn "{}". Ví dụ,
let sum = (a, b) => {
let result = a + b;
return result;
}
let result1 = sum(5,7);
console.log(result1); // 12
"this" with Arrow Function
Bên trong một chức năng thông thường, từ khóa "this" đề cập đến chức năng mà
nó được gọi.
Tuy nhiên, "this" không liên quan đến arrow function. Arrow function không có
cái này. Vì vậy, bất cứ khi nào bạn gọi "this", nó đề cập đến phạm vi cha của
nó. Ví dụ,
Inside a regular function
function Person() {
this.name = 'Jack',
this.age = 25,
this.sayName = function () {
// this is accessible
console.log(this.age);
function innerFunc() {
// this refers to the global object
console.log(this.age);
console.log(this);
}
innerFunc();
}
}
let x = new Person();
x.sayName();
Output
25
undefined
Window {}
Ở đây, this.age bên trong this.sayName() có thể truy cập được
vì this.sayName() là phương thức của một đối tượng.
Tuy nhiên, innerFunc() là một regular function và
this.age không thể truy cập được vì this đề cập đến đối tượng
chung (đối tượng Window trong trình duyệt). Do đó, this.age bên trong
hàm innerFunc() cho kết quả undefined.
Inside an arrow function
function Person() {
this.name = 'Jack',
this.age = 25,
this.sayName = function () {
console.log(this.age);
let innerFunc = () => {
console.log(this.age);
}
innerFunc();
}
}
const x = new Person();
x.sayName();
Output
25
25Ở đây, hàm innerFunc() được xác định bằng arrow function. Và bên trong
arrow function, this đề cập đến phạm vi của parent. Do đó,
this.age cho 25.
Arguments Binding
Các regular function có arguments binding. Đó là lý do tại sao khi bạn truyền
đối số cho một regular function, bạn có thể truy cập chúng bằng từ khóa
arguments. Ví dụ,
let x = function () {
console.log(arguments);
}
x(4,6,7); // Arguments [4, 6, 7]
Các arrow function không có arguments binding.
Khi bạn cố gắng truy cập một arguments bằng arrow function, nó sẽ báo
lỗi. Ví dụ,
let x = () => {
console.log(arguments);
}
x(4,6,7);
// ReferenceError: Can't find variable: arguments
Để giải quyết vấn đề này, bạn có thể sử dụng cú pháp spread. Ví dụ
let x = (...n) => {
console.log(n);
}
x(4,6,7); // [4, 6, 7]
Arrow Function with Promises and Callbacks
Các arrow function cung cấp cú pháp viết tốt hơn khi sử dụng promises và
callbacks. Ví dụ
// ES5
asyncFunction().then(function() {
return asyncFunction1();
}).then(function() {
return asyncFunction2();
}).then(function() {
finish;
});
Bạn có thể viết lại với arrow function như sau
// ES6
asyncFunction()
.then(() => asyncFunction1())
.then(() => asyncFunction2())
.then(() => finish);
Những điều nên tránh khi sử dụng Arrow Function
1. Bạn không nên sử dụng các arrow function để tạo các phương thức bên trong
các đối tượng.
let person = {
name: 'Jack',
age: 25,
sayName: () => {
// this refers to the global .....
//
console.log(this.age);
}
}
person.sayName(); // undefined
2. Bạn không thể sử dụng arrow function làm hàm tạo. Ví dụ,
let Foo = () => {};
let foo = new Foo(); // TypeError: Foo is not a constructor
Lưu ý: Các arrow function đã được giới thiệu trong ES6. Một số trình
duyệt có thể không hỗ trợ sử dụng arrow function. Truy cập
JavaScript Arrow Function support
để tìm hiểu thêm.
Tags
Javascript