JavaScript Arrow Function: Một cách ngắn gọn và hiệu quả để viết các hàm

Một cách ngắn gọn và hiệu quả để viết các function

thumnail

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.

No comments:

Powered by Blogger.