ES6 - Fonctions

Functionssont les éléments constitutifs d'un code lisible, maintenable et réutilisable. Les fonctions sont définies à l'aide du mot-clé function. Voici la syntaxe pour définir une fonction standard.

function function_name() { 
   // function body 
}

Pour forcer l'exécution de la fonction, elle doit être appelée. Cela s'appelle une invocation de fonction. Voici la syntaxe pour appeler une fonction.

function_name()

Exemple: définition de fonction simple

//define a  function 
function test() { 
   console.log("function called") 
} 
//call the function 
test()

L'exemple définit une fonction test (). Une paire de délimiteurs ({}) définit le corps de la fonction. Il est également appelé comme lefunction scope. Une fonction doit être appelée pour forcer son exécution.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

function called

Classification des fonctions

Les fonctions peuvent être classées comme Returning et Parameterized les fonctions.

Fonctions de retour

Les fonctions peuvent également renvoyer la valeur avec le contrôle, à l'appelant. Ces fonctions sont appelées fonctions de retour.

Voici la syntaxe de la fonction de retour.

function function_name() { 
   //statements 
   return value; 
}

Une fonction de retour doit se terminer par une instruction return.
Une fonction peut renvoyer au plus une valeur. En d'autres termes, il ne peut y avoir qu'une seule instruction de retour par fonction.
L'instruction return doit être la dernière instruction de la fonction.

L'extrait de code suivant est un exemple de fonction de retour -

function retStr() { 
   return "hello world!!!" 
}  
var val = retStr() 
console.log(val)

L'exemple ci-dessus définit une fonction qui renvoie la chaîne "hello world !!!" à l'appelant. La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

hello world!!!

Fonctions paramétrées

Les paramètres sont un mécanisme permettant de transmettre des valeurs aux fonctions. Les paramètres font partie de la signature de la fonction. Les valeurs des paramètres sont transmises à la fonction lors de son appel. Sauf indication contraire explicite, le nombre de valeurs passées à une fonction doit correspondre au nombre de paramètres définis.

Voici la syntaxe définissant une fonction paramétrée.

function func_name( param1,param2 ,…..paramN) {   
   ...... 
   ...... 
}

Example − Parameterized Function

L'exemple définit une fonction add qui accepte deux paramètres n1 et n2et imprime leur somme. Les valeurs des paramètres sont transmises à la fonction lorsqu'elle est appelée.

function add( n1,n2) { 
   var sum = n1 + n2 
   console.log("The sum of the values entered "+sum) 
} 
add(12,13)

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

The sum of the values entered 25

Paramètres de fonction par défaut

Dans ES6, une fonction permet d'initialiser les paramètres avec des valeurs par défaut, si aucune valeur ne lui est transmise ou si elle n'est pas définie. La même chose est illustrée dans le code suivant.

function add(a, b = 1) { 
   return a+b; 
} 
console.log(add(4))

La fonction ci-dessus définit la valeur de b sur 1 par défaut. La fonction considérera toujours que le paramètre b porte la valeur 1 à moins qu'une valeur n'ait été explicitement transmise. La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

La valeur par défaut du paramètre sera écrasée si la fonction transmet une valeur explicitement.

function add(a, b = 1) { 
   return a + b; 
} 
console.log(add(4,2))

Le code ci-dessus définit la valeur du paramètre b explicitement sur 2, écrasant ainsi sa valeur par défaut. La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Pour une meilleure compréhension, considérons l'exemple ci-dessous.

Exemple 1

L'exemple suivant montre une fonction qui prend deux paramètres et renvoie leur somme. Le deuxième paramètre a une valeur par défaut de 10. Cela signifie que si aucune valeur n'est passée au deuxième paramètre, sa valeur sera 10.

<script>
   function addTwoNumbers(first,second = 10){
      console.log('first parameter is :',first)
      console.log('second parameter is :',second)
      return first+second;
   }

   console.log("case 1 sum:",addTwoNumbers(20)) // no value
   console.log("case 2 sum:",addTwoNumbers(2,3))
   console.log("case 3 sum:",addTwoNumbers())
   console.log("case 4 sum",addTwoNumbers(1,null))//null passed
   console.log("case 5 sum",addTwoNumbers(3,undefined))
</script>

La sortie du code ci-dessus sera comme mentionné ci-dessous -

first parameter is : 20
second parameter is : 10
case 1 sum: 30
first parameter is : 2
second parameter is : 3
case 2 sum: 5
first parameter is : undefined
second parameter is : 10
case 3 sum: NaN
first parameter is : 1
second parameter is : null
case 4 sum 1
first parameter is : 3
second parameter is : 10
case 5 sum 13

Exemple 2

<script>
   let DEFAULT_VAL = 30
      function addTwoNumbers(first,second = DEFAULT_VAL){
         console.log('first parameter is :',first)
         console.log('second parameter is :',second)
         return first+second;
      }
      console.log("case 1 sum",addTwoNumbers(1))
      console.log("case 2 sum",addTwoNumbers(3,undefined))
</script>

La sortie du code ci-dessus sera comme indiqué ci-dessous -

first parameter is : 1
second parameter is : 30
case 1 sum 31
first parameter is : 3
second parameter is : 30
case 2 sum 33

Paramètres de repos

Les paramètres de repos sont similaires aux arguments variables en Java. Les paramètres de repos ne limitent pas le nombre de valeurs que vous pouvez transmettre à une fonction. Cependant, les valeurs transmises doivent toutes être du même type. En d'autres termes, les paramètres de repos agissent comme des espaces réservés pour plusieurs arguments du même type.

Pour déclarer un paramètre de repos, le nom du paramètre est précédé de trois points, appelés opérateur de répartition. L'exemple suivant illustre la même chose.

function fun1(...params) { 
   console.log(params.length); 
}  
fun1();  
fun1(5); 
fun1(5, 6, 7);

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

0 
1 
3

Note - Les paramètres de repos doivent être les derniers de la liste des paramètres d'une fonction.

Fonction anonyme

Les fonctions qui ne sont pas liées à un identificateur (nom de fonction) sont appelées comme des fonctions anonymes. Ces fonctions sont déclarées dynamiquement lors de l'exécution. Les fonctions anonymes peuvent accepter des entrées et des sorties de retour, tout comme le font les fonctions standard. Une fonction anonyme n'est généralement pas accessible après sa création initiale.

Les variables peuvent se voir attribuer une fonction anonyme. Une telle expression s'appelle unfunction expression.

Voici la syntaxe de la fonction anonyme.

var res = function( [arguments] ) { ... }

Example − Anonymous Function

var f = function(){ return "hello"} 
console.log(f())

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

hello

Example − Anonymous Parameterized Function

var func = function(x,y){ return x*y }; 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result) 
} 
product()

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

The product : 200

Le constructeur de fonctions

L'instruction de fonction n'est pas le seul moyen de définir une nouvelle fonction; vous pouvez définir votre fonction dynamiquement en utilisant le constructeur Function () avec l'opérateur new.

Voici la syntaxe pour créer une fonction à l'aide du constructeur Function () avec l'opérateur new.

var variablename = new Function(Arg1, Arg2..., "Function Body");

Le constructeur Function () attend n'importe quel nombre d'arguments de chaîne. Le dernier argument est le corps de la fonction - il peut contenir des instructions JavaScript arbitraires, séparées les unes des autres par des points-virgules.

Le constructeur Function () ne reçoit aucun argument spécifiant un nom pour la fonction qu'il crée.

Example − Function Constructor

var func = new Function("x", "y", "return x*y;"); 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result)
} 
product()

Dans l'exemple ci-dessus, le constructeur Function () est utilisé pour définir une fonction anonyme. La fonction accepte deux paramètres et renvoie leur produit.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

The product : 200

Fonctions de récursivité et JavaScript

La récursivité est une technique pour itérer sur une opération en demandant à une fonction de s'appeler elle-même à plusieurs reprises jusqu'à ce qu'elle arrive à un résultat. La récursivité est mieux appliquée lorsque vous devez appeler la même fonction à plusieurs reprises avec différents paramètres à partir d'une boucle.

Example − Recursion

function factorial(num) { 
   if(num <= 0) { 
      return 1; 
   } else { 
      return (num * factorial(num-1)  ) 
   } 
} 
console.log(factorial(6))

Dans l'exemple ci-dessus, la fonction s'appelle elle-même. La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Example − Anonymous Recursive Function

(function() { 
   var msg = "Hello World" 
   console.log(msg)
})()

La fonction s'appelle elle-même en utilisant une paire de parenthèses (). La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Hello World

Fonctions Lambda

Lambda fait référence aux fonctions anonymes dans la programmation. Les fonctions Lambda sont un mécanisme concis pour représenter des fonctions anonymes. Ces fonctions sont également appeléesArrow functions.

Fonction Lambda - Anatomie

Il y a 3 parties dans une fonction Lambda -

Parameters - Une fonction peut éventuellement avoir des paramètres.
le fat arrow notation/lambda notation (=>): Il est également appelé comme l'opérateur va à.
Statements - Représente le jeu d'instructions de la fonction.

Tip - Par convention, l'utilisation d'un paramètre à une seule lettre est encouragée pour une déclaration de fonction compacte et précise.

Expression Lambda

Il s'agit d'une expression de fonction anonyme qui pointe vers une seule ligne de code. Voici la syntaxe pour le même.

([param1, parma2,…param n] )=>statement;

Example − Lambda Expression

var foo = (x)=>10+x 
console.log(foo(10))

L'exemple déclare une fonction d'expression lambda. La fonction renvoie la somme de 10 et l'argument passé.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Déclaration Lambda

Il s'agit d'une déclaration de fonction anonyme qui pointe vers un bloc de code. Cette syntaxe est utilisée lorsque le corps de la fonction s'étend sur plusieurs lignes. Voici la syntaxe de la même chose.

( [param1, parma2,…param n] )=> {       
   //code block 
}

Example − Lambda Statement

var msg = ()=> { 
   console.log("function invoked") 
} 
msg()

La référence de la fonction est renvoyée et stockée dans la variable msg. La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

function  invoked

Variations syntaxiques

Parenthèses facultatives pour un seul paramètre.

var msg = x=> { 
   console.log(x) 
} 
msg(10)

Accolades facultatives pour une seule instruction. Des parenthèses vides pour aucun paramètre.

var disp = ()=>console.log("Hello World") 
disp();

Expression de fonction et déclaration de fonction

L'expression de fonction et la déclaration de fonction ne sont pas synonymes. Contrairement à une expression de fonction, une déclaration de fonction est liée par le nom de la fonction.

La différence fondamentale entre les deux est que les déclarations de fonctions sont analysées avant leur exécution. En revanche, les expressions de fonction ne sont analysées que lorsque le moteur de script les rencontre lors d'une exécution.

Lorsque l'analyseur JavaScript voit une fonction dans le flux de code principal, il suppose la déclaration de fonction. Lorsqu'une fonction fait partie d'une instruction, il s'agit d'une expression de fonction.

Fonction de levage

Comme les variables, les fonctions peuvent également être hissées. Contrairement aux variables, les déclarations de fonction lorsqu'elles sont hissées, hissent la définition de la fonction plutôt que de simplement hisser le nom de la fonction.

L'extrait de code suivant illustre le levage de fonctions en JavaScript.

hoist_function();  
function hoist_function() { 
   console.log("foo"); 
}

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

foo

Cependant, les expressions de fonction ne peuvent pas être hissées. L'extrait de code suivant illustre la même chose.

hoist_function(); // TypeError: hoist_function() is not a function  
var hoist_function() = function() { 
   console.log("bar"); 
};

Expression de fonction immédiatement appelée

Les expressions de fonction immédiatement appelées (IIFE) peuvent être utilisées pour éviter le levage variable de l'intérieur des blocs. Il permet un accès public aux méthodes tout en préservant la confidentialité des variables définies dans la fonction. Ce modèle est appelé comme une fonction anonyme auto-exécutable. Les deux exemples suivants expliquent mieux ce concept.

Exemple 1: IIFE

var main = function() { 
   var loop = function() { 
      for(var x = 0;x<5;x++) {
         console.log(x); 
      } 
   }(); 
   console.log("x can not be accessed outside the block scope x value is :"+x); 
} 
main();

Exemple 2: IIFE

var main = function() { 
   (function() { 
      for(var x = 0;x<5;x++) { 
         console.log(x); 
      } 
   })(); 
   console.log("x can not be accessed outside the block scope x value is :"+x); 
} 
main();

Les deux exemples rendront la sortie suivante.

0 
1 
2 
3 
4 
Uncaught ReferenceError: x is not define

Fonctions du générateur

Lorsqu'une fonction normale est appelée, le contrôle repose sur la fonction appelée jusqu'à son retour. Avec les générateurs dans ES6, la fonction appelante peut désormais contrôler l'exécution d'une fonction appelée. Un générateur est comme une fonction normale sauf que -

La fonction peut céder le contrôle à l'appelant à tout moment.
Lorsque vous appelez un générateur, il ne fonctionne pas tout de suite. Au lieu de cela, vous récupérez un itérateur. La fonction s'exécute lorsque vous appelez la méthode suivante de l'itérateur.

Les générateurs sont désignés par le suffixe du mot-clé de fonction avec un astérisque; sinon, leur syntaxe est identique aux fonctions régulières.

L'exemple suivant illustre la même chose.

"use strict" 
function* rainbow() { 
   // the asterisk marks this as a generator 
   yield 'red'; 
   yield 'orange'; 
   yield 'yellow'; 
   yield 'green'; 
   yield 'blue'; 
   yield 'indigo'; 
   yield 'violet'; 
} 
for(let color of rainbow()) { 
   console.log(color); 
}

Les générateurs permettent une communication bidirectionnelle entre l'appelant et la fonction appelée. Ceci est accompli en utilisant leyield mot-clé.

Prenons l'exemple suivant -

function* ask() { 
   const name = yield "What is your name?"; 
   const sport = yield "What is your favorite sport?"; 
   return `${name}'s favorite sport is ${sport}`; 
}  
const it = ask(); 
console.log(it.next()); 
console.log(it.next('Ethan'));  
console.log(it.next('Cricket'));

La séquence de la fonction du générateur est la suivante -

Le générateur a démarré en pause déclaré; l'itérateur est renvoyé.
Le it.next () renvoie «Quel est votre nom». Le générateur est mis en pause. Ceci est fait par le mot-clé yield.
L'appel it.next («Ethan») attribue la valeur Ethan au nom de la variable et renvoie «Quel est votre sport préféré?» De nouveau, le générateur est mis en pause.
L'appel it.next («Cricket») attribue la valeur Cricket à la variable sport et exécute l'instruction de retour suivante.

Par conséquent, la sortie du code ci-dessus sera -

{ 
   value: 'What is your name?', done: false 
} 
{ 
   value: 'What is your favorite sport?', done: false 
} 
{ 
   value: 'Ethan\'s favorite sport is Cricket', done: true 
}

Note - Les fonctions du générateur ne peuvent pas être représentées à l'aide des fonctions fléchées.

Fonctions fléchées

Les fonctions fléchées qui sont introduites dans ES aident à écrire les fonctions en JavaScript de manière concise. Apprenons maintenant la même chose en détail.

ES5 et fonctions anonymes

JavaScript fait un usage intensif de anonymous functions. Une fonction anonyme est une fonction à laquelle aucun nom n'est associé. Les fonctions anonymes sont utilisées pendantfunction callback. L'exemple suivant illustre l'utilisation d'une fonction anonyme dans ES5 -

<script>
   setTimeout(function(){
      console.log('Learning at TutorialsPoint is fun!!')
   },1000)
</script>

L'exemple ci-dessus passe une fonction anonyme en tant que paramètre au prédéfini setTimeout() function. La fonction setTimeout () rappellera la fonction anonyme après 1 seconde.

La sortie suivante s'affiche après 1 seconde -

Learning at TutorialsPoint is fun!!

Syntaxe de la fonction de flèche

ES6 introduit le concept de arrow function pour simplifier l'utilisation de anonymous function. Il y a 3 parties à une fonction de flèche qui sont les suivantes -

Parameters - Une fonction fléchée peut éventuellement avoir des paramètres
The fat arrow notation (=>) - Il est également appelé comme l'opérateur va à
Statements - Représente le jeu d'instructions de la fonction

Tip - Par convention, l'utilisation d'un paramètre à une seule lettre est encouragée pour une déclaration de fonction de flèche compacte et précise.

Syntaxe

//Arrow function that points to a single line of code
()=>some_expression

OU

//Arrow function that points to a block of code
()=> { //some statements }`

OU

//Arrow function with parameters
(param1,param2)=>{//some statement}

Exemple: fonction Flèche dans ES6

L'exemple suivant définit deux expressions de fonction add et isEven en utilisant la fonction fléchée

<script>
   const add = (n1,n2) => n1+n2
   console.log(add(10,20))

   const isEven = (n1) => {
      if(n1%2 == 0)
         return true;
      else
         return false;
   }
   console.log(isEven(10))
</script>

La sortie du code ci-dessus sera comme mentionné ci-dessous -

30
true

Array.prototype.map () et fonction flèche

Dans l'exemple suivant, une fonction de flèche est transmise en tant que paramètre au Array.prototype.map() function.La fonction map () exécute la fonction de flèche pour chaque élément du tableau. La fonction flèche dans ce cas, affiche chaque élément du tableau et son index.

<script>
   const names = ['TutorialsPoint','Mohtashim','Bhargavi','Raja']
   names.map((element,index)=> {
      console.log('inside arrow function')
      console.log('index is '+index+' element value is :'+element)
   })
</script>

La sortie du code ci-dessus sera comme indiqué ci-dessous -

inside arrow function
index is 0 element value is :TutorialsPoint
inside arrow function
index is 1 element value is :Mohtashim
inside arrow function
index is 2 element value is :Bhargavi
inside arrow function
index is 3 element value is :Raja

Exemple: window.setTimeout () et fonction flèche

L'exemple suivant transmet une fonction de flèche en tant que paramètre à l'élément prédéfini setTimeout() function. lesetTimeout() La fonction rappellera la fonction fléchée après 1 seconde.

<script>
   setTimeout(()=>{
      console.log('Learning at TutorialsPoint is fun!!')
   },1000)
</script>

La sortie suivante s'affiche après 1 seconde -

Learning at TutorialsPoint is fun!!

Fonction fléchée et «ceci»

À l'intérieur d'une fonction de flèche si nous utilisons this pointer, il pointera vers la portée lexicale englobante. Cela signifie que les fonctions fléchées ne créent pas dethis pointerinstance chaque fois qu'elle est invoquée. Les fonctions de flèche utilise sa portée englobante. Pour comprendre cela, voyons un exemple.

<script>
   //constructor function
   function Student(rollno,firstName,lastName) {
      this.rollno = rollno;
      this.firstName = firstName;
      this.lastName = lastName;
      this.fullNameUsingAnonymous = function(){
         setTimeout(function(){
            //creates a new instance of this ,hides outer scope of this
            console.log(this.firstName+ " "+this.lastName)
         },2000)
      }
      this.fullNameUsingArrow = function(){
         setTimeout(()=>{
            //uses this instance of outer scope
            console.log(this.firstName+ " "+this.lastName)
         },3000)
      }
   }
   const s1 = new Student(101,'Mohammad','Mohtashim')
   s1.fullNameUsingAnonymous();
   s1.fullNameUsingArrow();
</script>

Lorsqu'une fonction anonyme est utilisée avec setTimeout(), la fonction est appelée après 2000 millisecondes. Une nouvelle instance de“this”est créé et il masque l'instance de la fonction Student. Donc, la valeur dethis.firstName et this.lastName sera undefined. La fonction n'utilise pas la portée lexicale ou le contexte de l'exécution en cours. Ce problème peut être résolu en utilisant unarrow function.

La sortie du code ci-dessus sera la suivante -

undefined undefined
Mohammad Mohtashim

↰ Previous page Next page ↱

ES6 - Fonctions

Exemple: définition de fonction simple

Classification des fonctions

Fonctions de retour

Fonctions paramétrées

Paramètres de fonction par défaut

Exemple 1

Exemple 2

Paramètres de repos

Fonction anonyme

Le constructeur de fonctions

Fonctions de récursivité et JavaScript

Fonctions Lambda

Fonction Lambda - Anatomie

Expression Lambda

Déclaration Lambda

Variations syntaxiques

Expression de fonction et déclaration de fonction

Fonction de levage

Expression de fonction immédiatement appelée

Exemple 1: IIFE

Exemple 2: IIFE

Fonctions du générateur

Fonctions fléchées

ES5 et fonctions anonymes

Syntaxe de la fonction de flèche

Syntaxe

OU

OU

Exemple: fonction Flèche dans ES6

Array.prototype.map () et fonction flèche

Exemple: window.setTimeout () et fonction flèche

Fonction fléchée et «ceci»

Tutoriel ES6