Informatique


Fonctions d'ordre supérieur

Aller à

Qu'est-ce qu'une fonction d'ordre supérieur (High Order function)

En JavaScript une fonction est une valeur (de type Object) qui peut, comme n'importe quelle autre valeur:

  • être affectée à une variable
  • être passée en argument à une autre fonction
  • être renvoyée avec return comme résultat d'une fonction

Une fonction d'ordre supérieur est une fonction qui prend en argument une autre fonction ou/et qui retourne une fonction.


Les fonctions d'ordre supérieur sont la base de la programmation fonctionnelle.


forEach()

La méthode forEach permet d'appliquer une fonction sur chaque élément d'un tableau, la fonction a appliquer est passée en argument à la fonction forEach.

Démo
	var liste = ["Pierre",143,true,12.5]; 
	liste.forEach(function(x) {
		document.write(x);
	});
		

L'argument x de la fonction anonyme passée à la fonction forEach reçoit chaque élément du tableau liste.


find()

Syntaxe
	Array montab.find(callback)	//function callback(element[,indice[,tableau]]){}

La méthode find retourne le premier élément qui répond à la condition définie dans la fonction passée en paramètre.

En sortie on aura donc une valeur, quel que soit son type.

Avec tous les paramètres
Démo
<h2>La méthode find()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var retour=mtab.find(grandesValeurs,0,mtab);
function grandesValeurs(element){
		return element > 10;
}
console.log(retour);
console.log(typeof retour);
</script>
Première syntaxe
Démo
<h2>La méthode find()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var retour=mtab.find(grandesValeurs);
function grandesValeurs(element){
		return element > 10;
}
console.log(retour);
console.log(typeof retour);
</script>
Deuxième syntaxe
Démo
<h2>La méthode find()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var retour=mtab.find(grandesValeurs);
function grandesValeurs(function(element){
	return element > 10;
	});
console.log(retour);
console.log(typeof retour);
</script>
Troisième syntaxe
Démo
<h2>La méthode find()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var retour=mtab.find(element => element > 10);
console.log(retour);
console.log(typeof retour);
</script>

filter()

Syntaxe
	Array montab.filter(callback)	//function callback(element[,indice[,tableau]]){}

La méthode filter retourne un nouveau tableau contenant les éléments du tableaux initial qui répondent à la condition définie dans la fonction passée en paramètre.

Si la condition renvoie true l'élément du tableau montab est renvoyé, si la condition renvoie false l'élément du tableau montab n'est pas renvoyé.

3 paramètres pour la fonction de callback:

  1. element, variable recevant chaque élément du tableau
  2. indice, l'indice de départ (0 par défaut)
  3. tableau, le tableau à filtrer

En sortie on aura donc un tableau de longueur plus petite ou égale au tableau d'entrée!

Avec tous les paramètres
Démo
<h2>La méthode filter()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var mtabFiltre=mtab.filter(grandesValeurs,0,mtab);
function grandesValeurs(element){
		return element > 10;
}
console.log(mtabFiltre);
</script>
Première syntaxe
Démo
<h2>La méthode filter()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var mtabFiltre=mtab.filter(grandesValeurs);
function grandesValeurs(element){
		return element > 10;
}
console.log(mtabFiltre);
</script>
Deuxième syntaxe
Démo
<h2>La méthode filter()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var mtabFiltre=mtab.filter(function(element){
	return element > 10;
	});
console.log(mtabFiltre);
</script>
Troisième syntaxe
Démo
<h2>La méthode filter()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var mtabFiltre=mtab.filter(element => element > 10);
console.log(mtabFiltre);
</script>

map()

Syntaxe
	Array montab.map(callback)	//function callback(element)

La méthode map retourne un nouveau tableau contenant les éléments du tableaux initial auxquels la fonction passée en paramètre a été appliquée.

1 paramètre, element, variable recevant chaque élément du tableau.

En sortie on aura donc un tableau de longueur égale au tableau d'entrée!

Première syntaxe
Démo
<h2>La méthode map()</h2>
<script>
var mtab=['pierre','paul','jacques','mathieu','luc'];
var mtabNew=mtab.map(enMaj);
function enMaj(element){
		return element.toUpperCase();
}
console.log(mtabNew);
</script>
Deuxième syntaxe
Démo
<h2>La méthode map()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var mtabFiltre=mtab.filter(function(element){
	return element > 10;
	});
console.log(mtabFiltre);
</script>
Troisième syntaxe
Démo
<h2>La méthode map()</h2>
<script>
var mtab=['pierre','paul','jacques','mathieu','luc'];
var mtabNew=mtab.map(element => element.toUpperCase());
console.log(mtabNew);
</script>

reduce()

Syntaxe
	Array montab.reduce(callback[,valeurInitiale])	//function callback(accu,element,[indice[,tableau]])

La méthode reduce retourne un et un seul élément.

3 paramètres pour la fonction de callback:

  1. "accumulateur", il prend la valeur précédemment retournée par le dernier appel du callback, ou la valeur initiale, ou la valeur « accumulée » au fur et à mesure des appels
  2. element, variable recevant chaque élément du tableau
  3. indice, l'indice de départ (0 par défaut)
  4. tableau, le tableau à filtrer

En sortie on aura donc une valeur, celle contenue dans la variable accu, quel que soit son type.

Première syntaxe
Démo
<h2>La méthode reduce()</h2>
<script>
var mtab=[10,20,30,40,50,60];
var somme=mtab.reduce(addTab);
function addTab(accu,element){
	return accu + element;
};
console.log(somme);
</script>
Deuxième syntaxe
Démo
<h2>La méthode reduce()</h2>
<script>
var mtab=[10,20,30,40,50,60];
var somme=mtab.reduce(function(accu,element){
	return accu + element;
});
console.log(somme);
</script>
Troisième syntaxe
Démo
<h2>La méthode reduce()</h2>
<script>
var mtab=[10,20,30,40,50,60];
var somme=mtab.reduce((accu,element)=> {return accu+element;});
// ou: var somme=mtab.reduce((accu,element)=> accu+element);
console.log(somme);
</script>
Détail du fonctionnement de reduce()
Démo
<h2>La méthode reduce()</h2>
<script>
var mtab=[10,20,30,40,50,60];
var somme=mtab.reduce(function(accu,element,indice,mtab){
	console.log("Indice="+indice+
			"accu="+accu+
			"/element="+element+
			"tableau="+mtab);
	return accu + element;
});
console.log(somme);
console.log(typeof somme);
</script>

  1. accu est initialisée avec la valeur contenue à l'indice 0
  2. accu est augmenté de la valeur contenue dans la cellule suivante jusqu'à la fin du tableau mtab
  3. à la fin du tableau reduce() renvoie la valeur contenue dans accu.
  4. somme est donc un type number

La variable accu n'est pas nécessairement un accumulateur, il est donc préférable de lui donner un nom en relation avec ce que l'on veut obtenir comme information à partir du tableau.


Démo
<h2>Recherchons s'il existe au moins une valeur paire dans un tableau d'entiers.</h2>
<script>
var mtab=[11,29,31,45,5,111];
var test=mtab.reduce((flag,element)=> {return element % 2 == 0;});
console.log(test);
</script>

Dans ce cas je veux "réduire" mon tableau à une valeur booléenne, j'ai donc pris flag comme nom de variable et non acc.


Quiz

Clique-moi pour générer un questionnaire !