DSA avec JS - À votre rythme Tutoriel JS Exercice JS Questions d’entretien JS Réseau JS Chaîne
Définitions de fonctions JavaScript
Dernière mise à jour : 11 mars 2024
Les fonctions JavaScript sont déclarées à l’aide du mot-clé function,
soit sous forme de déclaration, soit d’expression. Les déclarations
définissent les fonctions nommées, tandis que les expressions
attribuent des fonctions aux variables. Les deux permettent la
réutilisation du code et la modularité.
Syntaxe:
Déclarations de fonction :
function functionName( parameters ) {
// Statements
};
Expressions de fonction :
let variableName = function( parameter ) {
// Statements
};
Constructeur de fonction :
let FunctionName = new Function("parameter", "return
parameter");
let variableName = FunctionName(values);
Paramètre : Il contient un seul paramètre functionName qui est
obligatoire et utilisé pour spécifier le nom de la fonction.
Exemples de définitions de fonctions JavaScript
Exemple : Dans cet exemple, nous montrons une déclaration de
fonction nommée GFG, qui multiplie deux nombres. Le résultat est
affiché dans l’élément paragraphe.
html
<!DOCTYPE html>
<html>
<head>
<title>Function Declarations</title>
</head>
<body style="text-align: center">
<h2>GeeksForGeeks</h2>
<p id="geeks"></p>
<script>
let var1 = GFG(40, 3);
document.getElementById(
"geeks"
).innerHTML = var1;
function GFG(num1, num2) {
return num1 * num2;
}
</script>
</body>
</html>
Sortie:
Exemple 2 : Cet exemple décrit une expression de fonction affectée à
var1, en multipliant deux nombres. Le résultat est affiché à l’aide de
innerHTML.
html
<!DOCTYPE html>
<html>
<head>
<title>Function Expressions</title>
</head>
<body>
<h2>GeeksForGeeks</h2>
<p id="geeks"></p>
<script>
let var1 = function (num1, num2) {
return num1 * num2;
};
document.getElementById(
"geeks"
).innerHTML = var1(20, 30);
</script>
</body>
</html>
Sortie:
Exemple 3 : Cet exemple décrit une expression de fonction créée à
l’aide du constructeur Function, en multipliant deux nombres et en
affichant le résultat dans un élément de paragraphe.
html
<!DOCTYPE html>
<html>
<head>
<title>Function Expressions</title>
</head>
<body>
<h2>GeeksForGeeks</h2>
<p id="geeks"></p>
<script>
let GFG = new Function(
"num1",
"num2",
"return num1 * num2"
);
document.getElementById(
"geeks"
).innerHTML = GFG(25, 4);
</script>
</body>
</html>
Sortie:
Fonction de levage
Le hissage de fonction déplace les déclarations de fonction vers le
haut de leur portée, ce qui permet de les utiliser avant la déclaration.
Les expressions de fonction ne sont pas hissées.
Exemple : Dans cet exemple, nous définissons le hissage d’une
fonction en appelant une fonction avant sa déclaration, en affichant un
message de bienvenue de GeeksForGeeks.
html
<!DOCTYPE html>
<html>
<head>
<title>Function Hoisting</title>
</head>
<body style="text-align: center">
<h1>GeeksForGeeks</h1>
<script>
GeeksForGeeks();
function GeeksForGeeks() {
document.write(
"Welcome to GeeksForGeeks"
);
}
</script>
</body>
</html>
Sortie:
Fonctions d’appel automatique
Les fonctions auto-vocatrices s’exécutent automatiquement lors de
leur création, sans nom. Les expressions de fonction suivies de ()
s’exécutent immédiatement, tandis que les déclarations de fonction ne
peuvent pas être appelées directement.
Exemple : Dans cet exemple, nous définissons une fonction d’appel
automatique qui définit le contenu d’un élément de paragraphe, en
présentant son exécution lors de sa création.
html
<!DOCTYPE html>
<html>
<head>
<title>Function Hoisting</title>
</head>
<body style="text-align: center">
<h1>GeeksForGeeks</h1>
<p id="geeks"></p>
<script>
(function () {
document.getElementById(
"geeks"
).innerHTML =
"GeeksForGeeks is the best way to learn";
})();
</script>
</body>
</html>
Sortie:
Les fonctions sont des objets
Il peut décrire des fonctions comme des objets et avoir à la fois des
propriétés et des méthodes.
Lorsque la fonction est définie comme propriété d’un objet, elle est
connue sous le nom de méthode de l’objet.
Lorsque vous concevez une fonction pour créer de nouveaux objets,
elle est connue sous le nom de constructeur d’objets.
Exemple : Dans cet exemple, nous montrons l’utilisation de l’objet
arguments pour compter le nombre d’arguments passés à une
fonction.
html
<!DOCTYPE html>
<html>
<head>
<title>Function Hoisting</title>
</head>
<body style="text-align: center">
<h1>GeeksForGeeks</h1>
<p>Number of arguments :</p>
<p id="geeks"></p>
<script>
function GeeksForGeeks(num1, num2) {
return arguments.length;
}
document.getElementById(
"geeks"
).innerHTML = GeeksForGeeks(4, 3);
</script>
</body>
</html>
Sortie:
Fonctions fléchées
Les fonctions fléchées simplifient l’écriture d’expressions de fonction
en fournissant une syntaxe concise sans qu’il soit nécessaire d’utiliser
le mot-clé function, le mot-clé retour ou les accolades.
Exemple : Dans cet exemple, nous définissons une fonction fléchée
pour multiplier deux nombres et affichons le résultat en JavaScript.
html
<!DOCTYPE html>
<html>
<head>
<title>Function Hoisting</title>
</head>
<body style="text-align: center">
<h1>GeeksForGeeks</h1>
<p id="geeks"></p>
<script>
const var1 = (num1, num2) =>
num1 * num2;
document.getElementById(
"geeks"
).innerHTML = var1(5, 5);
</script>
</body>
</html>
Sortie:
Vous voulez être un développeur de logiciels ou un professionnel en
activité cherchant à améliorer vos compétences en développement de
logiciels ? Ensuite, maîtrisez les concepts du développement Full-
Stack. Notre cours de développement Full Stack - React and Node.js
vous aidera à y parvenir rapidement. Apprenez tout, du
développement front-end au développement back-end, avec des
projets pratiques et des exemples concrets. Ce cours vous permet de
créer des applications Web évolutives, efficaces et dynamiques qui se
démarquent. Prêt à devenir un expert en Full-Stack ? Inscrivez-vous
maintenant et commencez à créer l’avenir !
R Rath… Suivre 3
Article suivant
Liaison de fonction JavaScript
Lectures similaires
Comment identifier les définitions CSS inutilisées de plusieurs…
Dans cet article, nous allons apprendre à identifier les définitions CSS
inutilisées à partir de plusieurs fichiers CSS dans un projet. Que sont le…
2 min de lecture
EJS Abréviations, formes complètes, significations et définitions
Le Javascript intégré est abrégé en EJS. Avant de connaître l’EJS,
apprenons ce qu’est un langage de modélisation. Un langage de…
4 min de lecture
Explorer le concept d’étendue des fonctions JavaScript et les…
JavaScript est basé sur la programmation fonctionnelle. Par conséquent,
les fonctions sont des blocs de construction fondamentaux de JavaScri…
10 min de lecture
Comment retarder l’appel d’une fonction JavaScript à l’aide de…
Retarder l’appel d’une fonction JavaScript implique de reporter son
exécution d’une durée spécifiée en utilisant des méthodes comme…
3 min de lecture
Comment obtenir le nom de la fonction à partir de cette fonction à…
Étant donné une fonction, la tâche consiste à obtenir le nom de la
fonction à l’intérieur de la fonction à l’aide de JavaScript. Il existe…
2 min de lecture
Comment implémenter une fonction qui active une autre fonction…
Supposons que l’on nous ait donné une fonction add() qui prend deux
paramètres a et b, et renvoie leur somme. Nous sommes censés…
2 min de lecture
Comment créer une fonction qui invoque une fonction avec des…
In this article, we will learn to create a function that invokes a function
with partials appended to the arguments it receives in JavaScript.…
3 min read
How to create a function that invokes the provided function with it…
In programming, functions are used to reduce the effort of writing the
same instance of code repeatedly. In this article let us see how we can…
2 min read
How to create a function that invokes each provided function with…
In this article, we will see how to create a function that invokes each
provided function with the arguments it receives using JavaScript. It…
3 min read
How to create a function that invokes function with partials…
In this article, we will see how to create a function that invokes functions
with partials prepended to the arguments it receives in JavaScript.…
5 min read
Article Tags : JavaScript Web Technologies
Corporate & Communications Address:- A-
143, 9th Floor, Sovereign Corporate Tower,
Sector- 136, Noida, Uttar Pradesh (201305)
| Registered Address:- K 061, Tower K,
Gulshan Vivante Apartment, Sector 137,
Noida, Gautam Buddh Nagar, Uttar
Pradesh, 201305
Company Languages
About Us Python
Legal Java
In Media C++
Contact Us PHP
Advertise with us GoLang
GFG Corporate Solution SQL
Placement Training Program R Language
GeeksforGeeks Community Android Tutorial
Tutorials Archive
DSA Data Science & ML
Data Structures Data Science With Python
Algorithms Data Science For Beginner
DSA for Beginners Machine Learning
Basic DSA Problems ML Maths
DSA Roadmap Data Visualisation
Top 100 DSA Interview Problems Pandas
DSA Roadmap by Sandeep Jain NumPy
All Cheat Sheets NLP
Deep Learning
Web Technologies Python Tutorial
HTML Python Programming Examples
CSS Python Projects
JavaScript Python Tkinter
TypeScript Web Scraping
ReactJS OpenCV Tutorial
NextJS Python Interview Question
Bootstrap Django
Web Design
Computer Science DevOps
Operating Systems Git
Computer Network Linux
Database Management System AWS
Software Engineering Docker
Digital Logic Design Kubernetes
Engineering Maths Azure
Software Development GCP
Software Testing DevOps Roadmap
System Design Inteview Preparation
High Level Design Competitive Programming
Low Level Design Top DS or Algo for CP
UML Diagrams Company-Wise Recruitment Process
Interview Guide Company-Wise Preparation
Design Patterns Aptitude Preparation
OOAD Puzzles
System Design Bootcamp
Interview Questions
School Subjects GeeksforGeeks Videos
Mathematics DSA
Physics Python
Chemistry Java
Biology C++
Social Science Web Development
English Grammar Data Science
Commerce CS Subjects
World GK
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
