JSJS Memo🎙️ Coach

Javascript

JavaScript est un langage de programmation utilisé pour créer des applications web interactives et côté client. Il utilise un modèle de programmation asynchrone pour gérer les tâches en parallèle sans bloquer le fil d'exécution principal, et il est single Thread.

Event loop

L'Event Loop (ou boucle d'événements en français) est un mécanisme du modèle de programmation asynchrone de JavaScript. Il s'agit d'un processus qui s'exécute en arrière-plan et qui permet à JavaScript de gérer les événements et les tâches en parallèle, sans bloquer le fil d'exécution principal.

Lorsqu'un programme JavaScript est exécuté, toutes les tâches sont ajoutées à une pile d'appels (appelée "call stack" en anglais), qui est gérée par le moteur de JavaScript. Lorsque le moteur de JavaScript traite la pile d'appels, il exécute chaque fonction séquentiellement, en commençant par la fonction en haut de la pile.

Cependant, certaines tâches en JavaScript sont asynchrones, ce qui signifie qu'elles peuvent être exécutées indépendamment de la pile d'appels. Les exemples courants de tâches asynchrones incluent les événements de souris ou de clavier, les requêtes réseau.

C'est là que l'Event Loop entre en jeu. Lorsqu'une tâche asynchrone est en cours d'exécution, elle est placée dans une file d'attente appelée "queue" (ou "task queue" en anglais). Une fois que la pile d'appels est vide, l'Event Loop vérifie la file d'attente pour savoir si des tâches asynchrones sont en attente d'exécution. Si tel est le cas, l'Event Loop retire la tâche de la queue et la place sur callstack pour qu'elle soit exécutée.

Ce processus de mise en file d'attente et de traitement des tâches asynchrones se poursuit tant qu'il y a des tâches en attente dans la file d'attente. L'Event Loop permet ainsi à JavaScript de gérer les événements et les tâches en parallèle, sans bloquer le fil d'exécution principal et de maintenir une interface utilisateur réactive pour les utilisateurs.

Prototype

En JavaScript, chaque objet possède une propriété interne appelée [[Prototype]] qui est une référence vers un autre objet. Le prototype est utilisé pour établir la chaîne de prototypes, également connue sous le nom de chaîne d'héritage. L'objet référencé par [[Prototype]] est appelé le prototype de l'objet.

Prototype Chain

En JavaScript, chaque objet a une référence interne vers son prototype, qui est un autre objet. Le prototype d'un objet peut avoir son propre prototype, créant ainsi une chaîne de prototypes appelée "prototype chain".

Lorsqu'on accéde à une propriété d'un objet, JavaScript recherche d'abord cette propriété dans l'objet lui-même. Si la propriété n'est pas trouvée, JavaScript recherche la propriété dans le prototype de l'objet. Si la propriété n'est toujours pas trouvée, elle recherche la propriété dans le prototype du prototype, et ainsi de suite, jusqu'à ce que la propriété soit trouvée ou que la fin de la chaîne de prototype soit atteinte.

L'avantage de la chaîne de prototype est qu'elle permet aux objets de partager des propriétés et des méthodes. Par exemple, on peut créer un objet "Animal" avec des propriétés et des méthodes communes à tous les animaux, et créer ensuite des objets "Chien", "Chat", "Oiseau" qui héritent de l'objet "Animal". Cela évite de répéter du code et facilite la gestion de notre code.

Prototype Vs Chain

"prototype" fait référence à l'objet prototype d'une fonction constructeur ou d'un objet, tandis que "prototype chain" fait référence à la chaîne de prototypes qui est créée lorsqu'un objet est créé à partir d'un objet prototype. La chaîne de prototypes permet à chaque objet de partager des propriétés et des méthodes

Prototype Vs Héritage

Le prototype d'un objet est un objet qui sert de modèle pour la création d'autres objets. Lorsqu'un objet est créé à partir d'un prototype, il hérite des propriétés et des méthodes de ce prototype.elles permettent de créer des objets partageant des fonctionnalités communes sans avoir à répéter du code.

L'héritage, c'est un processus par lequel un objet hérite des propriétés et des méthodes d'un autre objet ou d'un prototype. En JavaScript, l'héritage se fait via la chaîne de prototypes.

Itérators(Iterateurs)

les itérateurs (ou "iterables") sont des objets qui fournissent une méthode next() pour parcourir une séquence d'éléments. Les itérateurs sont utilisés dans les boucles for...of pour parcourir des collections d'éléments tels que des tableaux, des chaînes de caractères, Un objet est considéré comme un itérateur s'il possède une méthode next() qui renvoie un objet avec deux propriétés : value, qui représente la valeur actuelle de l'itérateur, et done, qui indique si l'itération est terminée ou non.

Generator

Les générateurs (ou "generators") sont des fonctions qui permettent de créer des itérateurs personnalisés. Les générateurs sont créés avec le mot-clé function* et utilisent l'instruction yield pour renvoyer une valeur à chaque étape de l'itération.

Les générateurs peuvent être utilisés pour créer des séquences de valeurs à la volée ou pour créer des pipelines de traitement de données

Hosting

qui permet aux déclarations de variables et de fonctions d'être déplacées en haut de leur portée avant l'exécution du code. C'est-à-dire que les déclarations de variables et de fonctions sont "élevées" en haut de leur portée, avant tout autre code, même si elles sont déclarées plus tard dans le code.

Objet Mutable

Un objet mutable est un objet qui peut être modifié, dont on peut changer les propriétés une fois qu'il a été défini.

Objet Immutable

Les objets immuables (*immutable*) sont des objets dont l'état ne peut être modifié une fois l'objet créé.( Chaînes de caractères et nombres sont immuables.)

Ce concept permet de s'assurer de la valeur des variables du début à la fin de nos actions. Cela va permettre d'avoir un code plus robuste et plus stable, donc moins de bugs et moins de maintenances. Tout au long de notre script les variables ne peuvent être modifiées.

Programmation fonctionnelle

La programmation fonctionnelle est un paradigme de programmation qui traite le calcul comme l'évaluation de fonctions mathématiques. Elle évite les états changeants et les données mutables. En JavaScript, la programmation fonctionnelle est réalisable par à des fonctions de première classe et à des fonctions d'ordre supérieur.

Principe de programmation fonctionnelle

function pure, Immutabilité,Absence d'effets de bord, Composition des fonctions

Fonctions de première classe

Les fonctions sont des valeurs de première classe, ce qui signifie qu'on peut les assigner à des variables, les passer en tant qu'arguments et les retourner depuis d'autres fonctions.

Fonctions d'ordre supérieur Ce sont des fonctions qui prennent une ou plusieurs fonctions comme arguments, ou renvoient une fonction.(map,reduce, filter)

Composition de fonctions

Créez de nouvelles fonctions en combinant d'autres fonctions.

Function Pure

function Pure : est une fonction qui retourne toujours le même résultat pour des paramètres identiques, et qui ne dépend pas et ne modifie pas l'état des variables hors de sa portée. Elle n'a pas d'effets de bord, c'est-à-dire qu'elle ne modifie pas l'état de l'application à l'extérieur de la fonction.

Cela signifie que les fonctions pures ne peuvent pas effectuer d'actions qui ont des effets secondaires, comme l'envoi d'une requĂŞte HTTP.

En évitant les effets de bord, les fonctions pures sont plus faciles à comprendre, à tester et à raisonner, car leur comportement est prévisible et ne dépend pas de l'état global de l'application.

Function Impure

function impure est une fonction qui a au moins un effet de bord, c'est-à-dire qu'elle modifie l'état de l'application en dehors de la fonction elle-même.

Cependant, il est souvent nécessaire d'avoir des fonctions impures dans un programme, car il est souvent nécessaire de modifier l'état de l'application pour accomplir une tâche, comme la mise à jour d'une base de données

[DOC PROGRAMMATION FONCTIONNELLE](https://buzut.net/programmation-fonctionnelle-en-javascript/) – ([OTHER DOCS](https://grafikart.fr/tutoriels/programmation-fonctionnelle-878))

Side Effect

Effet de bord est une action réalisée par une fonction qui affecte l'état de l'application en dehors de la fonction elle-même. Autrement dit, un effet de bord est un effet indirect ou secondaire d'une fonction qui peut avoir des conséquences imprévues sur le comportement du programme.

Les fonctions pures sont un moyen de minimiser les effets de bord dans le code. En retournant toujours le même résultat pour des entrées identiques et en ne modifiant pas l'état de l'application à l'extérieur de la fonction, elles sont plus prévisibles, plus faciles à tester et à raisonner, et elles encouragent une organisation modulaire du code.

Closure

Closure de fonction permet (ça sert) à isoler une partie ou à vrai dire une variable dans ton programme, ce qui peut aider à éviter les collisions de noms et à rendre le code plus sûr.

Bind function

La fonction bind() est utilisée pour créer une nouvelle fonction qui, lorsqu'elle est appelée, a un this prédéfini. La méthode bind() renvoie une nouvelle fonction avec un contexte this lié à l'objet passé en argument lors de l'appel de bind().

Call function

Function Call est une méthode intégrée des fonctions qui permet d'appeler une fonction en spécifiant l'objet à utiliser comme valeur de this, ainsi que les arguments à passer à la fonction.

function Food(name, price) { Product.call(this, name, price); this.category \= 'food'; }

console.log(new Food('cheese', 5).name); // expected output: "cheese"

Apply function

est une méthode intégrée des fonctions qui permet d'appeler une fonction en lui passant une valeur this et des arguments sous forme d'un tableau.

La méthode apply() est similaire à la méthode call(), mais elle permet de passer les arguments sous forme d'un tableau plutôt qu'en tant que liste d'arguments séparés par des virgules

const numbers \= [5, 6, 2, 3, 7];

const max \= Math.max.apply(null, numbers);

console.log(max);

Call Vs apply VS Bind

La principale différence entre la méthode call() et la méthode apply() réside dans la façon dont les arguments sont passés à la fonction appelée.

La méthode call() prend une liste d'arguments séparés par des virgules, tandis que la méthode apply() prend un unique tableau d'arguments.

Cependant, la méthode apply() est plus pratique lorsque les arguments sont stockés dans un tableau ou lorsqu'on ne connaît pas à l'avance le nombre d'arguments à passer à la fonction.

—------- la méthode bind() est utilisée pour créer une nouvelle fonction avec une valeur de this spécifiée en permanence et des arguments pré-remplis.

—--------

Currying function

Curying est une technique de transformation de fonctions qui consiste à réécrire une fonction qui prend plusieurs arguments en une séquence de fonctions qui prend chacune un seul argument. Cela permet de fixer certains arguments de la fonction à l'avance, ce qui peut être très utile pour créer des configurations spécifiques de fonctions sans répéter du code. Le currying peut rendre le code plus expressif et réduire la redondance

Promise

Promise est un objet qui est utilisé pour réaliser des traitements de façon asynchrone. Une Promise représente une valeur qui peut être disponible maintenant, dans le futur ou jamais.

Une Promise peut être dans l'un des trois états suivants :

  • pending (en attente) : C'est l'Ă©tat initial de la Promise. Cela signifie que la promesse n'est ni remplie ni rompue. Elle est en attente de la rĂ©alisation d'une action asynchrone.
  • fulfilled (tenue) : Cela signifie que l'opĂ©ration asynchrone a rĂ©ussi et que la Promise a Ă©tĂ© rĂ©solue avec une valeur.
  • rejected (rompue) : Cela signifie que l'opĂ©ration asynchrone a Ă©chouĂ© et que la Promise a Ă©tĂ© rejetĂ©e avec une raison.

Une Promise peut également être dans l'état settled (acquittée), ce qui signifie que la promesse est tenue ou rompue mais qu'elle n'est plus en attente.

Callback

Callback est une fonction qui est passée en tant qu'argument à une autre fonction et qui est appelée ultérieurement lorsque cette fonction a fini de s'exécuter.

Le callback permet de gérer les opérations asynchrones en spécifiant une fonction à appeler une fois que l'opération asynchrone est terminée et que les résultats sont disponibles.

Callback Vs Promises

Callbacks et Promises sont deux mécanismes qui permettent de gérer l'exécution asynchrone du code en JavaScript. Voici les principales différences entre les deux :

  • Syntaxe : Les callbacks sont des fonctions qui sont passĂ©es en tant qu'argument Ă  une autre fonction. Les Promises sont des objets qui sont créés avec le constructeur Promise.
  • Gestion des erreurs : Avec les callbacks, la gestion des erreurs peut ĂŞtre complexe et sujette Ă  des problèmes de rappel en cascade (callback hell). Les Promises permettent une gestion plus facile des erreurs en utilisant les mĂ©thodes then() et catch() pour gĂ©rer les cas de rĂ©ussite et d'Ă©chec.
  • EnchaĂ®nement : Avec les callbacks, l'enchaĂ®nement de plusieurs opĂ©rations asynchrones peut ĂŞtre difficile et peut entraĂ®ner une indentation excessive du code (callback hell). Les Promises permettent un enchaĂ®nement plus facile des opĂ©rations asynchrones en utilisant les mĂ©thodes then() et catch() pour retourner de nouvelles Promises.
  • LisibilitĂ© du code : Les Promises peuvent rendre le code plus lisible et plus facile Ă  comprendre en utilisant une syntaxe plus claire et en Ă©vitant les rappels en cascade (callback hell).

setTimeout Vs Promise

Les Promise sont exécutées dans la microtask queue (prioritaire), alors que setTimeout est dans la task queue.

Mode Strict

Le mode strict permet de choisir une variante restrictive de JavaScript. Le mode strict apporte quelques changements à la sémantique « normale » de JavaScript:

  • Le mode strict Ă©limine quelques erreurs silencieuses de JavaScript en les changeant en erreurs explicites (une exception sera levĂ©e).
  • Le mode strict corrige les erreurs qui font qu'autrement il est difficile pour les moteurs JavaScript d'effectuer des optimisations. Le code sera donc exĂ©cutĂ© plus rapidement en mode strict, sans changer une seule ligne si cela n'est pas nĂ©cessaire.

Reduce

Reduce() est un accumulateur" qui traite chaque valeur d'une liste (de gauche à droite) pour la réduire à une seule valeur. La méthode reduce() prend comme argument une fonction callback qui est exécutée sur chaque élément de la liste,

On peut également utiliser reduce() pour mettre en œuvre des fonctions de transformation et de filtrage, en utilisant la fonction de callabck pour exécuter la transformation ou le filtrage sur chaque élément de la liste avant de l'accumuler dans l'accumulateur.

Map

Map() est une méthode qui crée un nouveau tableau avec les résultats d'une fonction fournie sur chaque élément du tableau appelant.

La méthode map() prend en argument une fonction de rappel (callback) qui est exécutée sur chaque élément du tableau d'origine.

Filter

Filter() crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction callback.

La méthode Filter() prend en argument une fonction de rappel (callback) qui est exécutée sur chaque élément du tableau d'origine.

Le nouveau tableau peut avoir une longueur différente du tableau d'origine.

Some

Some() est une méthode de tableau qui permet de vérifier si au moins un élément d'un tableau satisfait une condition donnée par une fonction de test.

La méthode some() retourne finalement un booléen qui indique si au moins un élément du tableau satisfait la condition de recherche ou non. Elle retourne true si au moins un élément satisfait la condition, false sinon.

Find

La méthode find() renvoie la valeur du premier élément trouvé dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur undefined est renvoyée.(number > 3 pour trouver les nombres supérieurs à 3)

Fill

Fill() est une méthode qui permet de remplir tous les éléments d'un tableau avec une valeur statique.

La méthode fill() retourne finalement le tableau modifié avec les éléments remplis.

Slice

Slice() est une méthode des tableaux (Array) qui permet de créer une copie superficielle (shallow copy) d'une portion spécifique d'un tableau, sans modifier le tableau d'origine.

Elle renvoie un nouveau tableau contenant les éléments extraits du tableau d'origine.

Push

(element1, ..., elementN): Ajoute un ou plusieurs éléments à la fin du tableau.

Pop

Supprime le dernier élément d'un tableau et le retourne.

Shift

shift(): Supprime le premier élément d'un tableau et le retourne.

Unshift

unshift(element1, ..., elementN): Ajoute un ou plusieurs éléments au début du tableau.

Splice

(index, howMany, [element1[, ...[, elementN]]]): Change le contenu d'un tableau en supprimant, remplaçant ou ajoutant des éléments.

Concat

concat(array2, array3, ..., arrayN): Fusionne deux ou plusieurs tableaux

Object.assign

Object.assign() est utilisée afin de copier les valeurs de toutes les propriétés directes (non héritées) d'un objet qui sont énumérables sur un autre objet cible. Cette méthode renvoie l'objet cible.

La méthode Object.assign() prend au moins deux arguments : l'objet cible et un ou plusieurs objets sources. Elle copie les propriétés énumérables de chaque objet source dans l'objet cible, et écrase les propriétés existantes de même nom.

Object.freeze

Object.freeze() permet de geler un objet, c'est-à-dire qu'on empêche d'ajouter de nouvelles propriétés, de supprimer ou d'éditer des propriétés existantes. Toute tentative échouera, silencieusement ou via une exception TypeError (la plupart du temps en mode strict).

La méthode Object.freeze() prend en argument l'objet à geler. Elle modifie l'objet d'origine en le rendant immuable. Toutes les propriétés de l'objet sont rendues non modifiables et non supprimables

Object.entries Vs .fromEntries

Object.entries(obj) : transforme un objet en tableau de paires [clé, valeur].

Object.fromEntries(arr) : transforme un tableau [clé, valeur] en objet.

Object.seal

Il empêche l'ajout ou la suppression de propriétés. il permet toujours de modifier les valeurs des propriétés existantes.

Entries

La méthode entries() renvoie un nouvel objet de type Array Iterator qui contient le couple clef/valeur pour chaque éléments du tableau.

La méthode entries() retourne finalement un objet itérateur qui peut être utilisé pour parcourir les paires clé-valeur du tableau à l'aide de boucles for...of ou de méthodes d'itération telles que map(), filter(), etc.

Function

Une fonction est un processus qui prend une entrée, appelée arguments , et produit une sortie appelée valeur de retour . Les fonctions peuvent servir les objectifs suivants :

  • Mappage : produit une sortie basĂ©e sur des entrĂ©es donnĂ©es. Une fonction mappe les valeurs d'entrĂ©e aux valeurs de sortie.
  • ProcĂ©dures : une fonction peut ĂŞtre appelĂ©e pour exĂ©cuter une sĂ©quence d'Ă©tapes. La sĂ©quence est connue sous le nom de procĂ©dure, et la programmation dans ce style est connue sous le nom de programmation procĂ©durale .
  • I/O : certaines fonctions existent pour communiquer avec d'autres parties du système, telles que l'Ă©cran, le stockage, les journaux système ou le rĂ©seau.

ES6

Les nouveautés de ES6

  • Les variables dĂ©clarĂ©es let et const
  • Les classes
  • Modules(import / export)
  • Les fonctions flĂ©chĂ©es
  • Paramètres par dĂ©faut pour les fonctions
  • Rest paramètre
  • Spread paramètre
  • Les templates Strings (back sticks)
  • Les destructuring

Const Vs Let Vs Var

CONST

  • Const a besoin d'ĂŞtre dĂ©clarĂ© avec une valeur initiale. La portĂ©e de const est celle du bloc
  • On ne peut pas changer sa valeur après dĂ©claration
  • Avec const pour objet, on peut changer les propriĂ©tĂ©s d'un objet existant mais ne pas RĂ©assigner un nouvel objet
  • Const n'est pas hosting

LET

  • Il n'est pas obligatoire de dĂ©clarer une variable avec sa valeur initiale.
  • On peut modifier sa valeur après sa dĂ©claration
  • Elle est limitĂ©e Ă  celle du bloc courant
  • LET n'est pas hosting

VAR : permet de déclarer des variables qui ont une portée globale ou de fonction, c'est-à-dire qu'elles peuvent être utilisées partout dans le code à l'intérieur de leur portée. Les variables var peuvent être réaffectées avec une nouvelle valeur. Si une variable var est déclarée sans être initialisée, elle aura la valeur undefined.

Arrow Vs Regular function

La fonction fléchée à deux particuliers :

  • La syntaxe est beaucoup plus rapide
  • Elle va fixer la valeur de this automatiquement

Différence entre arrow et normal function

les principales différences entre les deux :

  • Syntaxe : Les fonctions rĂ©gulières sont dĂ©finies Ă  l'aide du mot-clĂ© function, suivi du nom de la fonction et de ses paramètres entre parenthèses, puis du corps de la fonction entre des accolades {}. Les fonctions flĂ©chĂ©es sont dĂ©finies Ă  l'aide de la notation () \=> {}, avec les paramètres entre les parenthèses et le corps de la fonction entre des accolades {}.
  • Liaison du mot-clĂ© this : Dans les fonctions rĂ©gulières, le mot-clĂ© this est dĂ©terminĂ© par la façon dont la fonction est appelĂ©e, ce qui peut parfois causer des problèmes de liaison. Dans les fonctions flĂ©chĂ©es, le mot-clĂ© this est liĂ© au contexte lexical dans lequel la fonction est dĂ©finie, ce qui Ă©vite les problèmes de liaison.
  • Utilisation de arguments : Les fonctions rĂ©gulières ont accès Ă  l'objet arguments, qui contient les paramètres passĂ©s Ă  la fonction, ce qui n'est pas possible avec les fonctions flĂ©chĂ©es.

REST Operator

L'opérateur REST(…variable) permet de convertir(ou transformer) la valeur libre(nombre indéfini) d'arguments sous forme d'un tableau.

SPREAD Operator

L'opérateur SPREAD, c'est l'inverse de l'opérateur REST, il prend le tableau, il va nous transformer ce tableau en valeur libre

Avec SPREAD, On pourra aussi créer un nouvel Tableau à partir d'un ancien

Destructruring

Destructuring qui permet d'extraire des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet.

  • Destructuring Arrays
  • Destructuring Objet

Remarque La différence entre destructuring tableau et Objet, Pour les tableaux on repose sur les notions d'ordre (on connait l'élément qui se trouve en première position, n position, quand on faisait une destructuring du tableau, on pouvait dire la variable a comme l'écrit en première elle va contenir la première valeur de mon Tableau) Dans les objets, il n'y a pas d'ordre, ce qu'important dans l'objet c'est de la propriété.

LocalStorage Vs SessionStorage

Différence entre LocalStorage et SessionStorage

localStorage et sessionStorage sont utiles pour la persistance d'informations non sensibles entre les pages.

| LocalStorage | SessionStorage | | ----- | ----- | | L'information est constamment stockée dans le navigateur, c'est-à-dire si l'utilisateur ferme le navigateur et rentre sur le Web, les informations seront toujours disponibles. | L'information ne dure que pendant la durée de session du navigateur. La fermeture de la fenêtre entraînera donc la perte de l'information. |

Cookies

Les cookies peuvent également être lus par l'utilisateur et aucune information compromise ne doit être stockée. Ce type d'information doit toujours être sauvegardé dans la session du serveur. De plus, comme les cookies sont habituellement utilisés pour l'authentification, tous les cookies valides pour une page sont envoyés du navigateur au serveur sur chaque demande dans le même domaine.

CORS

Le « Cross-origin resource sharing » (CORS) ou « partage des ressources entre origines multiples » (en français, moins usité) est un mécanisme qui consiste à ajouter des en-têtes HTTP afin de permettre à un agent utilisateur d'accéder à des ressources d'un serveur situé sur une autre origine que le site courant.

FETCH Vs XHR

On utilise XMLHttpRequest ou Fetch pour requêter des données JSON. L'API Fetch est une solution moderne qui vient remplacer XHR XHR bénéficie d'un très bon support sur les différents navigateurs. Fetch et les promesses, en revanche, sont un ajout plus récent à la plateforme web, bien qu'ils soient pris en charge par la plupart des navigateurs, Internet Explorer et Safari font exception.

Foreach Vs Map

En javascript, forEach est beaucoup plus lent que map Si je résume les différences clées entre les 2 façons de faire :

  • map est plus performant que forEach
  • map permet de gĂ©rer l'immutabilitĂ© car elle retourne un nouvel array — map permet de gĂ©rer l'immutabilitĂ© car elle retourne un nouvel array
  • Vous ĂŞtes obligĂ© de gĂ©rer avec la dĂ©structuration d'array en ES6 pour gĂ©rer l'immutabilitĂ© du forEach

Substring Vs substr

  • Les mĂ©thodes substring() et [slice()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/slice) sont très proches mais certaines diffĂ©rences les distinguent, notamment la façon de gĂ©rer les arguments nĂ©gatifs.
  • La mĂ©thode substring() Ă©changera les deux arguments si indiceA est supĂ©rieur Ă  indiceB et renverra donc une chaĂ®ne de caractères. La mĂ©thode [slice()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/slice) n'Ă©change pas les arguments et renvoie donc une chaĂ®ne vide si le premier est supĂ©rieur au second

Axios Vs Fetch

  • Axios effectue des transformations automatiques des donnĂ©es JSON .
  • Fetch est un processus en deux Ă©tapes lors de la gestion des donnĂ©es JSON – d'abord, pour faire la demande rĂ©elle ; deuxièmement, pour appeler la mĂ©thode .json() sur la rĂ©ponse.

For …of Vs …in

for...of et for...in sont deux méthodes pour parcourir des objets itérables tels que les tableaux et les objets.

  • La boucle for...of est utilisĂ©e pour parcourir les valeurs d'un objet itĂ©rable
  • La boucle for...in est utilisĂ©e pour parcourir les propriĂ©tĂ©s d'un objet itĂ©rable

Pomise All Vs Settled

En JavaScript, Promise.all et Promise.allSettled sont deux méthodes utilisées pour gérer plusieurs promesses simultanément, mais elles diffèrent dans leur comportement vis-à-vis des résultats et des erreurs des promesses qu'elles traitent.

Promise.all prend un tableau de promesses et retourne une nouvelle promesse qui résout lorsque toutes les promesses dans le tableau sont résolues ou rejette. Résolution : Si toutes les promesses dans le tableau sont résolues, Promise.all retourne une promesse qui résout avec un tableau contenant les valeurs de résolution de chaque promesse, dans le même ordre que les promesses fournies. Rejet : Si une des promesses dans le tableau est rejetée, Promise.all retourne immédiatement une promesse qui est rejetée avec la raison de rejet de la première promesse qui échoue. Elle ne attend pas que les autres promesses soient résolues ou rejetées.

Promise.allSettled prend un tableau de promesses mais retourne une promesse qui résout après que toutes les promesses données ont soit été résolues, soit rejetées. Cette méthode est utile lorsqu'on veut attendre la fin de toutes les promesses, indépendamment de leur résultat. Résolution : Promise.allSettled retourne toujours une promesse qui résout avec un tableau de résultats pour chaque promesse. Chaque résultat est un objet qui représente soit le succès soit l'échec de chaque promesse, contenant les propriétés status, value (pour les résolutions) ou reason (pour les rejets). Gestion des erreurs : Contrairement à Promise.all, Promise.allSettled ne rejette jamais en raison de l'échec d'une promesse dans le tableau. Elle permet de traiter chaque résultat individuellement après que toutes les promesses sont complétées.

Promise.race() retourne le premier résultat (réussi ou échoué).

Programmation Déclarative Vs Impératif

[Lien Ă  voir](https://fr.acervolima.com/difference-entre-la-programmation-imperative-et-declarative/) - [Voir](https://blog.arcoptimizer.com/javascript-de-programmation-fonctionnelle)

La programmation déclarative est un paradigme de programmation où nous spécifions la logique du programme sans décrivant le contrôle de flux. La programmation déclarative concerne ce qu' faire pour obtenir un certain résultat. (Erlang, Haskell)

La programmation impérative est un paradigme de programmation où nous spécifions la logique du programme décrivant le contrôle de flux. La programmation impérative consiste à comment obtenir un certain résultat. Les langages de programmation Fortran, [Java](https://www.geeksforgeeks.org/java/) , [C](https://www.geeksforgeeks.org/c-programming-language/) , [C++](https://www.geeksforgeeks.org/c-plus-plus/) sont des exemples de programmation impérative.

Passage par Référence Vs Valeur

Par valeur En JavaScript, les valeurs de type primitif (tels que les nombres, les chaînes de caractères, etc.) sont copiées par valeur lorsqu'elles sont affectées à une variable ou passées en tant qu'argument à une fonction. Cela signifie que lorsque vous affectez une valeur de type primitif à une variable, une copie de cette valeur est créée et assignée à la variable. Si vous modifiez la valeur d'origine, cela n'aura aucun effet sur la valeur de la copie.

let x \= 2; let y \= x; // y contient une copie de la valeur de x (2)

x \= 3; // x contient maintenant une nouvelle valeur (3)

console.log(y); // affiche 2, car y contient toujours une copie de la valeur originale de x (2)

Par référence

Lorsque vous assignez une valeur à une variable en JavaScript en utilisant l'opérateur d'affectation "=", la variable ne contient pas une copie de la valeur, mais plutôt une référence à cette valeur. Cela signifie que si la valeur référencée est modifiée, la modification sera visible via toutes les variables qui référencent cette valeur. Dans le code que vous avez fourni, lorsque vous affectez la valeur de arr à arrayCopy, vous ne faites pas une copie de l'array, mais vous créez une référence à l'array existant. Lorsque vous modifiez l'array en ajoutant l'élément "banane" à l'aide de la méthode push(), cette modification est visible via toutes les références à cet array, y compris la référence arrayCopy. Pour créer une copie de l'array, vous pouvez utiliser la méthode slice() de l'objet Array ou utiliser l'une des méthodes de spread operator (...) de l'ES6.

En JavaScript, lorsque vous passez une valeur à une fonction en tant qu'argument, la valeur est copiée et passée à la fonction. Cependant, si vous passez une référence à un objet (c'est-à-dire une instance d'un objet créée en utilisant le mot-clé new ou une expression literal object), une référence à cet objet est passée à la fonction plutôt qu'une copie de l'objet lui-même. Cela signifie que si vous modifiez l'objet à l'aide de la référence dans la fonction, ces modifications seront visibles en dehors de la fonction.

ES7

Les nouveautés de ES7

  • L'opĂ©rateur pour l'exponentiation:

Cet opérateur vous permet d'élever un nombre à la puissance d'un autre. C'est essentiellement un raccourci pour Math.pow().

  • Array.prototype.includes:

La méthode includes() détermine si un tableau contient un certain élément, renvoyant true ou false selon le cas.

ES8

  • ## Async/Await

les fonctions async et await, qui simplifient la manipulation des opérations asynchrones et les promesses.

Ces méthodes ont été ajoutées pour faciliter l'accès aux valeurs et aux entrées (paires clé-valeur) d'un objet.

  • ## String padding

les méthodes padStart et padEnd pour les chaînes de caractères, permettant d'ajouter du remplissage au début ou à la fin d'une chaîne.

  • ## Object.getOwnPropertyDescriptors()

Cette méthode retourne un objet dont les propriétés sont des descripteurs de toutes les propriétés propres (non héritées) d'un objet donné.

Deep copy et shallow copy

Shallow copy : copie de premier niveau. Les objets imbriqués ne sont pas copiés.

Deep copy : copie récursive de tous les niveaux.

Event delegation

Plutôt que d'ajouter des listeners à chaque élément enfant, on les ajoute sur le parent et on intercepte les événements qui "bubblent".

Nullish coalescing

a ?? b retourne a si a n'est pas null ou undefined, sinon retourne b.

Bubbling/capturing/Target

Capturing phase : l'événement descend du document vers la cible.

Target phase : l'événement atteint l'élément cible.

Bubbling phase : l'événement remonte de la cible jusqu'au document.

Par défaut, les événements écoutés se produisent en phase de bubbling (addEventListener sans capture: true).

Debouncing/Throttling

  • Debouncing : attend une pĂ©riode d'inactivitĂ© pour exĂ©cuter la fonction.
  • Throttling : limite l'exĂ©cution d'une fonction Ă  un appel toutes les X ms.

Utilisation :

  • Throttle : scroll, resize events.
  • Debounce : input search, autocomplete.

HasOwnProperty Vs in

  • hasOwnProperty teste uniquement les propriĂ©tĂ©s propres (pas hĂ©ritĂ©es).
  • in teste les propriĂ©tĂ©s propres et les propriĂ©tĂ©s hĂ©ritĂ©es.

WeakMap et WeakSet

  • WeakMap : clefs objets non comptĂ©es dans le GC (Garbage Collector).
  • WeakSet : pareil pour ensembles.

Utile pour stocker des données privées ou des références légères sans empêcher l'objet d'être détruit.

Quand obj est supprimé, weakMap libère sa valeur automatiquement.