Πώς να γράψετε το δικό σας χάρτη, να φιλτράρετε και να μειώσετε τις λειτουργίες σε JavaScript

Μια ματιά σε λειτουργικό προγραμματισμό και λειτουργίες υψηλότερης τάξης στο Javascript.

Κάθε φορά που ακούω για λειτουργικό προγραμματισμό, το πρώτο πράγμα που έρχεται στο μυαλό μου είναι οι λειτουργίες υψηλότερης τάξης. Για όσους δεν γνωρίζουν τις λειτουργίες υψηλότερης τάξης, ακολουθεί η Wikipedia:

Η συνάρτηση υψηλότερης τάξης είναι μια συνάρτηση που κάνει τουλάχιστον ένα από τα ακόλουθα:

  • Λαμβάνει μία ή περισσότερες λειτουργίες ως επιχειρήματα,
  • Επιστρέφει μια συνάρτηση ως αποτέλεσμα.

Οι λειτουργίες υψηλότερης τάξης μπορούν να περιγραφούν καλύτερα με τις λειτουργίες χαρτών, φιλτραρίσματος και μείωσης. Το Javascript από προεπιλογή έχει τη δική του εφαρμογή αυτών των λειτουργιών. Σήμερα, θα γράφουμε τον δικό μας χάρτη, θα φιλτράρουμε και θα μειώσουμε τις λειτουργίες.

Σημείωση: Λάβετε υπόψη ότι αυτές οι υλοποιήσεις του χάρτη, οι μέθοδοι φιλτραρίσματος και μείωσης ενδέχεται να μην αντικατοπτρίζουν τις εγγενείς εφαρμογές των αντίστοιχων Javascript.

Χάρτης

Από MDN:

Η map()μέθοδος δημιουργεί έναν νέο πίνακα με τα αποτελέσματα της κλήσης μιας παρεχόμενης συνάρτησης σε κάθε στοιχείο του πίνακα κλήσεων.

Φαίνεται αρκετά απλό. Τώρα ας δούμε τη Javascript map()σε δράση!

let arr = [1, 2, 3, 4, 5];
// pass a function to mapconst squareArr = arr.map(num => num ** 2);
console.log(squareArr); // prints [1, 4, 9, 16, 25]

Τι συνέβη λοιπόν; Έχουμε γράψει μια συνάρτηση που επιστρέφει το τετράγωνο ενός αριθμού και μεταβιβάσαμε αυτήν τη συνάρτηση ως επιχείρημα στο δικό μας map(). Ας δούμε βήμα προς βήμα οδηγίες για τον τρόπο δημιουργίας της δικής μας λειτουργίας χάρτη.

  1. Δημιουργήστε έναν κενό πίνακα mapArr.
  2. Περάστε τα στοιχεία του πίνακα.
  3. Λειτουργία κλήσης mapFuncμε το τρέχον στοιχείο ως όρισμα.
  4. Ωθήστε το αποτέλεσμα της mapFuncσυνάρτησης στον mapArrπίνακα.
  5. Επιστρέψτε τον mapArrπίνακα αφού περάσετε από όλα τα στοιχεία.

Τώρα ας γράψουμε την εφαρμογή μας του map()

// map takes an array and function as argumentfunction map(arr, mapFunc) { const mapArr = []; // empty array // loop though array for(let i=0;i
    

Now if you call the new map() in the previous example code,

const squareArr2 = map(arr, num => num ** 2);
console.log(squareArr2); // prints [1, 4, 9, 16, 25]

Pretty cool huh? Let’s jump into filter() next.

Filter

From MDN:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Let’s see an example:

let arr = [1, 2, 3, 4, 5];
// pass a function to filterconst oddArr = arr.filter(num => num % 2 === 0);
console.log(oddArr); // prints [2, 4]

The filter function took a function which will return true if a number is even. The filter() “filters” the input array based on whether the element is true or false. Let’s go through step by step on how the filter() works.

  1. Create an empty array filterArr.
  2. Loop through the array elements.
  3. Called the filterFunc function with the current element as the argument.
  4. If the result is true, push the element to the filterArr array.
  5. Return filterArr array after going through all the elements.

Time to write our own filter()

// filter takes an array and function as argumentfunction filter(arr, filterFunc) { const filterArr = []; // empty array // loop though array for(let i=0;i
     

Let’s see if our new filter() works out with the previous example:

const oddArr2 = filter(arr, num => num % 2 === 0);
console.log(oddArr2); //prints [2, 4]

Neat! I have saved the best and hardest one for the last. Let’s go to reduce() next.

Reduce

From MDN:

The reduce() method executes a reducer function (that you provide) on each member of the array resulting in a single output value.

Makes sense? No? Here’s an example to wrap your head around:

let arr = [1, 2, 3, 4];const sumReducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4const sum = arr.reduce(sumReducer);console.log(sum);// prints 10
// 5 + 1 + 2 + 3 + 4const sum2 = arr.reduce(sumReducer);console.log(sum2);// prints 15

Starting to get a picture? Let’s make it clear. Before digging too deep into the reduce() method, you might need to get acquainted with the reducer function.

If you have used reduxin the past, you might have some idea about what a reducer function is. In the example above, the reducer function is written as the sum between the accumulator and current value. When you pass the reducer function to the reduce() method, it will loop through each number in the array and adds it to the accumulator ( 0 at the beginning), which itself becomes the new accumulator for the next iteration. This continues till the end of the array and returns the accumulator as a result.

If I had to output the value of the accumulator in each step for the above example, it would be like this:

  • Before the start of the iteration, accumulator = 0
  • 1st iteration, accumulator += 1; // accumulator = 1
  • 2nd iteration, accumulator += 2; // accumulator = 3
  • 3rd iteration, accumulator += 3; // accumulator = 6
  • 4th iteration, accumulator += 4; // accumulator = 10

Your reducer function’s returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array. It ultimately becomes the final, single resulting value.

If you are still stuck at some point, try writing some operations with the inbuilt reduce() method. Whenever you feel you are ready, go through the next steps on how to implement your custom reduce():

  1. Initialize accumulator variable with 0 or initalValue argument from the reduce().
  2. Loop through the array elements.
  3. Call the reducer function with the accumulator and current element as the arguments.
  4. Return accumulator after going through all the elements.

Alright, time to code.

// reducer takes an array, reducer() and initialValue as argumentfunction reduce(arr, reducer, initialValue) { let accumulator = initialValue === undefined ? 0 : initialValue // loop though array for(let i=0;i
      

Well, that was easier than expected. Let’s see if it’s working.

const sum = reduce(arr, sumReducer);
console.log(sum); // prints 10
const sum2 = reduce(arr, sumReducer, 5);
console.log(sum2);// prints 15

Works like a charm!

That’s it :)

Comment down below if you have any questions.