Weblabor

Folytatom a JavaScript bemutatását, a függvények és az objektumorientált programozás után most a funkcionális programozásra fókuszálva.

A funkcionális programozás egy programozási paradigma – meghatározza milyen elemekből épül fel a programunk. A funkcionális program minden számítást matematikai függvényekkel ír le, alapja a lambda-kalkulus:

Lambda-kalkulus – Wikipédia

A legnépszerűbb funkcionális programozási nyelvek a Lisp, Scheme, Clojure, Erlang, OCaml, Haskell és az F#. A JavaScript ugyan nem tartozik a tisztán funkcionális nyelvek közé, de alkalmas a paradigma használatára.

Koncepciók

Létezik pár koncepció, ami a funkcionális programozáshoz tartozik, ezek a következők:

Tiszta függvények

Azokat a függvényeket nevezzük tisztának, amelyek akárhányszor is hívjuk meg őket, ugyanarra a bemenetre mindig ugyanazt a kimenetet adják vissza, és amelyeknek nincsen mellékhatása, vagyis a hívó fél szemszögéből nem változik meg a függvénynek átadott érték vagy más állapot (memória vagy I/O). Ezek sok hasznos tulajdonsággal rendelkeznek:

• A függvényhívások eredménye gyorsítótárazható.
• Ha nincs adatbeli függőség két függvény között, akkor hívási sorrendjük felcserélhető, illetve párhuzamosan futtathatók.
• Ha az eredményt nem használjuk, akkor a hívás mindenféle következmény nélkül eltávolítható.
• Ha egy nyelv nem enged meg mellékhatásokat, akkor akármilyen kiértékelési stratégia alkalmazható.

Rekurzió

A rekurzív függvények saját magukat hívják, hogy megvalósítsanak egy műveletet, amíg egy elemi esethez nem érnek, ahol már nem szükséges további rekurzió. Funkcionális nyelvekben legtöbbször az iterációt is rekurzióval valósítják meg:

function each(array, callback, context) {
    function _each(array, index, callback, context) {
        if (index === array.length) {
            return; // elemi eset
        } else {
            if (index in array) {
                callback.call(context, array[index], index, array);
            }
            
            _each(array, index + 1, callback, context); // rekurzív hívás
        }
    }
    
    _each(array, 0, callback, context);
}

function map(array, callback, context) {
    function _map(array, index, callback, context, result) {
        if (index === array.length) {
            return result;
        } else {
            if (index in array) {
                result[index] = callback.call(context, array[index], index, array);
            }
            
            return _map(array, index + 1, callback, context, result);
        }
    }
    
    return _map(array, 0, callback, context, []);
}

Elsődleges és magasabb rendű függvények

– JavaScript függvények

Az elsődleges és magasabb rendű függvények lehetővé teszik a részleges alkalmazást (partial application). Ez azt jelenti, hogy a függvény egyes paramétereit előre megadjuk, létrehozva egy új függvényt.

Az ES5 óta a nyelv részét képezi a Function#bind(), ami a kontextus megadása mellett lehetővé teszi a részleges alkalmazást is:

function add(a, b) {
    return a + b;
}

var add10 = add.bind(null, 10);
add10(1); // 11

add.bind(null, 'Hello ')('World!'); // 'Hello World!'

A részleges alkalmazáshoz hasonló a currying. Ha létrehozunk egy „curry-vel fűszerezett” változatot a függvényből, akkor annak minden egyes meghívásával részlegesen alkalmazzuk az átadott paramétereket. Ha az átadott paraméterek száma eléri a függvény argumentumainak számát, akkor pedig visszaadja az eredeti függvény visszatérési értékét a korábban megadott paraméterekkel.

function curry(f, arity) {
    arity = arity || f.length;
    
    return function _curry() {
        var args = Array.prototype.slice.call(arguments);
        
        if args.length >= arity {
            return f.apply(null, args);
        } else {
            return function curried() {
                var _args = Array.prototype.slice.call(arguments);
                return _curry.apply(null, args.concat(_args));
            };
        }
    };
}

var curriedAdd = curry(add);

curriedAdd(3)(4);               // 7
curriedAdd('Hello ', 'World!'); // 'Hello World!'

Mind a részleges alkalmazás, mind a currying megvalósítható jobbról is, azaz az átadott paraméterek a paraméterlista vége helyett az elejére kerülnek.

function partialRight(f) {
    var args = Array.prototype.slice.call(arguments, 1);
    
    return function _partialRight() {
        var _args = Array.prototype.slice.call(arguments)
        return f.apply(null, _args.concat(args));
    }
}

function curryRight(f, arity) {
    arity = arity || f.length;
    
    return function _curry() {
        var args = Array.prototype.slice.call(arguments);
        
        if (args.length >= arity) {
            return f.apply(null, args);
        } else {
            return function curried() {
                var _args = Array.prototype.slice.call(arguments)
                return _curry.apply(null, _args.concat(args))
            };
        }
    };
}

partialRight(add, 'World!')('Hello '); // 'Hello World!'
curryRight(add)('World!')('Hello ');   // 'Hello World!'

Tömbök

A ECMAScript 5-ös változata rengeteg segítséget ad a funkcionális programozáshoz. Feljebb már bemutattam, hogy létezik beépített eszköz a részleges alkalmazásra, de a nyelv tömbök esetén is sok segítséget ad a paradigma gyakorlásához (Array#extras). Ezek végigiterálnak a tömbön, minden egyes elemre meghívva az átadott függvényt.

Array#forEach()

Az Array#forEach() hívásakor nem igazán tudunk tiszta függvényt átadni, de attól még az azt használó függvényünk maradhat tiszta, ha csak az átadott függvény végez I/O-t. Az átadott függvény három paramétert kap: az aktuális elem, az elem sorszáma és maga a tömb. Például, hogyha ki akarjuk íratni az tömbünk elemeit:

[1, 2, 3, 4].forEach(console.log.bind(console, 'Element:'));

// > Element: 1
// > Element: 2
// > Element: 3
// > Element: 4

Array#map()

Az Array#map() segítségével egy új tömböt hozhatunk létre a már meglévő elemeit használva. Három paramétert ad át a függvénynek, hasonlóan az Array#forEach()-hez, és a visszaadott érték lesz az új tömb vonatkozó eleme.

[1, 2, 3, 4].map(function elementTimesIndex(element, index) {
    return element * index;
}); // [0, 2, 6, 12]

[1, 2, 3, 4].map(add); // [1, 3, 5, 7]

Array#filter()

Az Array#filter() segítségével egy olyan tömböt hozhatunk létre, melyben csak azokat az elemeket tartjuk meg, amelyek eleget tesznek a feltételnek. Három paramétert ad át a függvénynek, hasonlóan az Array#forEach()-hez. Például, ha csak a páratlan elemeket szeretnénk megtartani:

function isOdd(n) {
    return n % 2 === 1;
}

[1, 2, 3, 4].filter(isOdd); // [1, 3]

Hogyan tudnánk erre építve létrehozni egy olyan függvényt, ami a párosakat adja vissza?

function negate(predicate) {
    return function() {
        !predicate.apply(this, arguments);
    };
}

var isEven = negate(isOdd);

[1, 2, 3, 4].filter(isEven); // [2, 4]

Array#reduce() és Array#reduceRight()

Az Array#reduce() segítségével a tömbünket egyetlen értékre redukálhatjuk. Paraméterként egy függvényt és opcionális kezdőértéket vár. Négy paramétert ad át a függvénynek: az előző érték, az aktuális elem, az elem sorszáma és a tömb. A függvénynek az új értéket kell visszaadnia. Ha nem adunk meg kezdőértéket, akkor a kezdőérték az első elem lesz, és az iteráció a második elemmel indul. Segítségével könnyen összeadhatjuk a tömbünk elemeit:

[1, 2, 3, 4].reduce(add);                 // 10
[' ', 'World', '!'].reduce(add, 'Hello'); // 'Hello World!'

Az Array#reduceRight() megegyezik a Array#reduce()-szal, csak a tömb elemeit jobbról balra dolgozza fel. Ha nem adunk meg kezdőértéket, akkor a kezdőérték az utolsó elem lesz, és az iteráció a utolsó előtti elemmel indul.

['!', 'World', ' ', 'Hello'].reduceRight(add); // 'Hello World!'

Array#some() és Array#every()

Az Array#some() és az Array#every() az Array#reduce() egy speciális formája. Az Array#some() true értéket ad vissza, ha a tömb legalább egy eleme teljesíti a feltételt. Az Array#every() pedig akkor ad vissza true értéket, ha a tömb minden eleme teljesíti a feltételt. Az Array#some() nem iterál tovább, amennyiben talált egy elemet, ami megfelel a feltételnek. Az Array#every() pedig akkor, amikor egy elem nem felel meg a feltételnek.

[1, 2, 3, 4].some(isOdd);  // true
[1, 3].some(isEven);       // false
[1, 2, 3, 4].every(isOdd); // false
[1, 3].every(isOdd);       // true

Array#reduce() segítségével a következőképp írhatjuk fel őket:

function some(array, predicate, context) {
    return array.reduce(function (previous) {
        var args = Array.prototype.slice.call(arguments, 1);
        
        if (previous === true) {
            return true;
        } else {
            return !!predicate.apply(context, args);
        }
    }, false);
}

some([1, 2, 3, 4], isOdd); // true
some([1, 3], isEven);      // false

function every(array, predicate, context) {
    return array.reduce(function (previous) {
        var args = Array.prototype.slice.call(arguments, 1);
        
        if (previous === false) {
            return false;
        } else {
            return !!predicate.apply(context, args);
        }
    }, true);
}

every([1, 2, 3, 4], isOdd); // false
every([1, 3], isOdd);       // true

Felhasználás

Funkcionális programozáshoz alapvető, hogy rendelkezzünk egy általánosan használható függvénykönyvtárral, amikből újabb függvényeket készíthetünk. Bemutatok néhány hasznos ilyen függvényt, ezzel bővítve a rendelkezésre álló eszközöket.

Azonosság

Kezdjük pár hasznos, de egyszerű függvénnyel. A legalapabb ezek közül az identity(), amely visszaadja az első kapott paramétert:

function identity(value) {
    return value;
}

[0, 1, 2, null, undefined].filter(identity); // [1, 2]

Konstans

Másik hasznos függvény lehet a constant(), amely mindig az előre megadott értéket adja vissza:

function constant(value) {
    return function () {
        return value;
    };
}

[1, 2, 3, 4].map(constant(42)); // [42, 42, 42, 42]

Tulajdonság

Hozzunk létre egy függvényt, ami a megadott objektumnak visszaadja egy, tömbbel megadott elérési úton található elemét:

function property(object, path) {
    return path.reduce(function (previous, current) {
        if (previous !== undefined && previous !== null) {
            return previous[current];
        } else {
           return undefined;
        }
    }, object);
}

property([1, 2, 3, 4], [1]); // 2

var object = {a: {b: {c: 'd'}}};
property(object, ['a', 'b', 'c']); // "d"

Ezt később felhasználhatjuk arra, hogy generáljunk egy függvényt, ami mindig az adott elérési utat keresi.

function propertyAt() {
    var path = Array.prototype.slice.call(arguments);
    
    return function (object) {
        return property(object, path);
    };
}

var head = propertyAt(0);
head([1, 2, 3, 4]); // 1

var length = propertyAt('length');
length([1, 2, 3, 4]); // 4

Ezután, ha meg akarjuk kapni a kapott tömbök első elemét, vagy elemeinek hosszát, könnyű a dolgunk:

[[1, 2, 3, 4], [5, 6, 7], [8, 9]].map(head);             // [1, 5, 8]
['foo', 'bar', 'foobar', 'baz'].map(length);             // [3, 3, 6, 3]
['foo', 'bar', 'foobar', 'baz'].map(length).reduce(add); // 15

Ha adott objektum különböző tulajdonságait akarjuk kikeresni, generálhatunk egy másik függvényt:

function propertyOf(object) {
    return function () {
        var args = Array.prototype.slice.call(arguments);
        return property(object, args);
    };
}

var object = {a: 1, b: 2, c: 3, d: {e : 4}}
var getter = propertyOf(object);

getter('a')      // 1
getter('d', 'e') // 4

Ezek után már csak egy lépés egy általános tulajdonságkiemelő pluck() függvény felírása:

function pluck(array) {
    var path = Array.prototype.slice.call(arguments, 1);
    
    return array.map(function (object) {
        return property(object, path);
    });
}

var objects = [{name: 'Foo'}, {name: 'Bar'}, {name: 'Bazbar'}]
pluck(objects, 'name'); // ['Foo', 'Bar', 'Bazbar']

Ha meg akarjuk tudni, hogy mindegyik név hosszabb-e, mint két karakter, vagy van-e olyan, ami három karakter hosszú, egyszerű a dolgunk:

function greaterThan(a) {
    return function(b) {
        return a < b;
    }
}

function equals(a) {
    return function(b) {
        return a === b;
    }
}

var nameLengths = pluck(objects, 'name').map(length); // [3, 3, 6]

var equals3 = equals(3);

nameLengths.every(greaterThan(2)); // true
nameLengths.every(equals3);        // false
nameLengths.some(equals3);         // true

Kompozíció

Előfordulhat, hogy egy értékkel egymás után több műveletet szeretnénk végezni, mindig felhasználva az előző művelet eredményét. Erre való a flow():

function flow() {
    var functions = Array.prototype.slice.call(arguments);
    
    return function (target) {
        return functions.reduce(function(previous, current) {
            return current(previous);
        }, target);
    };
}

function multiply(a, b) {
    return a * b;
}

// f(x) = (x + 3) * 2
[0, 1, 2, 3].map(
    flow(add.bind(null, 3), multiply.bind(null, 2))
); // [6, 8, 10, 12]

Ha fordított sorrendben akarjuk megadni a függvényeket, akkor szokás a compose() elnevezéssel élni. Ez megfelel a függvények felírási sorrendjének egy egyenletben.

function compose() {
    var args = Array.prototype.slice.call(arguments);
    return flow.apply(null, args.reverse());
}

function divide(b, a) {
    return a / b;
}

function round(precision) {
    if (precision) {
        var multiplier = Math.pow(10, precision);
        
        return compose(
            divide.bind(null, multiplier),
            Math.round,
            multiply.bind(null, multiplier)
        );
    } else {
        return Math.round;
    }
}

var roundToOneDecimal = round(1);

[.12, .345, 67.89].map(roundToOneDecimal); // [0.1, 0.3, 67.9]

// f(x) = roundToOneDecimal(|cos(pi / 3 * x)|)
[0, 1, 2, 3].map(
    compose(
        roundToOneDecimal, 
        Math.abs,
        Math.cos, 
        multiply.bind(null, Math.PI / 3)
  )
); // [1, 0.5, 0.5, 1]

Letölthető függvénytárak

A két legnépszerűbb funkcionális függvénytár az Underscore.js és a lodash – utóbbi eredetileg az előbbi újraírt változata volt. Mindkettő rengeteg hasznos eszközt nyújt a funkcionális programozáshoz, utóbbi legtöbb esetben gyorsabb, és több lehetőséggel rendelkezik. Jellemzőjük, hogy általánosságban első paraméterként várják az objektumot, amin a műveletet végzik, hasonlóan a fent definiált each() és map() függvényekhez.

Jelentősen különbözik tőlük a Ramda, melynek alapvető tulajdonsága, hogy mindent a currying-re épít. Így például a map() nem első, hanem utolsó paramétere a tömb. Ezzel lehetővé válik, hogy előre deklaráljuk az átalakítás menetét, majd többször alkalmazzuk különböző tömbökre.

Az Underscore.js-hez hasonló a Highland.js, azzal a hatalmas különbséggel, hogy a műveleteket egy adatfolyamon végzi. Azaz ahogy érkezik be folyamatosan az adat, úgy születik az adatfolyam másik végén az átalakított eredmény.

A Reactive Extensions for JavaScript egy Microsoft által indított projekt, mely sok tekintetben hasonlít a Highland.js-hez, ugyanakkor sokkal több nála. Adatfolyam helyett események folyamára alapoz, és az API az Array#extras-ra épít paraméterezésében is.

Összefoglalás

Mint látható, igen minimális függvényekből komoly rendszert hozhatunk össze. Segítségükkel megkönnyíthetjük az adatfeldolgozást, validálást. A függvényeink egyszerűen tesztelhetők, működésük könnyen ellenőrizhető. Kombinálásukkal igen hasznos újabb függvényeket hozhatunk létre tovább egyszerűsítve az elvégzendő feladaton.