Khi nào sử dụng hàm lồng nhau trong JavaScript?

Trước JavaScript 1. 2, định nghĩa hàm chỉ được phép trong mã toàn cầu cấp cao nhất, nhưng JavaScript 1. 2 cũng cho phép các định nghĩa hàm được lồng trong các hàm khác. Tuy nhiên, có một hạn chế là định nghĩa hàm có thể không xuất hiện trong các vòng lặp hoặc điều kiện. Những hạn chế về định nghĩa hàm này chỉ áp dụng cho các khai báo hàm với câu lệnh hàm

Như chúng ta sẽ thảo luận sau trong chương tiếp theo, các ký tự hàm (một tính năng khác được giới thiệu trong JavaScript 1. 2) có thể xuất hiện trong bất kỳ biểu thức JavaScript nào, có nghĩa là chúng có thể xuất hiện trong if và các câu lệnh khác

Ví dụ

Hãy thử ví dụ sau để tìm hiểu cách triển khai các hàm lồng nhau

   
      
   
   
   
      
Click the following button to call the function
      
      
         
      
      
      
Use different parameters inside the function and then try...
   

đầu ra

Thường thì nhiều người nhầm lẫn về hàm lồng nhau trong JavaScript, tại sao hàm lồng nhau lại hữu ích và trường hợp sử dụng hàm lồng nhau là gì?

Trong bài viết này, tôi muốn nói về những điều cơ bản về lý do tại sao các hàm lồng nhau lại hữu ích theo nhiều cách

Tôi sẽ bắt đầu hỏi một số câu hỏi cơ bản cùng với một số ràng buộc để có thể giúp suy nghĩ khác đi để giải quyết vấn đề. Giả sử rằng chúng ta có mảng nhân viên như bên dưới

const employee = [
  { id: 1, name: "Raja", age: 28, status: "active" },
  { id: 2, name: "Andy", age: 32, status: "Inactive" },
  { id: 3, name: "Kumar", age: 45, status: "active" },
  { id: 4, name: "Charles", age: 35, status: "Inactive" },
];

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trường hợp sử dụng 1 #

Làm cách nào để bạn sắp xếp một mảng theo thuộc tính (tuổi, trạng thái, v.v.)?

Hạn chế. Không chuyển một mảng làm tham chiếu đến bất kỳ chức năng nào khác và chức năng sẽ được tái sử dụng nhiều hơn

Thông thường, với kiến ​​thức lập trình trước đây của chúng tôi, chúng tôi sắp xếp bằng cách sử dụng Array. nguyên mẫu. sắp xếp chức năng như dưới đây

function sortBy(array, propName) {
  return array.sort(function (a, b) {
    if (a[propName] > b[propName]) {
      return 1;
    } else if (a[propName] < b[propName]) {
      return -1;
    } else {
      return 0;
    }
  });
}

console.log(sortBy(employee, "age"));
console.log(sortBy(employee, "status"));

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên thực hiện công việc một cách độc đáo nhưng chỉ cần xem xét ràng buộc đầu tiên của chúng tôi cho trường hợp sử dụng đầu tiên. vì vậy rõ ràng đó không phải là cách để làm. Lưu ý rằng, chúng ta đang chuyển tham chiếu mảng tới hàm. (

Nói chung, đây là cách chúng tôi sắp xếp trong JavaScript

// How do to pass another arguments to tell sort based on which property of an object ???????
Array.prototype.sort(function(a, b)) 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Như chúng ta đã biết Mảng. nguyên mẫu. giao diện sắp xếp chỉ chấp nhận 2 đối số, Vậy làm cách nào để chuyển propName làm đối số khác?

Được rồi, làm thế nào để chúng ta giải quyết vấn đề?

Gợi ý. chúng ta có thể làm cho đối số tùy chỉnh của mình có thể truy cập được bên trong chức năng gọi lại sắp xếp mà không cần thêm đối số bổ sung vào Array không. nguyên mẫu. loại?

Đây là thời điểm hoàn hảo để sử dụng hàm bên trong một hàm (thường được gọi là hàm bậc cao hơn) để chúng ta có thể trả về một hàm chỉ chấp nhận 2 đối số theo yêu cầu của giao diện sắp xếp, hàm bậc cao có thể chấp nhận n đối số để chúng ta có thể

Đây là phiên bản thứ hai của hàm sortBy

function sortBy(propName) {
  return function (a, b) { // obeying sort interface function signature
    if (a[propName] > b[propName]) { // propName accessible from highorder function
      return 1;
    } else if (a[propName] < b[propName]) {
      return -1;
    } else {
      return 0;
    }
  };
}

console.log(employee.sort(sortBy("age")));
console.log(employee.sort(sortBy("status")));

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tôi muốn thảo luận thêm một trường hợp sử dụng cho các chức năng bậc cao với trường hợp sử dụng bộ lọc

Trường hợp sử dụng 2

Làm cách nào để bạn lọc một mảng có nhân viên không hoạt động?

Hạn chế. Giả sử rằng chúng ta có chức năng lọc ra tất cả nhân viên đang hoạt động (isActiveEmployee) đã tồn tại, Sử dụng chức năng tương tự để lấy tất cả nhân viên không hoạt động mà không cần sao chép mã

function isActiveEmployee(employee) {
    return employee.status == 'active';
}

const activeEmployee = employee.filter(isActiveEmployee);
// const inactiveEmployee = employee.filter(??????);

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Được rồi, chúng tôi có thể đưa ra giải pháp dưới đây một cách dễ dàng mà không cần suy nghĩ gì cả

function isInactiveEmployee(employee) {
     return employee.status !== 'active';
}

//(or)

 function isInactiveEmployee(employee) {
     return employee.status === 'inactive';
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chỉ cần nhắc nhở nhẹ nhàng về ràng buộc của trường hợp sử dụng 2, nó cho biết, chúng ta không nên sao chép mã, vậy chúng ta có thể làm theo cách tốt hơn không?

Vì vậy, hãy nghĩ rằng chúng tôi đã có mã tìm tất cả nhân viên đang hoạt động, vì vậy, chỉ cần đảo ngược kết quả của hàm isActiveEmployee, chúng tôi sẽ nhận được tất cả nhân viên không hoạt động ngay cả khi không viết một hàm hoàn toàn mới để lọc ra nhân viên không hoạt động

Tại sao nên sử dụng các hàm lồng nhau trong JavaScript?

Tại sao lại sử dụng hàm lồng nhau?

Trong trường hợp nào bạn sẽ sử dụng các hàm lồng nhau?

Việc sử dụng các hàm lồng nhau có tốt không?