Fonctions fléchées Javascript

Le concept fondamental des fonctions fléchées en JavaScript

function(a) { return a + 100 ; }

a => a + 100 ;

Quand utiliser les fonctions fléchées en Javascript

• Rappels d'une seule ligne: Les fonctions fléchées sont parfaites pour les fonctions de rappel sur une seule ligne qui ne comprennent qu'une déclaration de retour. Grâce à leur syntaxe plus courte, ton code JavaScript devient plus lisible et plus compact.
• 'this' lexicale: si tu dois toujours lier 'this', l'utilisation de la fonction Arrow est un bon choix car la fonction ne génère pas son propre contexte 'this'.

Idées fausses sur les fonctions fléchées en Javascript

Fonction fléchée Javascript vs Fonction : Une analyse comparative

Similitudes entre les fonctions fléchées et les fonctions classiques en Javascript

function add(a, b) { return a + b ; }

let add = (a, b) => a + b ;

Différences de syntaxe : Fonction fléchée Javascript vs Fonction

Scénarios de cas d'utilisation : Fonction fléchée et fonction normale en JavaScript

• Lorsque tu écris des fonctions qui seront utilisées comme constructeurs pour créer de nouveaux objets avec le mot-clé new, les fonctions traditionnelles sont nécessaires car les fonctions fléchées ne prennent pas en charge new.
• Si ta fonction doit inclure une méthode appelée super, qui te permet d'utiliser les méthodes de la classe mère dans la classe enfant, tu ne peux pas utiliser les fonctions fléchées car elles n'ont pas de prototype et ne peuvent donc pas appeler super.
• Les fonctions traditionnelles permettent également la surcharge en fonction du nombre d'arguments, grâce au mot-clé arguments, ce qui n'est pas disponible dans les fonctions fléchées.

Exploration de la syntaxe des fonctions fléchées en Javascript

Importance d'une syntaxe correcte pour les fonctions fléchées en Javascript

Erreurs de syntaxe courantes dans les fonctions fléchées en Javascript

const foo = a, b => a + b ; // incorrect const foo = (a, b) => a + b ; // correct

let add = (a, b) => { // fonction fléchée sur plusieurs lignes let sum = a + b ; } // incorrect car il n'y a pas de retour let add = (a, b) => { // fonction fléchée multiligne let sum = a + b ; return sum ; // correct }

Exemples de syntaxe : Démêler la syntaxe des fonctions fléchées en JavaScript

let square=x => x*x ;

let add = (a, b) => a + b ;

let greet = () => console.log('Hello World') ;

let double = (x) => 2 * x ;

let add = (a, b) => { console.log('Addition function called!') ; return a + b ; } ;

Les fonctions fléchées asynchrones en JavaScript

Décomposition de la fonction flèche asynchrone en Javascript

let myAsyncFunction = async () => { // code asynchrone ici } ;

• Il garantit que la fonction renvoie toujours une promesse : si une fonction marquée comme asynchrone ne renvoie pas de valeur, ou si elle renvoie une valeur sans promesse, JavaScript enveloppe automatiquement cette valeur dans une promesse résolue.
• Cela permet d'utiliser le mot-clé await dans la fonction : L'opérateur await est utilisé pour mettre en pause et reprendre une fonction asynchrone JavaScript et pour attendre la résolution ou le rejet d'une promesse.

Rôle des fonctions fléchées asynchrones dans la programmation Javascript

Applications courantes de la fonction flèche asynchrone en JavaScript

let fetchData = async() => { let response = await fetch('https://api.example.com/data') ; let data = await response.json() ; return data ; } ;

let delay = async() => { await new Promise(resolve => setTimeout(resolve, 5000)) ; console.log('Ce message s'affiche après un délai de 5 secondes.') ; } ;

let example = async () => { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve("Promise resolved !"), 2000) }) ; let result = await promise ; console.log(result) ; // "Promise resolved !" } example() ;

Tableau map et fonctions fléchées javascript

Comprendre le tableau map avec la fonction flèche de Javascript

let newArray = oldArray.map((item) => { // transformation return newValue ; }) ;

let numbers = [1, 2, 3, 4, 5] ; let doubled = numbers.map((number) => number * 2) ; console.log(doubled) ; // [2, 4, 6, 8, 10]

Applications pratiques : Carte de tableau avec fonction fléchée en Javascript

let values = [1, 2, 3, 4] ; let doubleValues = values.map(value => value * 2) ;

let users = [{nom : 'Alice', âge : 25}, {nom : 'Bob', âge : 30}] ; let names = users.map(user => user.name) ;

let pets = [{name : 'Fluffy', type : 'Dog'}, {name : 'Felix', type : 'Cat'} ] ; let petDescriptions = pets.map(pet => `${pet.name} is a very cute ${pet.type}`) ;

Manipuler les tableaux : La fonction fléchée en Javascript en pratique

let prices = [100, 200, 300, 400, 500] ; let discounted = prices.map(price => price - price * 0.2) ;

products = ['Lait', 'Oeufs' , 'Pain'] ; let prices = [1.50, 2.50, 0.90] ; let productsWithPrices = products.map((product, index) => { return { name : product, price : prices[index] } }) ;

Les fonctions fléchées en Javascript dans les classes et l'imbrication

Incorporer une fonction fléchée dans une classe JavaScript

class Counter { constructor() { this.value = 0 ; } increment() { this.value++ ;

let myCounter = new Counter() ; setTimeout(myCounter.increment, 1000) ;

class Counter { constructor() { this.value = 0 ; } increment = () => { this.value++ ; }

let myCounter = new Counter() ; setTimeout(myCounter.increment, 1000) ;

Avantages de l'utilisation de la fonction flèche dans la classe Javascript

• Liaison automatique de "this" : Avec les fonctions fléchées, this est lié lexicalement. Cela signifie qu'il utilise this à partir du code qui contient la fonction flèche.
• Syntaxe plus simple : Les fonctions fléchées ont une syntaxe plus courte que les expressions de fonction. Il en résulte moins de code et potentiellement moins de confusion.
• Non-liaison des arguments : Les fonctions fléchées n'ont pas d'objet pour leurs arguments. Elles constituent donc un excellent choix pour les fonctions que tu prévois d'utiliser comme méthodes à l'intérieur d'une classe.

Scénarios réels : Fonctions fléchées imbriquées en Javascript

app.use((req, res, next) => { return (stuff) => { // Faire quelque chose avec 'stuff' next() ;

}) ;

let multiply = x => y => x * y ; let double = multiply(2) ; let result = double(3) ; // 6

Comprendre les avantages et les utilisations des fonctions fléchées de JavaScript

Avantages généraux des fonctions fléchées en JavaScript

• Syntaxe succincte : Les fonctions fléchées peuvent réduire la verbosité de ton code JavaScript. Le code a l'air plus propre.
• Portée lexicale : Les fonctions fléchées utilisent le cadrage lexical pour la variable spéciale "this". Cette variable représente toujours l'objet qui a défini la fonction fléchée.
• Pas d'objet d'arguments : Les fonctions fléchées n'ont pas d'arguments de variables locales comme les fonctions ordinaires.
• Retours implicites : Si le corps de la fonction ne contient qu'une seule instruction, tu peux omettre le mot-clé 'return' et les accolades, ce qui rend ton code encore plus concis.

Avantages spécifiques des cas d'utilisation de la fonction Arrow en JavaScript

document.getElementById('myButton').addEventListener('click', event => { // "this" est ici lexicalement lié à la portée environnante. console.log(this) ;

)

let names = ['Alice', 'Bob', 'Charlie'] ; let greetings = names.map(name => `Hello, ${name}`) ;

let numbers = [19, 3, 81, 1, 24, 21] ; numbers.sort((a, b) => a - b)

Exploiter les avantages des fonctions fléchées imbriquées en Javascript

let greeting = langue => nom => `Bonjour, ${nom}. Bienvenue dans l'apprentissage de ${language}` ; let greetingInSpanish = greeting('Spanish') ; console.log(greetingInSpanish('John')) ; // Bonjour, John. Bienvenue dans l'apprentissage de l'espagnol

let add = a => b => a + b ; let addFive = add(5) ; console.log(addFive(3)) ; // 8