7 funkcionális programozási technika JavaScript-fejlesztőknek

A „funkcionális programozás” egy felkapott téma a modern webfejlesztésben. Ez arról szól, hogy az alkalmazás architektúráját egyszerű funkciók kombinációjaként kell megtervezni, hogy több bővíthető kódot írhasson. Lehetővé teszi bármely funkció egyszerű felcserélését anélkül, hogy a program egy másik részét megszakítaná, és megkönnyíti a program megértését és hibakeresését.

Ebben a cikkben hét funkcionális programozási technikát fogok tárgyalni, amelyeket a JavaScript-szel használhat, hogy jobban megértse, hogyan alkalmazza a funkcionális programozást webfejlesztési projektjei során.

1. Tiszta funkciók

A tiszta függvények ugyanazt az eredményt adják vissza, ha ugyanazokat a paramétereket küldjük. Csupán a működésük eredményét adják vissza, és nem tekintenek semmire, ami kívül esik a hatókörön. A visszatérési érték visszaadásán kívül a tiszta függvények semmit nem befolyásolnak.

const helloWorld = (name) => `Hi ${name}`;
helloWorld(‘Piumi’);

A mellékhatás egy olyan koncepció a funkcionális programozásban, amely akkor fordul elő, ha egy függvény nem csak értéket ad vissza, hanem a háttérben lévő összetevőket is megváltoztatja. Amikor egy függvény végrehajtódik, lehetősége van arra, hogy módosítson valamit. A legjobb a mellékhatásokat a lehető legnagyobb mértékben minimalizálni. Ez az a hely, ahol a tiszta funkciók nagyszerű lehetőséget jelentenek, mivel minimális mellékhatásaik vannak.

Mindig arra kell törekednünk, hogy az egyes változók hatóköre a lehető legkisebb legyen azáltal, hogy létrehozásakor a változókat a lehető legnagyobb mértékben lokalizáljuk. A tiszta függvények a paramétereiken kívül semmitől nem függnek, így viselkedésük előre látható. Ha a paraméterek megegyeznek, az eredmény ugyanaz lesz. Ez nagymértékben javítja a kód tesztelhetőségét.

2. Kerülje az eljárási hurkokat

A tisztán funkcionális programozás megkülönböztető jellemzője a megváltoztathatatlanság. Ki kell dobnia az olyan szabványos hurkolási módszereket, mint a for, while, és a do-while, hogy elkerülje a változók inicializálása utáni mutációját (pl. hurokszámlálók). Ehelyett a JavaScript olyan magasabb rendű funkciókat kínál, mint a térkép, szűrés, kicsinyítés és foreach az iteratív folyamatok elvonatkoztatására.

Nézzünk meg néhány példát a foreach, map, filter és reduce funkciókra.

foreach(): A tömb minden eleméhez egy függvény kerül meghívásra.

let sum = 0;
const numbers = [10, 25, 73, 84];
numbers.forEach(addNumbers);

function addNumbers(number) {
  sum += number;
}

map(): Minden tömbelem hozzá van rendelve egy függvényhez, és a függvényhívások visszatérési értékei segítenek új tömb létrehozásában. A leképező függvény bemenetként egy tömbelemet vesz, és a kimenetet adja vissza.

array.map(mapper)

filter(): feltétel alapján szűri a tömböt. A feltétel ebben az esetben egy olyan függvény, amely a tömb minden elemét megkapja, és eldönti, hogy megtartja-e vagy sem, visszaadva az igaz logikai értéket.

array.filter(condition);

reduce(): Egy tömböt egyetlen értékre redukáló függvény. A következő kódrészletben a redukáló paraméter egy olyan függvény, amely az új értéket adja vissza a felhalmozott értékből és a tömb következő eleméből. Így hívják a tömb minden egyes értékére, egyenként.

array.reduce(reducer);

A következő példa bemutatja, hogyan használhatjuk a fenti függvényeket.

const computers= [  
 { make: 'ASUS', model: 'CT-0019', type: 'PC', price: 25000}, 
 { make: 'DELL', model: 'DX-001', type: 'PC', price: 16800},  
 { make: 'ASUS', model: 'CT-0011', type: 'LAPTOP', price: 79800},  
 { make: 'ASUS', model: 'CT-0209', type: 'LAPTOP', price: 65400},  
 { make: 'DELL', model: 'DX-005', type: 'PC', price: 34500},  
 { make: 'DELL', model: 'DX-001', type: 'LAPTOP', price: 35000},  
 { make: 'HP', model: 'HP-003', type: 'PC', price: 36500},  
 { make: 'HP', model: 'HP-025', type: 'PC', price: 50000},  
 { make: 'DELL', model: 'DX-004', type: 'LAPTOP', price: 87000},  
 { make: 'HP', model: 'HP-324', type: 'PC', price: 46000}
];

const averageComputerPrice = computers
  .filter(c => c.type === 'LAPTOP')  
  .map(c => c.price)  
  .reduce((sum, price, i, array) => sum + price / array.length, 0); 
console.log(averageComputerPrice);

A ciklusok megszabadulása deklaratívabbá és könnyebben érthetőbbé teszi a kódot, mivel nincs szükség a hurokszámlálók és a tömbhossz nyomon követésére. Mivel a hurok törzsét egy függvény tartalmazza, minden ciklusérték megfelelően van kötve a visszahívás paraméteréhez, megelőzve a váratlan JavaScript hatóköri hibákat.

3. Funkcióláncolás

A JavaScriptben a függvényláncolás egy olyan minta, amely lehetővé teszi több függvény meghívását ugyanazon az objektumon egymás után. Ezzel a technikával több függvényt is meghívhatunk ugyanazzal az objektumhivatkozással. Olvashatóbbá teszi a kódot, és csökkenti a redundáns kód mennyiségét.

Azokban a forgatókönyvekben, amikor több függvényre van szükségünk az entitáshoz társított összes funkció teljesítéséhez, ezek a függvények úgy írhatók fel, hogy a kívánt eredmények elérése érdekében összeláncolhatók legyenek.

Ugyanezt a funkcionalitást érhetjük el a JavaScriptben, ha visszaadjuk az aktuális objektumot a végrehajtó függvényből. Amikor egy függvényt meghívunk egy objektumon, ugyanaz az objektum kerül visszaadásra, lehetővé téve más függvények meghívását és a feladat követését.

var obj = {
 output: 0,
 addNumber: function(p, q) {
   this.output= p + q; 
   return this;
 },
multiplyNumber: function(p) {
   this.output= this.output * p;
   return this;
 } 
};

obj.addNumber(10, 20).multiplyNumber(10)
console.log(obj.output)

A fenti kódmintában, mivel az addNumber függvény az aktuális obj objektumot tükrözi, a visszaadott érték további függvényeket tartalmaz. A második függvényt, a multiplyNumber-t ugyanazon az objektumon futtatjuk, hogy összeláncoljuk őket.

Ez a függvényláncolási módszer nagyon deklaratív kódot eredményez, megnyitva az utat az absztrakció előtt, amely arra összpontosít, hogy a programnak mit kell tennie, nem pedig arra, hogyan csinálja.

4. Curry

A currying egy többargumentumú függvény lebontása unáris (egyargumentumos) magasabb rendű függvények sorozatára. Más szavakkal, egy három paraméterű függvény, f(p,q,r), szerkezetileg három olyan függvénnyel van bővítve, amelyek egyszerre egy argumentummal működnek: f(p) -› f(q ) -› f(r).

Tekintsük a következő példát.

function fsum (a,b) {
  return a+ b
}
//Currying
function fsum_curry (a) {
  return function(b) {
    return a + b
  }
}
fsum(10, 2)       // 12
fsum_curry(10)(2) // 12

A curry előnye a memoizálás. Mostantól megjegyezhetünk bizonyos argumentumokat egy függvényhívásban, hogy később újra felhasználhassuk őket anélkül, hogy duplikálnunk és újraszámítanunk kellene.

5. Részleges alkalmazás

Gyakran összekeverjük a részleges alkalmazást és a curryt, pedig két különböző fogalomról van szó. Például egy curried függvény mindig curried függvény, még akkor is, ha nem adunk hozzá argumentumot. A részleges alkalmazás akkor következik be, amikor egy függvény néhány argumentumát megadjuk, de nem mindegyiket. A curry népszerű módszer a részleges kijuttatásra, de nem ez az egyetlen lehetőség.

Részleges alkalmazás esetén a függvény egyes paramétereinek példányosítása késik. Ez jól jöhet, ha néhány eljárást paramétereznünk kell a későbbi felhasználáshoz.

function havingMeal(verb) {
  // Outer function
  return function(input) {
    // Inner function
    return "I'm " + verb + " " + input + " ."
  }
}
// Partially apply 'havingMeal'
var haveLunch = havingMeal('eating')
var haveTea = havingMeal('drinking')
haveLunch('lunch')
//"I'm eating lunch."
haveTea('coffee')
//"I'm drinking coffee."

A hivatkozási átlátszóság elvét követve a következőképpen is felírható.

haveLunch(‘lunch’) === prepareLunch(‘eating’)(‘lunch’)

6. Összetétel

A kompozíció több kisebb funkció végrehajtásának egyetlen módszere. Ez az a folyamat, amikor az egyik funkció kimenetét egy másik bemenetéhez kapcsoljuk, ami egy teljesen új funkció létrehozását eredményezi.

A kapcsolatokat a kompozíció teszi nyilvánvalóvá. Miután megértette a fogalmat, és elkezdi alkalmazni, észre fogja venni, hogy ez segít jobban strukturált és érthető funkciók megírásában. Ezenkívül elérheti az aggodalmak szétválasztását, így a kód tisztább lesz.

const split = (string) => string.split('_').join(' ');

const lowerCase = (string) => string.toLowerCase();

console.log(lowerCase(split('APPLE_TREE'))); //apple tree

7. Rekurzió

A rekurzió egy önhívó mechanizmus, ami azt jelenti, hogy a rekurzív függvény olyan függvény, amely önmagát hívja meg. A szoftverfejlesztésben a rekurzió segít olyan problémák megoldásában, mint a fák bejárása vagy a matematikai folyamatok, például a Fibonacci sorozat. A rekurzió a funkcionális programozás de facto iterációs technikájává vált, mivel különösen hatékony bármilyen lineáris adatstruktúra, például tömbök bejárására.

function factorial(n, product = 1) {  
  if (n === 0) {    
    return product;  
 }  
    return factorial(n - 1, product * n)
}

A rekurzió használatának fő előnye, hogy lehetővé teszi a megváltoztathatatlan hurkot, mivel nincs explicit ciklusszámláló a frissítéshez. Ennek eredményeként a tömb elemeinek bejárásának feladata teljes mértékben a nyelvi futási környezetre van delegálva.

Következtetés

A funkcionális programozás napról napra népszerűbb a JavaScript-fejlesztők körében, mivel leegyszerűsíti az összetett alkalmazások megvalósítását, így azok olvashatóbbá, tesztelhetőbbé és érthetőbbé válnak.

Ezért arra kérem Önt, hogy használja a fentebb tárgyalt hét JavaScript funkcionális programozási technikát, hogy javítsa kódolási készségeit és építsen robusztus, bővíthető alkalmazásokat.

Köszönöm hogy elolvastad!

A Syncfusion Essential JS 2 az egyetlen programcsomag, amelyre valaha is szüksége lesz egy alkalmazás elkészítéséhez. Több mint 65 nagy teljesítményű, könnyű, moduláris és érzékeny felhasználói felület-komponenst tartalmaz egyetlen csomagban. Töltsön le egy "ingyenes próbaverziót" a vezérlők értékeléséhez még ma.

Ha bármilyen kérdése vagy megjegyzése van, kapcsolatba léphet velünk támogatási fórumainkon, támogatási portálunkon vagy visszajelzési portálunkon keresztül is. Mindig örömmel segítünk Önnek!

Kapcsolódó blogok

Eredetileg a https://www.syncfusion.com oldalon tették közzé 2022. augusztus 29-én.