Les fonctions JavaScript sont définies avec le Mot-clé function.
Vous pouvez utiliser une déclaration de fonction ou un fonction expression.
Plus tôt dans ce didacticiel, vous avez appris que les fonctions sont déclarées avec le syntaxe suivante :
function functionName(parameters) {
// code to be executed
}Les fonctions déclarées ne sont pas exécutées immédiatement. Ils sont "enregistrés pour une utilisation ultérieure", et seront exécutés plus tard, lorsqu'ils seront invoqués (appelés).
function myFunction(a, b) {
return a * b;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Les points-virgules sont utilisés pour séparer les instructions JavaScript exécutables.
Puisqu'une déclaration de fonction n'est pas une instruction exécutable, elle est il n'est pas courant de le terminer par un point-virgule.
Une fonction JavaScript peut également être définie à l'aide d'une expression.
Une expression de fonction peut être stockée dans une variable :
const x = function (a, b) {return a * b};Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can be stored in a variable:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Une fois qu'une expression de fonction a été stockée dans une variable, la variable peut être utilisé comme fonction :
const x = function (a, b) {return a * b};
let z = x(4, 3);Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>After a function has been stored in a variable,
the variable can be used as a function:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>
La fonction ci-dessus est en fait une fonction anonyme (une fonction sans nom).
Les fonctions stockées dans des variables n'ont pas besoin de noms de fonction. Ils sont toujours invoqué (appelé) en utilisant le nom de la variable.
La fonction ci-dessus se termine par un point-virgule car elle fait partie d'une instruction exécutable.
Comme vous l'avez vu dans les exemples précédents, les fonctions JavaScript sont définies avec le mot-clé function.
Les fonctions peuvent également être définies avec un constructeur de fonctions JavaScript intégré appelé Fonction().
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>JavaScript has an built-in function constructor.</p>
<p id="demo"></p>
<script>
const myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
En fait, vous n'êtes pas obligé d'utiliser le constructeur de fonction. L'exemple ci-dessus revient à écrire :
const myFunction = function (a, b) {return a * b};
let x = myFunction(4, 3);Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
const myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
La plupart du temps, vous pouvez éviter d'utiliser le mot-clé new en JavaScript.
Plus tôt dans ce didacticiel, vous avez découvert le « levage » (JavaScript Hoisting).
Le levage est le comportement par défaut de JavaScript consistant à déplacer les déclarations vers le haut de la page. portée actuelle.
Le levage s'applique aux déclarations de variables et aux déclarations de fonctions.
Pour cette raison, les fonctions JavaScript peuvent être appelées avant d'être déclarées :
myFunction(5);
function myFunction(y) {
return y * y;
}Les fonctions définies à l'aide d'une expression ne sont pas hissées.
Les expressions de fonction peuvent être rendues « auto-invoquantes ».
Une expression auto-invoquante est invoquée (démarrée) automatiquement, sans être appelée.
Les expressions de fonction s'exécuteront automatiquement si l'expression est suivie par().
Vous ne pouvez pas invoquer automatiquement une déclaration de fonction.
Il faut ajouter des parenthèses autour de la fonction pour indiquer qu'il s'agit d'une expression de fonction :
(function () {
let x = "Hello!!"; // I will invoke myself
})();Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<p>Functions can be invoked automatically without being called:</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>
</body>
</html>
La fonction ci-dessus est en fait une fonction auto-invoquante anonyme (fonction sans nom).
Les fonctions JavaScript peuvent être utilisées comme valeurs :
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be treated as values:</p>
<p>x = myFunction(4,3) or x = 12</p>
<p>In both cases, x becomes a number with the value of 12.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Les fonctions JavaScript peuvent être utilisées dans les expressions :
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be used in expressions.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
L'opérateur typeof en JavaScript renvoie "fonction" pour les fonctions.
Mais les fonctions JavaScript peuvent être mieux décrites comme des objets.
Les fonctions JavaScript ont à la fois des propriétés et méthodes.
La propriété arguments.length renvoie le nombre d'arguments reçus lorsque la fonction a été invoquée :
function myFunction(a, b) {
return arguments.length;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<p>The arguments.length property returns the number of arguments received by the function:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
La méthode toString() renvoie la fonction sous forme de chaîne :
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns the function as a string:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>
Une fonction définie comme propriété d'un objet est appelée une méthode pour l'objet.
Une fonction conçue pour créer de nouveaux objets est appelée constructeur d’objet.
Les fonctions fléchées permettent une syntaxe courte pour écrire des expressions de fonction.
Vous n'avez pas besoin du mot-clé function, du mot-clé return et du accolades.
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Les fonctions fléchées n'ont pas leur propre this. Ils ne sont pas bien adaptés pour définir des méthodes objets.
Les fonctions de flèche ne sont pas levées. Ils doivent être définis avant d’être utilisés.
Utilisation de const est plus sûr que d'utiliser var, car une expression de fonction est valeur toujours constante.
Vous ne pouvez omettre le mot-clé return et les accolades que si la fonction est une instruction unique. Pour cette raison, ce serait une bonne habitude de toujours les conserver :
const x = (x, y) => { return x * y };
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Les fonctions fléchées ne sont pas prises en charge dans IE11 ou version antérieure.