Sử dụng Arrow function trong ES6

Giới thiệu nội dung bài viết

Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người về cách khai báo và sử dụng Arrow function của ES6. Lần lượt giới thiệu và giải thích khái niệm và ví dụ về Arrow function của ES6 là gì?

1. Arrow function trong ES6

Arrow function là một chức năng mới trong ES6 giúp chúng ta có thể viết phương thức một cách ngắn gọn. Anh lấy ví dụ ta có phương thức cộng 2 số viết theo cách truyền thống như sau.

1
2
3
4
let add = function(x,y) {
  return x + y;
}
console.log(add(10,20)); // 30

Khi áp dụng Arrow function chúng ta sẽ viết theo cách mới ngắn gọn hơn như sau.

1
2
let add = (x,y) => x + y;
console.log(add(10,20)); // 30;

Ta sử dụng ký hiệu mũi tên (=>)này để khai báo chúng ta sử dụng kiểu Arrow function. Thay vì phải viết function(x,y) thì bây giờ ta không cần từ khoá function nữa mà chỉ viết ngắn gọn (x,y). Phần thân của phương thức return x + y sẽ thay bằng x + y.

Trường hợp nếu phần thân của phương thức nằm trong block (khối lệnh) thì chúng ta phải cần thêm từ khoá return như sau

1
2
3
4
let add = (x, y) => { 

    return x + y; 
};

2. Cú pháp Arrow function với tham số nhiều hơn 2

Arrow function bắt đầu bằng dấu mở ngoặc tròn ( tiếp đến là các tham số và đóng ngoặc ) tiếp sau đó là mũi tên arrow => và phần cuối cùng là các dòng code mình xử lý (expression)

1
(p1, p2, ..., pn) => expression;

Ví dụ như anh có dòng mã sắp xếp thứ tự giảm dần như sau. Nếu ta ko dùng arrow function

1
2
3
4
5
let numbers = [4,2,6];
numbers.sort(function(a,b){ 
    return b - a; 
});
console.log(numbers); // [6,4,2]

Bây giờ chúng ta sẽ viết lại code ở trên bằng arrow function thì các em sẽ thấy nó ngắn gọn hơn như sau

1
2
3
let numbers = [4,2,6];
numbers.sort((a,b) => b - a);
console.log(numbers); // [6,4,2]

3. Cú pháp Arrow function với 1 tham số

Trường hợp arrow function chỉ có 1 tham số thì ta khai báo như sau bắt đầu bằng dấu ngoặc tròn ( tiếp đến là tham số và kết thúc bằng dấu đóng ngoặc tron ) sau đó là dấu mũi tên => và cuối cùng là phần code xử lý (statement)

1
(p1) => { statements }

1
2
3
4
let names = ['John', 'Mac', 'Peter'];
let lengths = names.map(name => name.length);

console.log(lengths);

4. Cú pháp Arrow function với không tham số

1
() => { statements }

Ví dụ như sau

1
2
let logDoc = () => console.log(window.document);
logDoc();

5. Sự khác nhau giữa Arrow function và function bình thường

Sự khác nhau về cách dùng từ khoá this. Anh có ví dụ sau đây, chúng ta có lớp Car và phương thức speedUp như sau.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        setTimeout(function () {
            console.log(this.speed); // undefined
        }, 1000);

    };
}

let car = new Car();
car.speedUp(50); // undefined

Khi chương trình chạy đến hàm setTimeout và khi ta console.log thì nhận giá trị speed là undefine. Như vậy this.speed trong hàm console.log của phương thức setTimeout không thể lấy được giá trị tham số speed trong hàm speedUp. Cái này là do phạm vi biến speed chỉ không thể truy cập và thấy được ở hàm console.log.

Các em có thể đọc kỹ hơn ở bài viết phạm vi của biến gồm global, local, lexical scope etc. Cái ví dụ ở trên là thuộc vào phạm vi lexical scope.

Chúng ta sẽ sửa lại code ở trên bằng cách khai báo thêm biến let self = this trước khi thực hiện gọi hàm setTimeout như sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        let self = this;
        setTimeout(function () {
            console.log(self.speed);
        }, 1000);

    };
}

let car = new Car();
car.speedUp(50); // 50;

Không giống như function bình thường nếu chúng ta sử dụng arrow method cho đoạn code trên thì ta không cần lo lắng về phạm vi (scope) hoặc showdows . Đoạn code mới được viết như sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        setTimeout(
            () => console.log(this.speed),
            1000);

    };
}

let car = new Car();
car.speedUp(50); // 50;

6. Demo Video

Play

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments