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
- 11 konzolmódszer a JavaScriptben a hatékony hibakereséshez
- "Egyidejű kérések kezelése JavaScript-visszahívásokkal"
- "Könnyen hozzon létre kitölthető űrlapot JavaScript szövegszerkesztővel"
- „A 7 legjobb JavaScript objektum-megsemmisítési technika”
Eredetileg a https://www.syncfusion.com oldalon tették közzé 2022. augusztus 29-én.