Informatique


Les fonctions fléchées

Aller à


Wablief?

Les fonctions fléchées permettent d'utiliser une syntaxe plus courte pour écrire les fonctions.

Toutefois elles se différencient des fonctions classiques en plusieurs points:

  • elles sont toujours anonymes
  • this représente le contexte parent et non celui de la fonction
  • le tableau arguments n'existe pas
  • elles ne sont pas utilisées pour créer des méthodes

Syntaxes générales

A la place d'utiliser le mot function on utilise l'opérateur =>.

1er syntaxe
Syntaxe
	([p1],[p2][,pn]) =>	{
		code à exécuter 
	}

Démo
<h2>Whaou! Une fonction arrow!</h2>
<script>
var calcarre= (val)=>{
	return val*val;
	}
console.log(calcarre(6));
</script>
2ème syntaxe

S'l n'y a qu'une expression comme code de la fonction alors les accolades sont facultatives et cette expression est la valeur de retour de la fonction.

Le mot return n'est plus obligatoire pour renvoyer une valeur uniquement si on utilise la syntaxe sans accolades!

Syntaxe
	([p1],[p2][,pn]) => une expression

Démo
<h2>Whaou! Une fonction arrow!</h2>
<script>
var calcarre= (val)=> val*val;
console.log(calcarre(6));
</script>

est équivalent à:

Démo
<h2>Whaou! Une fonction arrow!</h2>
<script>
var calcarre= (val)=>{
	return val*val;
	}
console.log(calcarre(6));
</script>

Le mot return est obligatoire pour renvoyer une valeur si on utilise la syntaxe avec les accolades!

3ème syntaxe

Les parenthèses sont facultatives s'il n'existe qu'un argument.

Démo
<h2>Whaou! Une fonction arrow!</h2>
<script>
var calcarre= val=> val*val;
console.log(calcarre(6));
</script>

Il est bien sûr autorisé d'utiliser les arguments avec une valeur par défaut et l'argument ..reste avec les fonctions arrow.


this et les fonctions arrow

Une fonction classique en callback du forEach, le scope parent n'est pas maintenu.

Soit le code suivant: il ne fonctionne pas car le this de la fonction anonyme fille représente cette même fonction, et ne représente pas l'objet "classe" de la fonction anonyme parente.

Normalement une fonction détermine un contexte de programmation.

Démo
<h2>Whaou! Une fonction arrow!</h2>
<script>
var classe={
	nom:"6TTI",
	eleves:["Brendan","Rasmus","John"],
	afficProfile:function(){
		this.eleves.forEach(function() {
			document.write(this.nom);
			});
	}
}
classe.afficProfile();
</script>
Code identique au précédent, le callback est une arrow, le scope parent est maintenu

La fonction arrow maintient le scope d'une fonction parente.

Soit le code suivant: ici, le scope de la fonction parente a été préservé, on fait une closure naturelle, grâce à la fonction arrow.

Démo
<h2>Whaou! Une fonction arrow!</h2>
<script>
"use strict";
var classe={
	nom:"6TTI",
	eleves:["Brendan","Rasmus","John"],
	afficProfile:function(){
		this.eleves.forEach((v)=> {
			document.write(this.nom);
			});
	}
}
classe.afficProfile();
</script>

Quiz