Programmation fonctionnelle en JavaScript

Programmation
fonctionnelle en
JavaScript
Loïc Knuchel

The Obvious
“La programmation fonctionnelle est une manière de programmer
principalement basée sur des fonctions”

The Headache
“La programmation fonctionnelle est un style de développement qui promeut
les fonctions indépendantes de l’état du programme.”

The One
“La programmation fonctionnelle permet de coder de manière plus modulaire
et plus productive, avec moins de code et moins de bugs”

Transformer un tableau
var names = ['Finn', 'Rey', 'Poe', 'Kaylo'];
function upperCaseArray(arr){
var ret = [];
for(var i=0; i<arr.length; i++){
ret[i] = arr[i].toUpperCase();
}
return ret;
}
console.log(upperCaseArray(names));
// ['FINN', 'REY', 'POE', 'KAYLO']

Transformer un tableau
var names = ['Finn', 'Rey', 'Poe', 'Kaylo'];
var ret = [];
for(var i=0; i<arr.length; i++){
ret[i] = arr[i].toUpperCase();
}
return ret;
}
console.log(upperCaseArray(names));
// ['FINN', 'REY', 'POE', 'KAYLO']
return arr.map(function(item){
return item.toUpperCase();
});
}

Créer son .map()
Array.prototype.map = function(callback){
var array = this;
var result = [];
for(var i=0; i<array.length; i++){
result[i] = callback(array[i]);
}
return result;
};

Traiter des données complexes
var claims = [{
wan: '123',
actions: [
{name: 'sendPicture', pictures: [
{path: '123/1.jpg', deleted: true, sync: false},
{path: '123/2.jpg', deleted: false, sync: true},
]},
{name: 'changeStep', step: 'COM'},
{path: '123/4.jpg', deleted: false, sync: true}
]},
{path: '123/6.jpg', deleted: false, sync: false}
]}
]
}, {
wan: '456',
actions: [
]},
{path: '123/4.jpg', deleted: true, sync: false}
]}
]
}];

Traiter des données complexes
var claims = [{
wan: '123',
actions: [
]},
]},
]}
]
}, {
wan: '456',
actions: [
]},
]}
]
}];
function doSomething(claims){
var pictures = [];
for(var i=0; i<claims.length; i++){
var claim = claims[i];
for(var j=0; j<claim.actions.length; j++){
var action = claim.actions[j];
if(action.name === 'sendPicture'){
for(var k=0; k<action.pictures.length; k++){
var picture = action.pictures[k];
if(!picture.deleted && !picture.sync){
pictures.push(picture);
}
}
}
}
}
return pictures;
}

Traiter des données complexes (lodash)
function getPicturesToSync(claims){
var actions = _.flatten(_.map(claims, function(claim){ return claim.actions; }));
var pictures = _.flatten(_.map(_.filter(actions, function(action){ return action.name === 'sendPicture'; }), function
(action){ return action.pictures; }));
return _.filter(pictures, function(picture){ return picture.deleted === false && picture.sync === false;});
}

}
_.map(array, callback) crée un tableau avec les valeurs retournées par le callback en paramètre.

}
_.flatten(array) crée un tableau simple à partir d’un tableau de tableaux.

}
_.filter(array, callback) crée un tableau en gardant que les éléments pour lesquels le callback renvoi true.

Améliorer les tableaux JavaScript
Array.prototype.find = function(callback){ return _.find(this, callback); }
Array.prototype.filter = function(callback){ return _.filter(this, callback); }
Array.prototype.map = function(callback){ return _.map(this, callback); }
Array.prototype.flatten = function() { return _.flatten(this); }

Traiter des données complexes (js array)
return claims
.map(function(claim){ return claim.actions; })
.flatten()
.filter(function(action){ return action.name === 'sendPicture'; })
.map(function(action){ return action.pictures; })
.flatten()
.filter(function(picture){ return picture.deleted === false && picture.sync === false;});
}

Traiter des données complexes (es6 fat arrow)
return claims
.map(claim => claim.actions)
.flatten()
.filter(action => action.name === 'sendPicture')
.map(action => action.pictures)
.flatten()
.filter(picture => picture.deleted === false && picture.sync === false);
}

Traiter des données complexes (pluck)
return claims
.map('actions')
.flatten()
.filter({name: 'sendPicture'})
.map('pictures')
.flatten()
.filter({deleted: false, sync: false});
}

Traiter des données complexes (flatMap)
var data = [
{id: '1', values: [1, 2, 3]},
{id: '2', values: [4, 5]},
];
data.map('values'); // [[1, 2, 3], [4, 5]]
data.map('values').flatten(); // [1, 2, 3, 4, 5]

Array.prototype.flatMap = function(callback){ return _.flatten(_.map(this, callback)); }
var data = [
{id: '1', values: [1, 2, 3]},
{id: '2', values: [4, 5]},
];
data.map('values'); // [[1, 2, 3], [4, 5]]
data.map('values').flatten(); // [1, 2, 3, 4, 5]
data.flatMap('values'); // [1, 2, 3, 4, 5]

return claims
.flatMap('actions')
.flatMap('pictures')
}

return claims
.flatMap('actions')
}
Bilan
var pictures = [];
}
}
}
}
}
return pictures;
}

return claims
.flatMap('actions')
}
● moins de code
● moins de bugs
● plus de productivité
Bilan
var pictures = [];
}
}
}
}
}
return pictures;
}

Programmation fonctionnelle en JavaScript

Autre exemple
var claims = [{
wan: '123',
actions: [
]},
]},
]}
]
}, {
wan: '456',
actions: [
]},
]}
]
}];
function doSomething(claims, wan){
return claims
.find({wan: wan}).actions
.filter({deleted: false});
}

Bilan
function getPictures(claims, wan){
if(claim.wan === wan){
var pictures = [];
for(var j=0; j<=claim.actions.length; j++){
var action = claim.actions[i];
if(picture.deleted){
}
}
}
}
return pictures;
}
}
}
return claims
}

Bilan (correct)
if(claim.wan === wan){
var pictures = [];
if(!picture.deleted){
}
}
}
}
return pictures;
}
}
}
return claims
}

Bilan
La programmation fonctionnelle permet de
déclarer des intentions.
return claims
}
return claims
.flatMap('actions')
}

Bilan
Au final, on ne sait pas vraiment ce qui est fait
et quand.
return claims
}
return claims
.flatMap('actions')
}

Bilan
et quand.
Ce qui permet de changer le fonctionnement
du programme sans changer le code.
return claims
}
return claims
.flatMap('actions')
}

Bilan
et quand.
Ce qui permet de changer le fonctionnement
du programme sans changer le code.
Ex:
● synchrone => asynchrone
● impératif => lazy (cf Lazy.js)
return claims
}
return claims
.flatMap('actions')
}

Quelques autres fonctions de lodash
● groupBy _.groupBy(claims[0].actions, function(action){
return action.name;
});
/* Result :
{
'sendPicture': [
{name: 'sendPicture', pictures: [...]},
{name: 'sendPicture', pictures: [...]},
{name: 'sendPicture', pictures: [...]}
],
'changeStep': [
{name: 'changeStep', step: 'COM'}
]
}
*/

● groupBy
● partition
_.partition([1, 2, 3], function(n){
return n % 2;
});
// Result : [[1, 3], [2]]

● groupBy
● partition
● sortBy
_.sortBy([2, 3, 1], function(n){
return n;
});
// Result : [1, 2, 3]

● groupBy
● partition
● sortBy
● take / drop
_.take([1, 2, 3, 4, 5], 3); // Result : [1, 2, 3]
_.drop([1, 2, 3, 4, 5], 1); // Result : [2, 3, 4, 5]

● groupBy
● partition
● sortBy
● take / drop
● uniq
_.uniq(['foo', 'bar', 'foo', 'foo']);
// Result : ['foo', 'bar']
_.uniq([{wan: '1'}, {wan: '2'}, {wan: '1'}], 'wan');
// Result : [{wan: '1'}, {wan: '2'}]

● groupBy
● partition
● sortBy
● take / drop
● uniq
● reduce
_.reduce(claims, function(count, claim){
return count + claim.actions.length;
}, 0);
// Result: 6

● groupBy
● partition
● sortBy
● take / drop
● uniq
● reduce
● sum / min / max
_.sum(['Finn', 'Rey', 'Poe', 'Kaylo'], function(name){
return name.length;
});
// Result : 15

● groupBy
● partition
● sortBy
● take / drop
● uniq
● reduce
● sum / min / max
● ...

No side effect
Effets de bord: lancer une exception/erreur, faire un appel (bdd, http, fichier…), récupérer la date
actuelle, modifier un paramètre, accéder à une variable “globale”, mettre un log

Bénéfices
● Moins de code (~÷3 par rapport à Java)
● Plus compréhensible
● Plus facile à réutiliser / composer
● Plus facile à tester
● Moins de bugs

Exemple: Afficher ces données dans un graph
var data = [
{
name: "Jamestown",
population: 2047,
temperatures: [-34, 67, 101, 87]
},
{
name: "Awesome Town",
population: 3568,
temperatures: [-3, 4, 9, 12]
},
{
name: "Funky Town",
population: 1000000,
temperatures: [75, 75, 75, 75, 75]
}
];
// Result :
[
[55.25, 2047], // [average temperature, population]
[5.5, 3568],
[75, 1000000]
]

Code impératif
function formatChart(data){
var coords = [],
totalTemp = 0,
averageTemp = 0;
for(var i=0; i < data.length; i++){
totalTemp = 0;
for(var j=0; j < data[i].temperatures.length; j++){
totalTemp += data[i].temperatures[j];
}
averageTemp = totalTemp / data[i].temperatures.length;
coords.push([averageTemp, data[i].population]);
}
return coords;
}

Code impératif
var coords = [],
totalTemp = 0,
averageTemp = 0;
totalTemp = 0;
}
}
return coords;
}
● Pas réutilisable
● Difficile à comprendre
● bugs probables

Functionnal way : sommer les températures
var totalTemp = totalForArray(0, temperatures);
// recursive to avoid loop
function totalForArray(currentTotal, arr){
if(arr.length === 0){
return currentTotal;
} else {
return totalForArray(currentTotal + arr[0], arr.slice(1));
}
}

Functionnal way : sommer les températures
var totalTemp = totalForArray(0, temperatures);
// recursive to avoid loop
if(arr.length === 0){
return currentTotal;
} else {
return totalForArray(currentTotal + arr[0], arr.slice(1));
}
}
Vs
return arr.reduce((total, item) => total + item, currentTotal);
}

Functionnal way : calculer la température moyenne
function average(total, count){
return total / count;
}

}
function averageForArray(arr){
return average(totalForArray(0, arr), arr.length);
}

}
function averageForArray(arr){
return average(totalForArray(0, arr), arr.length);
}
var averageTemp = averageForArray(temperatures);

Functionnal way : récupérer les températures
var allTemperatures = data.map(function(item){
return item.temperatures;
});
var data = [
{
name: "Jamestown",
population: 2047,
temperatures: [-34, 67, 101, 87]
},
{
population: 3568,
},
{
name: "Funky Town",
temperatures: [75, 75, 75, 75, 75]
}
];

});
// simplify & shorten map syntax
function getItem(propertyName){
return function(item){
return item[propertyName];
}
}
var allTemperatures = data.map(getItem('temperature'));
var data = [
{
name: "Jamestown",
population: 2047,
temperatures: [-34, 67, 101, 87]
},
{
population: 3568,
},
{
name: "Funky Town",
temperatures: [75, 75, 75, 75, 75]
}
];

Curryfication
function add1(b){
return 1+b;
}
console.log(add1(2)); // 3
function addCurry(a){
return function(b){
return a+b;
}
}
var add1 = addCurry(1);
var add2 = addCurry(2);

});
// simplify & shorten map syntax
function getItem(propertyName){
return function(item){
return item[propertyName];
}
}
var allTemperatures = data.map(getItem('temperature'));
// more concise again !
function pluck(arr, propertyName){
return arr.map(getItem(propertyName));
}
var allTemperatures = pluck(data, 'temperatures');
var data = [
{
name: "Jamestown",
population: 2047,
temperatures: [-34, 67, 101, 87]
},
{
population: 3568,
},
{
name: "Funky Town",
temperatures: [75, 75, 75, 75, 75]
}
];

Functionnal way : combiner nos données
var populations = pluck(data, 'population'); // [2047, 3568, 1000000]
var averageTemps = pluck(data, 'temperatures').map(averageForArray); // [55.25, 5.5, 75]

Functionnal way : combiner nos données
var populations = pluck(data, 'population'); // [2047, 3568, 1000000]
var averageTemps = pluck(data, 'temperatures').map(averageForArray); // [55.25, 5.5, 75]
function combineArrays(arr1, arr2, resultArr){
resultArr = resultArr || [];
if(arr1.length === 0 || arr2.length === 0){
return resultArr;
} else {
return combineArrays(arr1.slice(1), arr2.slice(1), resultArr.push([arr1[0], arr2[0]]));
}
}
var chartData = combineArrays(averageTemps, populations);

Functionnal way
return combineArrays(pluck(data, 'temperatures').map(averageForArray), pluck(data, 'population'));
}

Functionnal way
return combineArrays(pluck(data, 'temperatures').map(averageForArray), pluck(data, 'population'));
}
Vs
var coords = [],
totalTemp = 0,
averageTemp = 0;
totalTemp = 0;
}
}
return coords;
}

Functionnal way
return _.zip(_.pluck(data, 'temperatures').map(t => _.sum(t) / t.length), _.pluck(data, 'population'));
}

Quel est le problème ?
function getName(user){
return user.name;
}

return user.name;
}
getName(); // ERROR: Cannot read property 'name' of undefined

return user.name;
}
getName(); // ERROR: Cannot read property 'name' of undefined
getName(localStorage.getItem('user')); // ERROR ???

Option type
Option[A]
NoneSome[A]

Option (scala)
def getName(user: User): String {
return user.name
}
def getName(userOpt: Option[User]): String {
return userOpt.map(user => user.name).getOrElse("")
}

WTF !
Option.map() ??? List.map()

Monads
On en a déjà vu 2 :
● List[A] / Array[A]
● Option[A]

Monads
● Wrapper (context) M[A]
● Fonction map def map[A, B](f: A => B): M[A] => M[B]
● Fonction flatMap def flatMap[A, B](f: A => M[B]): M[A] => M[B]

Monads
● List
● Option
● Future
● Try
● Either
● ...

Conclusion
● passer toutes les données nécessaires en paramètre
● ne pas les modifier
● ne pas utiliser null, les exceptions, les boucles
● utiliser le moins possible les if
● faire des fonctions très simples et les composer
● utiliser des fonctions d’ordre supérieur

Programmation fonctionnelle en JavaScript

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Programmation fonctionnelle en JavaScript (20)

More from Loïc Knuchel (13)

Recently uploaded (20)

Programmation fonctionnelle en JavaScript