Fonctions

Introduction à Fns :

Éléments fondamentaux de la langue.
Concepts les plus essentiels.
Fn - morceau de code qui peut être utilisé encore et encore.
{Invoquer, Courir, Appeler} un Fn signifie tous la même chose.
Fn - peut prendre des données comme arguments, renvoyer des données comme résultat après le calcul.
L'appel Fn est remplacé par le résultat renvoyé après exécution.
Les Fns sont parfaits pour mettre en œuvre le principe DRY
Les arguments sont transmis, les paramètres sont des espaces réservés qui reçoivent les valeurs transmises à fn.

Déclaration Fn vs expression :

La déclaration Fn commence par le mot-clé fn.
Les expressions Fn sont des fn anonymes, stockées dans une variable. Ensuite, cette variable qui stocke le fn agit comme un fn.
La définition fn anonyme est une expression et l'expression produit une valeur. Les Fn ne sont que des valeurs.
Fn n’est pas un type String, Number. C'est une valeur, elle peut donc être stockée dans une variable.
La déclaration Fn peut être appelée avant même qu'elle ne soit définie dans le code, c'est-à-dire qu'elle est hoisée. Cela ne fonctionne pas avec l'expression Fn.
L'expression Fn oblige l'utilisateur à définir d'abord les fns, puis à les utiliser plus tard. Tout est stocké dans des variables.
Les deux ont leur place dans JS et doivent donc être correctement maîtrisés.
Expression Fn = essentiellement une valeur fn stockée dans une variable

Arrow Fn est livré avec ES6

Retour implicite pour une seule ligne, pour plusieurs lignes, un retour explicite est nécessaire.
Les fns fléchés n'obtiennent pas leur propre mot-clé « ce » 
L’apprentissage n’est pas un processus linéaire, les connaissances s’accumulent progressivement. Vous ne pouvez pas tout apprendre sur une chose en une seule fois.

## Default parameters
const bookings = [];

const createBooking = function(flightNum, numPassengers=1, price= 100 * numPassengers){
  // It will work for parameters defined before in the list like numPassengers is defined before its used in expression of next argument else it won't work.
  // Arguments cannot be skipped also with this method. If you want to skip an argument, then manually pass undefined value for it which is equivalent to skipping an argument
  /* Setting default values pre-ES6 days.
  numPassengers = numPassengers || 1;
  price = price || 199;*/

// Using enhanced object literal, where if same property name & value is there, just write them once as shown below.
  const booking = {
    flightNum,
    numPassengers,
    price,
  };

  console.log(booking);
  bookings.push(booking);
}

createBooking('AI123');
/*
{
  flightNum: 'AI123',
  numPassengers: 1,
  price: 100
}
*/ 

createBooking('IN523',7);
/*
{
  flightNum: 'IN523',
  numPassengers: 7,
  price: 700
}
*/ 

createBooking('SJ523',5);
/*
{
  flightNum: 'SJ523',
  numPassengers: 5,
  price: 500
} 
*/ 

createBooking('AA523',undefined, 100000);
/*
{
  flightNum: 'AA523',
  numPassengers: 1,
  price: 100000
}
*/ 

Appeler un fn depuis l'intérieur d'un autre fn :

Technique très courante pour soutenir le principe DRY.
Prend en charge la maintenabilité
return quitte immédiatement le fn
return = pour sortir une valeur du fn, terminer l'exécution
Trois façons d'écrire fn, mais toutes fonctionnent de la même manière, c'est-à-dire Entrée, Calcul, Sortie
Paramètres = espaces réservés pour recevoir les valeurs i/p, comme les variables locales d'un fn.

Comment fonctionne la transmission des arguments, c'est-à-dire les types de valeur par rapport aux types de référence

Les primitives sont transmises par valeur à fn. La valeur d'origine reste intacte.
Les objets sont passés par référence à fn. La valeur d'origine est modifiée.
JS n'a pas de valeur de passage par référence.

L'interaction de différents fns avec le même objet peut parfois créer des problèmes

Les Fns sont de première classe en JS, nous pouvons donc écrire HO fns.

Les Fns sont traités comme des valeurs, juste un autre « type » d'objet.
Puisque les objets sont des valeurs, les fns sont également des valeurs. Par conséquent, peut également être stocké dans des variables, attaché en tant que propriétés d'objet, etc.
En outre, les fns peuvent également être transmis à d'autres fns. Ex. auditeurs-gestionnaires d'événements.
Retour de fns.
Les Fns sont des objets et les objets ont leurs propres méthodes-propriétés dans JS. Par conséquent, fn peut avoir des méthodes ainsi que des propriétés qui peuvent être appelées. Ex appeler, postuler, lier etc.

Fn d'ordre supérieur : Fn qui reçoit un autre fn en argument, qui renvoie un nouveau fn ou les deux. Uniquement possible car les fns sont de première classe en JS
Fn qui est transmis dans le rappel fn, qui sera appelé par HOF.

Fns qui renvoient un autre fn, c'est-à-dire dans Closures.

Les fns et HOF de première classe sont des concepts différents.

Rappel Fns Adv :
Permettez-nous de créer des abstractions. Permet d'examiner plus facilement un problème plus vaste.
Modularisez le code en morceaux plus petits à réutiliser.

// Example for CB & HOF:
// CB1
const oneWord = function(str){
  return str.replace(/ /g,'').toLowerCase();
};

// CB2
const upperFirstWord = function(str){
    const [first, ...others] = str.split(' ');
    return [first.toUpperCase(), ...others].join(' ');
};

// HOF
const transformer = function(str, fn){
  console.log(`Original string: ${str}`);
  console.log(`Transformed string: ${fn(str)}`);
  console.log(`Transformed by: ${fn.name}`);
};
transformer('JS is best', upperFirstWord);
transformer('JS is best', oneWord);

// JS uses callbacks all the time.
const hi5 = function(){
  console.log("Hi");
};
document.body.addEventListener('click', hi5);

// forEach will be exectued for each value in the array.
['Alpha','Beta','Gamma','Delta','Eeta'].forEach(hi5);

Fns renvoyant un autre fn.

// A fn returning another fn.
const greet = function(greeting){
  return function(name){
    console.log(`${greeting} ${name}`);
  }
}

const userGreet = greet('Hey');
userGreet("Alice");
userGreet("Lola");

// Another way to call
greet('Hello')("Lynda");

// Closures are widely used in Fnal programming paradigm.

// Same work using Arrow Fns. Below is one arrow fn returning another arrow fn.
const greetArr = greeting => name => console.log(`${greeting} ${name}`);

greetArr('Hola')('Roger');

"Vous ne progresserez qu'une fois que vous aurez bien compris un certain sujet"

call(), apply(), bind() :

Utilisé pour définir le mot-clé « ce » en définissant explicitement sa valeur.
call - prend une liste d'arguments après la valeur du mot-clé 'this'.
apply - prend un tableau d'arguments après la valeur du mot-clé 'this'. Il prendra des éléments de ce tableau et les transmettra aux fonctions.

bind() : Cette méthode crée une nouvelle fonction avec le mot-clé this lié à l'objet spécifié. La nouvelle fonction conserve le contexte défini par .bind() quelle que soit la manière dont la fonction est invoquée.

call() et apply() : ces méthodes appellent une fonction avec une valeur et des arguments spécifiés. La différence entre eux est que .call() prend les arguments sous forme de liste, tandis que .apply() prend les arguments sous forme de tableau.

const lufthansa = {
  airline: 'Lufthansa',
  iataCode: 'LH',
  bookings: [],
  book(flightNum, name){
    console.log(`${name} booked a seat on ${this.airline} flight ${this.iataCode} ${flightNum}`);
    this.bookings.push({flight: `${this.iataCode} ${flightNum}`, name});
  },
};

lufthansa.book(4324,'James Bond');
lufthansa.book(5342,'Julie Bond');
lufthansa;


const eurowings = {
  airline: 'Eurowings',
  iataCode: 'EW',
  bookings: [],
};

// Now for the second flight eurowings, we want to use book method, but we shouldn't repeat the code written inside lufthansa object.

// "this" depends on how fn is actually called.
// In a regular fn call, this keyword points to undefined.
// book stores the copy of book method defuned inside the lufthansa object.
const book = lufthansa.book;

// Doesn't work
// book(23, 'Sara Williams');

// first argument is whatever we want 'this' object to point to.
// We invoked the .call() which inturn invoked the book method with 'this' set to eurowings 
// after the first argument, all following arguments are for fn.
book.call(eurowings, 23, 'Sara Williams');
eurowings;

book.call(lufthansa, 735, 'Peter Parker');
lufthansa;

const swiss = {
  airline: 'Swiss Airlines',
  iataCode: 'LX',
  bookings: []
}

// call()
book.call(swiss, 252, 'Joney James');

// apply()
const flightData = [652, 'Mona Lisa'];
book.apply(swiss, flightData);

// Below call() syntax is equivalent to above .apply() syntax. It spreads out the arguments from the array.
book.call(swiss, ...flightData);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!