Jeśli uczysz się JavaScriptu, prawdopodobnie spotkałeś się z terminem Funkcje wyższego rzędu. Mówiąc prościej, funkcje wyższego rzędu to funkcje, które operują na innych funkcjach. Mogą przyjmować funkcje jako argumenty lub zwracać je jako dane wyjściowe.

Akceptacja JavaScript funkcji wyższego rzędu czyni go idealnym do programowania funkcjonalnego. Programowanie funkcyjne to paradygmat programowania, w którym można przekazywać funkcje jako parametry do innych funkcji, a także zwracać je jako wartości. W programowaniu funkcjonalnym myślimy i kodujemy w kategoriach funkcji. JavaScript, Haskell, Clojure, Scala i Erlang to tylko niektóre z języków, które implementują programowanie funkcyjne.

JavaScript traktuje funkcje jako obywateli pierwszej klasy. Dzieje się tak, ponieważ funkcje są obiektami. Możemy dodawać właściwości do funkcji, tak jak robimy to z obiektami. Na przykład:

function greeting() {
  console.log('Hello World');
}

// We can add properties to functions like we do with objects
greeting.lang = 'English';

// Prints 'English'
console.log(greeting.lang);

Skoro już wiemy, czym są funkcje pierwszej klasy, przejdźmy do funkcji wyższego rzędu w JavaScript.

Oto kilka przykładów wbudowanych funkcji wyższego rzędu Poniżej wymieniono kilka z wielu wbudowanych funkcji wyższego rzędu:

• Tablica.prototyp.map()
• Tablica.prototyp.filtr()
• Tablica.prototyp.zmniejsz()
• Tablica.prototyp.forEach()
• EventTarget.addEventListener()

1- Array.prototype.map(): Ta funkcja wyższego rzędu tworzy nową tablicę, wywołując podaną funkcję dla każdego elementu w oryginalnej tablicy. Podana funkcja może w jakiś sposób przekształcić każdy element. Na przykład, jeśli masz tablicę liczb i chcesz podwoić każdą liczbę, możesz użyć maptego w następujący sposób:

const originalArray = [1, 2, 3];
const doubledArray = originalArray.map(num => num * 2);
// doubledArray is now [2, 4, 6]

const originalArray = [1, 2, 3, 4, 5, 6];
const evenArray = originalArray.filter(num => num % 2 === 0);
// evenArray is now [2, 4, 6]

const originalArray = [1, 2, 3, 4, 5];
const sum = originalArray.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// sum is now 15

const names = ['Alice', 'Bob', 'Charlie'];
names.forEach(name => console.log(name));
// this will log "Alice", "Bob", and "Charlie" to the console

const button = document.getElementById('myButton');
button.addEventListener('click', () => alert('Button clicked!'));
// this will show an alert when the button is clicked

Do tego momentu widzieliśmy wbudowane w język różne funkcje wyższego rzędu. Stwórzmy teraz własną funkcję wyższego rzędu. Dla uproszczenia stwórzmy funkcję wyższego rzędu, która przyjmuje jako argumenty tablicę liczb i funkcję wywołania zwrotnego i zwraca nową tablicę, w której każdy element jest wynikiem zastosowania funkcji wywołania zwrotnego do odpowiedniego elementu w oryginalnej tablicy .

function mapArray(arr, callback) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(callback(arr[i]));
  }
  return result;
}

Zobaczmy przykład, jak możemy użyć tej funkcji wyższego rzędu:

const numbers = [1, 2, 3, 4, 5];

function multiplyByTwo(num) {
  return num * 2;
}

const doubledNumbers = mapArray(numbers, multiplyByTwo);

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

I to wszystko! Właśnie stworzyliśmy naszą własną funkcję wyższego rzędu w JavaScript. Możliwości funkcji wyższego rzędu są nieograniczone, a opanowanie ich może uczynić nas lepszymi programistami.

Wniosek

Podsumowując, zbadaliśmy koncepcję funkcji wyższego rzędu i różne dostępne wbudowane funkcje wyższego rzędu. Dodatkowo nauczyliśmy się tworzyć własne funkcje wyższego rzędu. Funkcje te mają wyjątkową zdolność odbierania i zwracania innych funkcji jako argumentów i danych wyjściowych, co czyni je potężnym narzędziem w programowaniu. Jeśli uznasz ten artykuł za przydatny, rozważ klaskanie , obserwowanie mnie na Medium i nie wahaj się zostawić komentarza, jeśli masz jakiekolwiek pytania lub wątpliwości. Dziękuję za przeczytanie!