Traduit en : Français Afficher l'original Options ▼

DSA avec JS - À votre rythme Tutoriel JS Exercice JS Questions d’entretien JS Tableau JS Cha

Fonctions fléchées en JavaScript

Dernière mise à jour : 20 août 2024
ES6 a introduit les fonctions Arrow dans JavaScript qui offrent une
manière plus concise et plus lisible d’écrire des expressions de
fonction. Elles utilisent la syntaxe => (flèche), qui non seulement
réduit le nombre de caractères standard, mais les lie également
lexicalement, ce qui les rend particulièrement utiles dans certains
scénarios comme la gestion des rappels ou le travail au sein d’objets .

Qu’est-ce que la fonction flèche ?

Une fonction fléchée est essentiellement une fonction anonyme avec
une syntaxe plus courte. Elles sont souvent assignées à des variables,
ce qui les rend réutilisables. Les fonctions fléchées sont également
appelées fonctions lambda dans certains autres langages de
programmation.

Syntaxe

const gfg = () => {

[Link]( "Salut Geek !" );
}

Les exemples ci-dessous montrent le fonctionnement des fonctions

fléchées en JavaScript.

1. Fonction flèche sans paramètres

Une fonction fléchée sans paramètres est définie à l’aide de
parenthèses vides (). Ceci est utile lorsque vous avez besoin d’une
fonction qui ne nécessite aucun argument.
Exemple : Dans cet exemple, nous définissons une fonction fléchée
gfg sans paramètres qui enregistre « Salut de GeekforGeeks ! »
lorsqu’elle est appelée.

Javascript

const gfg = () => {

[Link]( "Hi from GeekforGeeks!" );
}

gfg();

Sortir

Bonjour de GeekforGeeks !

2. Fonction flèche avec paramètres uniques

Si votre fonction fléchée possède un seul paramètre, vous pouvez
omettre les parenthèses qui l’entourent.

Exemple : Dans cet exemple, nous définissons une fonction fléchée

carré avec un seul paramètre x, renvoyant le carré de x.

Javascript

const square = x => x*x;

[Link](square(4));
// output: 16

Sortir

16

3 F ti flè h l i èt
3. Fonction flèche avec plusieurs paramètres
Les fonctions fléchées avec plusieurs paramètres, comme (param1,
param2) => { } , simplifient l’écriture d’expressions de fonction
concises en JavaScript, utiles pour les fonctions nécessitant plus d’un
argument.

Exemple : Dans cet exemple, nous définissons une fonction flèche gfg
avec les paramètres x, y, z, en enregistrant leur somme.

Javascript

const gfg = ( x, y, z ) => {

[Link]( x + y + z )
}

gfg( 10, 20, 30 );

Sortir

60

4. Fonction flèche avec paramètres par défaut

Les fonctions fléchées prennent en charge les paramètres par défaut,
autorisant des valeurs prédéfinies si aucun argument n'est passé,
rendant les définitions de fonctions JavaScript plus flexibles et
concises.

Exemple : Dans cet exemple, nous définissons une fonction flèche gfg
avec les paramètres x, y et un paramètre par défaut z = 30.

JavaScript

const gfg = ( x, y, z = 30 ) => {

[Link]( x + " " + y + " " + z);
}

gfg( 10, 20 );
Sortir

10 20 30

5. Renvoyer les littéraux d'objet

En JavaScript, le renvoi de littéraux d'objet dans les fonctions est
concis : () => ({ key: value }) renvoie un objet { key: value }, utile pour
la création et le retour immédiats d'objets.

Exemple : Dans cet exemple, nous définissons une fonction fléchée

makePerson avec les paramètres firstName, lastName, renvoyant un
objet.

JavaScript

const makePerson = (firstName, lastName) =>

({first: firstName, last: lastName});
[Link](makePerson("Pankaj", "Bind"));

Sortir

{ first: 'Pankaj', last: 'Bind' }

Async Arrow Functions

Arrow functions can be made asynchronous by adding the async
keyword before the parameter list.

const fetchData = async () => {

const data = await fetch('[Link]
return [Link]();
};

Advantages of Arrow Functions

 Concise Syntax: Arrow functions reduce the amount of code
needed for function expressions.
Lexical this Binding: Arrow functions automatically bind this to the
surrounding context, eliminating common issues when dealing with
callbacks.
Improved Readability: For shorter functions, arrow syntax can
make your code more readable.

Limitations of Arrow Functions

No prototype Property: Arrow functions do not have the prototype
property, so they cannot be used as constructors.
Cannot be Used with new: Since they lack a prototype, they cannot
be used with the new keyword to create instances.
Cannot be Generators: Arrow functions cannot be used as
generator functions (function*) because they do not support the
yield keyword.
Anonymous Nature: Debugging can be harder because arrow
functions are anonymous by default.
No Own this, arguments, super, or [Link]: Arrow functions do
not have their own bindings for these properties, which can limit
their use in some cases.

Supported Browsers
Google Chrome 5.0
Edge 12
Mozilla 4.0
Safari 5.0
Opera 11.1

FAQs- Arrow functions in JavaScript

How do Arrow Functions differ from regular functions?

 Arrow Functions have a shorter syntax, lexically bind this, and do
not have their own this, arguments, super, or [Link].

When should I use Arrow Functions?

Use Arrow Functions for concise anonymous functions,

especially for short callbacks or when this should lexically bind
to the surrounding scope.

Can Arrow Functions have default parameters?

Yes, Arrow Functions support default parameters: (param =

defaultValue) => { }.

Do Arrow Functions support rest parameters?

Yes, Arrow Functions can use rest parameters (…rest) to

represent an indefinite number of arguments as an array.

Can Arrow Functions be used as constructors?

No, Arrow Functions cannot be used as constructors because

they do not have their own this context.

How do Arrow Functions handle this?

 Arrow Functions inherit this from the surrounding lexical context,
making them useful for methods inside objects or for maintaining
the context of callbacks.

Want to be a Software Developer or a Working Professional looking to

enhance your Software Development Skills? Then, master the
concepts of Full-Stack Development. Our Full Stack Development -
React and [Link] Course will help you achieve this quickly. Learn
everything from Front-End to Back-End Development with hands-on
Projects and real-world examples. This course enables you to build
scalable, efficient, dynamic web applications that stand out. Ready to
become an expert in Full-Stack? Enroll Now and Start Creating the
Future!

D Daipa… 24

Previous Article Next Article

JavaScript JSON JavaScript this Keyword
Similar Reads
Difference between Regular functions and Arrow functions
This article discusses the major differences between regular functions
and arrow functions. Arrow functions - a new feature introduced in ES6…
2 min read

Higher-Order Arrow Functions in JavaScript

Prerequisite: Arrow Functions A Higher-Order function is a function that
receives a function as an argument otherwise returns the function as…
6 min read

What Do Multiple Arrow Functions Mean in JavaScript?

In JavaScript, arrow functions provide a concise syntax for writing
function expressions. When you use multiple arrow functions in…
2 min read

How to avoid binding by using arrow functions in callbacks in…

In React class-based components when we use event handler callbacks,
it is very important to give special attention to the 'this' keyword. In…
2 min read

When should one use Arrow functions in ES6 ?

In this article, we will try to understand when should one use Arrow
functions in ES6 instead of the traditional function's syntax with the hel…
4 min read

PHP Arrow Functions

Les fonctions fléchées, également appelées « fermetures courtes », sont
une nouvelle fonctionnalité introduite dans PHP 7.4 qui fournit une…
1 min de lecture

Comment déclarer et utiliser les fonctions fléchées dans TypeScri…

 La fonction flèche est une manière concise de déclarer les fonctions en
TypeScript avec une liaison lexicale de cet objet. La fonction flèche nou…
1 min de lecture

Comment spécifier le type de retour dans les fonctions fléchées…

Pour spécifier le type de retour dans la fonction flèche TypeScript, nous
avons plusieurs approches. Dans cet article, nous allons apprendre à…
2 min de lecture

Que sont les fonctions Arrow/lambda dans TypeScript ?

La fonction Arrow/lambda est une forme concise d'une fonction normale
dans Typescript. Les fonctions fléchées sont également appelées…
2 min de lecture

Opérateur de flèche dans ES6 de JavaScript

ES6 a apporté plusieurs avantages, dont l'un est l'opérateur fléché. Il a
réduit la taille du code définissant la fonction, c'est donc l'une des…
4 minutes de lecture

Mots clés de l'article : JavaScript Technologies Web ES6 fonctions javascript

 Adresse de l'entreprise et des
communications : A-143, 9e étage,
Sovereign Corporate Tower, secteur 136,
Noida, Uttar Pradesh (201305) | Adresse
enregistrée : K 061, Tower K, Gulshan
Vivante Apartment, secteur 137, Noida,
Gautam Buddh Nagar, Uttar Pradesh,
201305

Entreprise Langues
À propos de nous Python
Légal Java
Dans les médias C++
Contactez-nous PHP
Faites de la publicité avec nous GoLang
Solution d'entreprise GFG SQL
Programme de formation en placement Langage R
Communauté GeeksforGeeks Tutoriel Android
Archives des tutoriels

DSA Science des données et Machine learning

Structures de données Science des données avec Python
Algorithmes Science des données pour débutants
DSA pour les débutants Apprentissage automatique
Problèmes DSA de base Mathématiques ML
Feuille de route DSA Visualisation des données
Top 100 des problèmes d'entretien DSA Pandas
Feuille de route DSA par Sandeep Jain Numpy
Toutes les aide-mémoire PNL
Apprentissage profond

Technologies Web Tutoriel Python

 Technologies Web Tutoriel Python
HTML Exemples de programmation Python
CSS Projets Python
JavaScript Python Tkinter
Manuscrit Grattage Web
ReactJS Tutoriel OpenCV
SuivantJS Question d'entretien Python
Amorçage Django
Conception de sites Web

L'informatique DevOps
Systèmes d'exploitation Git
Réseau informatique Linux
Système de gestion de base de données AWS
Ingénierie logicielle Docker
Conception de la logique numérique Kubernetes
Mathématiques de l'ingénierie Azuré
Développement de logiciels BPC
Tests de logiciels Feuille de route DevOps

Conception du système Préparation à l'entretien

Conception de haut niveau Programmation compétitive
Conception de bas niveau Top DS ou Algo pour CP
Diagrammes UML Processus de recrutement adapté à l'entreprise
Guide d'entretien Préparation adaptée à l'entreprise
Modèles de conception Préparation aux aptitudes
OOAAD Casse-têtes
Bootcamp sur la conception de systèmes
Questions d'entretien

Matières scolaires Vidéos de GeeksforGeeks

Mathématiques DSA
Physique Python
Chimie Java
Biologie C++
Sciences sociales Développement Web
Grammaire anglaise Science des données
Commerce Matières d'informatique
Gardien de but mondial

@GeeksforGeeks, Sanchhaya Education Private Limited , Tous droits réservés