A pipe () és a compose () gyors bemutatása a JavaScript-ben

A funkcionális programozás meglehetősen szemet nyitó út volt számomra. Ez a bejegyzés és a hozzá hasonló hozzászólások megkísérlik megosztani meglátásaimat és perspektíváimat, amikor új funkcionális programozási területeken járok.

A Ramda az én FP könyvtáram volt, mert mennyivel könnyebbé teszi a funkcionális programozást a JavaScript-ben. Nagyon ajánlom.

Pipa

A fogalom pipeegyszerű - egyesíti a nfunkciókat. Ez egy cső, amely balról jobbra áramlik, és mindegyik funkciót az utolsó kimenetével hívja meg.

Írjunk egy függvényt, amely visszaadja valakinek name.

getName = (person) => person.name; getName({ name: 'Buckethead' }); // 'Buckethead' 

Írjunk egy függvényt, amely nagybetűkkel írja be a karakterláncokat.

uppercase = (string) => string.toUpperCase(); uppercase('Buckethead'); // 'BUCKETHEAD' 

Tehát ha meg akarnánk szerezni és nagybetűvel írni a personnevét, akkor ezt megtehetnénk:

name = getName({ name: 'Buckethead' }); uppercase(name); // 'BUCKETHEAD' 

Ez rendben van, de szüntessük meg azt a köztes változót name.

uppercase(getName({ name: 'Buckethead' })); 

Jobb, de nem szeretem ezt a fészkelést. Túl zsúfolt lehet. Mi van, ha olyan függvényt akarunk hozzáadni, amely megkapja a karakterlánc első 6 karakterét?

get6Characters = (string) => string.substring(0, 6); get6Characters('Buckethead'); // 'Bucket' 

Eredmény:

get6Characters(uppercase(getName({ name: 'Buckethead' }))); // 'BUCKET'; 

Megőrülünk, és adjunk hozzá egy függvényt a húrok megfordításához.

reverse = (string) => string .split('') .reverse() .join(''); reverse('Buckethead'); // 'daehtekcuB' 

Most van:

reverse(get6Characters(uppercase(getName({ name: 'Buckethead' })))); // 'TEKCUB' 

Kicsit ... sokat kaphat.

Cső a mentéshez!

Ahelyett, hogy függvényeket zavarna a függvényeken belül, vagy létrehozna egy csomó köztes változót, nézzünk meg pipemindent!

pipe( getName, uppercase, get6Characters, reverse )({ name: 'Buckethead' }); // 'TEKCUB' 

Tiszta művészet. Olyan, mint egy Todo lista!

Lépjünk át rajta.

Bemutató célokra pipeEric Elliott egyik funkcionális programozási cikkéből származó megvalósítást fogom használni .

pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x); 

Szeretem ezt a kis egybélést.

A pihenési paraméterek használatával , lásd a cikkemet erről, pipázhatunk nfunkciókat. Minden funkció felveszi az előző kimenetét, és mindez csökken ? egyetlen értékre.

És ugyanúgy használhatja, mint fentebb.

pipe( getName, uppercase, get6Characters, reverse )({ name: 'Buckethead' }); // 'TEKCUB' 

Bővítem pipeés hozzáadok néhány hibakereső állítást, és soronként haladunk.

pipe = (...functions) => (value) => { debugger; return functions.reduce((currentValue, currentFunction) => { debugger; return currentFunction(currentValue); }, value); }; 

Hívjon példánkkal pipe, és hagyja, hogy a csodák kibontakozzanak.

Nézze meg a helyi változókat. functionsa 4 függvény tömbje, és valueaz { name: 'Buckethead' }.

Mivel pihenési paramétereket használtunk , pipetetszőleges számú funkciót használhat. Csak hurokba fogja hívni mindegyiket.

A következő hibakeresőn bent vagyunk reduce. Itt currentValueadják át currentFunctionés adják vissza.

Látjuk, hogy az eredmény 'Buckethead'azért van, mert bármely objektum tulajdonságát currentFunctionadja vissza .name. Ez vissza fog térni reduce, vagyis currentValuelegközelebb új lesz . Nézzük meg a következő hibakeresőt és nézzük meg.

Most azért currentValuevan, ‘Buckethead’mert ezt utoljára visszaadták. currentFunctionvan uppercase, így 'BUCKETHEAD'lesz a következő currentValue.

Ugyanez az ötlet, pengesse meg az ‘BUCKETHEAD’első 6 karaktert, és adja át őket a következő funkciónak.

reverse(‘.aedi emaS’)

És kész!

Mi a helyzet az írással ()?

Csak pipea másik irányba.

Tehát, ha ugyanazt az eredményt szeretné, mint a pipefenti, akkor az ellenkezőjét tenné.

compose( reverse, get6Characters, uppercase, getName )({ name: 'Buckethead' }); 

Figyelje meg, hogy getNamea lánc utolsó és reverseelső?

Here’s a quick implementation of compose, again courtesy of the Magical Eric Elliott, from the same article.

compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x); 

I’ll leave expanding this function with debuggers as an exercise to you. Play around with it, use it, appreciate it. And most importantly, have fun!