Function trong JavaScript: có thể bạn chưa biết

Function trong JavaScript: có thể bạn chưa biết

Trong hướng dẫn này, bạn sẽ thấy rằng các hàm trong JavaScript là các đối tượng hạng nhất, có nghĩa là bạn có thể lưu trữ các hàm trong các biến, chuyển chúng cho các hàm khác dưới dạng đối số và trả lại chúng từ các hàm khác dưới dạng giá trị.

Các bài viết liên quan:

Sử dụng Function nâng cao trong JavaScript

Lưu trữ các function trong các biến

Các hàm là object ưu tiên trong JavaScript. Nói cách khác, bạn có thể coi các hàm giống như các giá trị của các kiểu khác.

Phần sau khai báo hàm add () và gán tên function cho biến sum:

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

let sum = add;

Trong câu lệnh gán, chúng tôi không bao gồm dấu ngoặc đơn mở và đóng ở cuối mã định danh thêm. Chúng tôi cũng không thực thi hàm mà chỉ tham chiếu đến chính hàm.

Có nghĩa là chúng ta có hai cách để thực thi cùng một hàm. Chúng ta có thể gọi nó một cách bình thường như sau:

let result = add(10, 20);// gọi hàm add

Hoặc thực hiện nó như thế này:

let result = sum(10,20);// gọi hàm sum lúc này là hàm add

Chuyển một function sang một function khác

Bởi vì các hàm là các giá trị, bạn có thể chuyển một hàm dưới dạng đối số vào một hàm khác.

Phần sau khai báo hàm average () có ba đối số. Đối số thứ ba là một hàm:

function average(a, b, fn) {
    return fn(a, b) / 2;
}

Bây giờ, bạn có thể chuyển hàm sum cho hàm average () như sau:

let result = average(10, 20, sum);

Đặt nó tất cả cùng nhau:

function add(a, b) {
    return a + b;// trả về giá trị a+b
}

let sum = add; // gán hàm sum = hàm add

function average(a, b, fn) {
    return fn(a, b) / 2;// trả về giá trị của hàm fn
}

let result = average(10, 20, sum);// gọi hàm average với đối số sum

console.log(result);

Return các function từ các function

Vì các hàm là các giá trị, bạn có thể trả về một hàm từ một hàm khác.

Hàm CompareBy () sau đây trả về một hàm so sánh hai đối tượng bởi một thuộc tính được cung cấp:

function compareBy(propName) {
  // trả về giá trị hàm function
    return function (a, b) {
        let x = a[propName],
            y = b[propName];

        if (x > y) {
            return 1;
        } else if (x < y) {
            return -1
        } else {
            return 0;
        }
    }
}

Giả sử rằng bạn có một mảng các đối tượng sản phẩm trong đó mỗi đối tượng sản phẩm có hai thuộc tính: name và price.

let products = [
    {name: 'iPhone', price: 900},
    {name: 'Samsung Galaxy', price: 850},
    {name: 'Sony Xperia', price: 700}
];

Bạn có thể sắp xếp một mảng bằng cách gọi phương thức sort (). hàm sort () chấp nhận một hàm so sánh hai phần tử của mảng như một đối số.

Ví dụ: bạn có thể sắp xếp danh sách sản phẩm dựa trên tên bằng cách chuyển một hàm được trả về từ hàm so sánh () như sau:

console.log('Products sorted by name:');
products.sort(compareBy('name'));
console.table(products);

Tương tự, bạn có thể sắp xếp danh sách sản phẩm theo giá:

// sort products by price
console.log('Products sorted by price:');
products.sort(compareBy('price'));
console.table(products);

Một số ví dụ khác

Ví dụ sau khai báo hai hàm chuyển đổi cm sang inch và ngược lại:

function cmToIn(length) {
    return length / 2.54;
}

function IntoCm(length) {
    return length * 2.54;
}

Hàm convert () sau đây có hai tham số. Tham số đầu tiên là một hàm và tham số thứ hai là độ dài sẽ được chuyển đổi dựa trên đối số đầu tiên:

function convert(fn, length) {
    return fn(length);
}

Để chuyển đổi cm thành in, bạn có thể gọi hàm convert () và chuyển hàm cmToIn vào hàm convert () làm đối số đầu tiên:

let inches = convert(cmToIn, 15);
console.log(inches);

Tương tự, để chuyển đổi inch sang cm, bạn có thể chuyển hàm inToCm vào hàm convert (), như sau:

let cm = convert(IntoCm, 15);
console.log(cm);

Tóm lược

Các hàm là các công dân hạng nhất trong JavaSript.

Bạn có thể truyền các hàm cho các hàm khác dưới dạng đối số, trả về chúng từ các hàm khác dưới dạng giá trị và lưu trữ chúng trong các biến.

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply