Trong bài viết này, ta sẽ tìm hiểu về hàm Arrow trong JavaScript cùng với sự trợ giúp của các ví dụ dẫn chứng.

Hàm Arrow trong JavaScript

Hàm Arrow là một trong những tính năng được giới thiệu trong phiên bản JavaScript ES6. Nó cho phép tạo và định nghĩa các hàm một cách gọn hơn so với việc định nghĩa cho các hàm thông thường.

Ví dụ:

let phep_chia = function(a, b) {
   return a / b;
}

let phep_chia = function(a, b) {

return a / b;

}

Đoạn mã bên trên có thể được viết lại như sau.

let phep_chia = (a, b) =&gt; a / b;

1	let phep_chia = (a, b) => a / b;

Cú pháp:

let tên_hàm = (tham số) =&gt; {
   câu lệnh
}

let tên_hàm = (tham số) => {

câu lệnh

}

Nếu phần thân có một câu lệnh hoặc một biểu thức, ta có thể viết hàm Arrow như sau:

let tên_hàm = (tham số) =&gt; 1 câu lệnh

1	let tên_hàm = (tham số) => 1 câu lệnh

Ví dụ 1: Hàm Arrow không có đối số. Nếu một hàm không nhận bất kỳ đối số nào, thì ta nên sử dụng dấu ngoặc đơn bỏ trống.

let vi_du = () =&gt; console.log('JavaScript');
vi_du();

1 2	let vi_du = () => console.log('JavaScript'); vi_du();

Kết quả:

JavaScript

1	JavaScript

Ví dụ 2: Hàm Arrow với một đối số. Nếu một hàm chỉ có một đối số, ta có thể bỏ qua dấu ngoặc đơn.

let vi_du = a =&gt; console.log(a);
vi_du('Lập trình JavaScript');

1 2	let vi_du = a => console.log(a); vi_du('Lập trình JavaScript');

Kết quả:

Lập trình JavaScript

1	Lập trình JavaScript

Ví dụ 3: Hàm Arrow được sử dụng làm một biểu thức. Ta cũng có thể tạo động một hàm và sử dụng nó như một biểu thức.

let vi_du = (true) ?
() =&gt; console.log('ABC') :
() =&gt; console.log('DEF');
vi_du();

let vi_du = (true) ?

() => console.log('ABC') :

() => console.log('DEF');

vi_du();

Kết quả:

ABC

ABC

Ví dụ 4: Hàm Arrow trên nhiều dòng. Nếu thân hàm có nhiều câu lệnh, ta cần đặt chúng bên trong dấu ngoặc nhọn {}.

Ví dụ:

let vi_du = (a, b) =&gt; {
   console.log(a);
   console.log(b);
}
vi_du("JavaScript", "Java");

let vi_du = (a, b) => {

console.log(a);

console.log(b);

}

vi_du("JavaScript", "Java");

Kết quả:

JavaScript
Java

1 2	JavaScript Java

Từ khóa this sử dụng với hàm Arrow

Bên trong một hàm thông thường, từ khóa this tham chiếu đến hàm mà nó được gọi. Tuy nhiên, điều này không hiệu quả với các hàm Arrow. Hàm Arrow không có từ khóa this. Vì vậy, bất cứ khi nào ta thực hiện từ khóa this, nó sẽ tham chiếu đến phạm vi cha của nó.

Ví dụ:

function sinh_vien() {
    this.ID = 100,
    this.vi_du = function () {
        console.log(this.ID);
        function vi_du2() {
            console.log(this.ID);
        }
        vi_du2();
    }
}

let sv = new sinh_vien();
sv.vi_du();

function sinh_vien() {

this.ID = 100,

this.vi_du = function () {

console.log(this.ID);

function vi_du2() {

console.log(this.ID);

}

vi_du2();

}

let sv = new sinh_vien();

sv.vi_du();

Ở đây, this.ID bên trong this.vi_du() có thể truy cập được vì this.vi_du() là phương thức của một đối tượng.

Tuy nhiên, vi_du2() là một hàm bình thường và this.ID không thể truy cập được vì nó tham chiếu đến đối tượng toàn cục (đối tượng Window trong trình duyệt). Do đó, this.ID bên trong hàm vi_du2() đưa ra giá trị là không xác định.

Ví dụ 2:

function sinh_vien() {
    this.ID = 100,
    this.vi_du = function () {
        console.log(this.ID);
        let vi_du2 = () =&gt; {
            console.log(this.ID);
        }
        vi_du2();
    }
}

const sv = new sinh_vien();
sv.vi_du();

function sinh_vien() {

this.ID = 100,

this.vi_du = function () {

console.log(this.ID);

let vi_du2 = () => {

console.log(this.ID);

}

vi_du2();

}

const sv = new sinh_vien();

sv.vi_du();

Kết quả:

100
100

100

Ở đây, hàm vi_du2() được định nghĩa bằng cách sử dụng hàm Arrow. Và bên trong hàm Arrow, this sẽ tham chiếu đến phạm vi của cha. Do đó, this.ID đưa ra kết quả là 100.

Liên kết các đối số

Các hàm thông thường có thể liên kết các đối số. Đó là lý do tại sao khi ta truyền các đối số cho một hàm thông thường, ta có thể truy cập chúng bằng cách sử dụng từ khóa arguments.

Ví dụ:

let vi_du = function () {
    console.log(arguments);
}
vi_du(1, 2, 100);

let vi_du = function () {

console.log(arguments);

}

vi_du(1, 2, 100);

Kết quả:

[Arguments] {'0': 1, '1': 2, '2': 100}

1	[Arguments] {'0': 1, '1': 2, '2': 100}

Tuy nhiên, hàm Arrow không thể liên kết các đối số. Khi ta cố gắng truy cập một đối số bằng cách sử dụng hàm Arrow, nó sẽ báo lỗi.

Ví dụ:

let vi_du = () =&gt; {
    console.log(arguments);
}
vi_du(1, 2, 3, 100);

let vi_du = () => {

console.log(arguments);

}

vi_du(1, 2, 3, 100);

Để giải quyết vấn đề này, ta có thể sử dụng cú pháp spread.

Ví dụ:

let vi_du = (...arg) =&gt; {
    console.log(arg);
}
vi_du(1, 2, 3, 100);

let vi_du = (...arg) => {

console.log(arg);

}

vi_du(1, 2, 3, 100);

Kết quả:

[1, 2, 3, 100]

1	[1, 2, 3, 100]

Hàm Arrow được sử dụng với Promises và hàm Callback

Các hàm Arrow cung cấp cú pháp tốt hơn để viết các Promise và hàm Callback. Promise và hàm Callback sẽ được tìm hiểu trong các bài viết sau.

Ví dụ:

a().then(function() {
    return a1();
}).then(function() {
    return a2();
}).then(function() {
    finish;
});

a().then(function() {

return a1();

}).then(function() {

return a2();

}).then(function() {

finish;

});

Đoạn mã bên trên có thể được viết lại như sau.

a()
.then(() =&gt; a1())
.then(() =&gt; a2())
.then(() =&gt; finish);

a()

.then(() => a1())

.then(() => a2())

.then(() => finish);

Những điều nên tránh với các hàm Arrow

1. Ta không nên sử dụng các hàm Arrow để tạo các phương thức bên trong các đối tượng.

Ví dụ:

let sinh_vien = {
    ID: 100,
    vi_du: () =&gt; {
        console.log(this.ID);
    }
}
sinh_vien.vi_du();

let sinh_vien = {

ID: 100,

vi_du: () => {

console.log(this.ID);

}

sinh_vien.vi_du();

Kết quả:

Undefined

Undefined

2. Ta không thể sử dụng một hàm Arrow làm một hàm tạo.

Ví dụ:

let sinh_vien = () =&gt; {};
let sv = new sinh_vien();

1 2	let sinh_vien = () => {}; let sv = new sinh_vien();

Chú ý: Các hàm Arrow đã được giới thiệu trong ES6. Một số trình duyệt có thể không hỗ trợ việc sử dụng các hàm Arrow này.

Trên đây là khái niệm và ví dụ cơ bản về hàm Arrow trong JavaScript. Hy vọng mọi người có thể áp dụng vào trong chương trình của mình. Mọi người hãy tiếp tục theo dõi các bài tiếp theo và cập nhật các bài tiếp theo về lập trình JavaScript trên tek4 nhé!

P/s: Cảm ơn mọi người đã tin tưởng tek4!

0 0 vote

Article Rating