From 2ccc8a5957a9e53762811e6d5f5df492edc810ea Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Thu, 27 Jul 2023 01:16:37 -0700 Subject: [PATCH] fr: Format /web/javascript using Prettier (part 1) --- files/fr/web/javascript/closures/index.md | 155 +++++----- .../web/javascript/data_structures/index.md | 11 +- .../index.md | 138 +++++---- .../index.md | 12 +- files/fr/web/javascript/event_loop/index.md | 28 +- .../control_flow_and_error_handling/index.md | 56 ++-- .../guide/expressions_and_operators/index.md | 276 +++++++++--------- .../web/javascript/guide/functions/index.md | 188 ++++++------ .../guide/grammar_and_types/index.md | 149 +++++----- .../guide/indexed_collections/index.md | 265 +++++++++-------- .../javascript/guide/introduction/index.md | 4 +- .../guide/iterators_and_generators/index.md | 70 +++-- .../guide/keyed_collections/index.md | 2 +- .../guide/loops_and_iteration/index.md | 48 +-- .../guide/meta_programming/index.md | 24 +- .../fr/web/javascript/guide/modules/index.md | 141 +++++---- .../guide/numbers_and_dates/index.md | 74 ++--- .../regular_expressions/assertions/index.md | 21 +- .../regular_expressions/cheatsheet/index.md | 2 +- .../groups_and_backreferences/index.md | 10 +- .../guide/regular_expressions/index.md | 73 ++--- .../javascript/guide/text_formatting/index.md | 68 +++-- .../javascript/guide/typed_arrays/index.md | 26 +- .../javascript/guide/using_promises/index.md | 143 +++++---- .../guide/working_with_objects/index.md | 121 ++++---- .../index.md | 48 +-- .../web/javascript/language_overview/index.md | 154 +++++----- .../web/javascript/memory_management/index.md | 41 +-- .../reference/classes/constructor/index.md | 36 +-- .../reference/classes/extends/index.md | 22 +- .../web/javascript/reference/classes/index.md | 52 ++-- .../classes/private_class_fields/index.md | 96 +++--- .../classes/public_class_fields/index.md | 108 +++---- .../reference/classes/static/index.md | 18 +- .../static_initialization_blocks/index.md | 18 +- .../deprecated_and_obsolete_features/index.md | 22 +- .../errors/already_has_pragma/index.md | 2 +- .../errors/array_sort_argument/index.md | 14 +- .../reference/errors/bad_radix/index.md | 10 +- .../reference/errors/bad_regexp_flag/index.md | 16 +- .../reference/errors/bad_return/index.md | 4 +- .../errors/bigint_division_by_zero/index.md | 2 +- .../errors/bigint_negative_exponent/index.md | 2 +- .../called_on_incompatible_type/index.md | 16 +- .../index.md | 24 +- .../errors/cant_assign_to_property/index.md | 4 +- .../index.md | 2 +- .../cant_convert_bigint_to_number/index.md | 2 +- .../errors/cant_convert_x_to_bigint/index.md | 2 +- .../index.md | 16 +- .../reference/errors/cant_delete/index.md | 16 +- .../errors/cant_redefine_property/index.md | 8 +- .../index.md | 6 +- .../errors/cyclic_object_value/index.md | 2 +- .../errors/delete_in_strict_mode/index.md | 4 +- .../index.md | 22 +- .../errors/deprecated_octal/index.md | 2 +- .../reference/errors/equal_as_assign/index.md | 4 +- .../reference/errors/getter_only/index.md | 24 +- .../errors/hash_outside_class/index.md | 15 +- .../errors/identifier_after_number/index.md | 4 +- .../errors/illegal_character/index.md | 8 +- .../errors/in_operator_no_object/index.md | 2 +- .../errors/invalid_array_length/index.md | 21 +- .../index.md | 8 +- .../errors/invalid_bigint_syntax/index.md | 2 +- .../errors/invalid_const_assignment/index.md | 6 +- .../reference/errors/invalid_date/index.md | 12 +- .../invalid_for-in_initializer/index.md | 6 +- .../index.md | 20 +- .../reference/errors/is_not_iterable/index.md | 64 ++-- .../reference/errors/json_bad_parse/index.md | 6 +- .../reference/errors/malformed_uri/index.md | 12 +- .../missing_bracket_after_list/index.md | 10 +- .../missing_colon_after_property_id/index.md | 12 +- .../index.md | 6 +- .../index.md | 4 +- .../errors/missing_formal_parameter/index.md | 12 +- .../missing_initializer_in_const/index.md | 2 +- .../missing_name_after_dot_operator/index.md | 2 +- .../index.md | 4 +- .../index.md | 4 +- .../index.md | 8 +- .../errors/more_arguments_needed/index.md | 2 +- .../errors/negative_repetition_count/index.md | 12 +- .../errors/no_non-null_object/index.md | 10 +- .../errors/no_variable_name/index.md | 11 +- .../non_configurable_array_element/index.md | 14 +- .../errors/not_a_constructor/index.md | 8 +- .../reference/errors/not_a_function/index.md | 52 ++-- .../errors/not_a_valid_code_point/index.md | 22 +- .../reference/errors/not_defined/index.md | 8 +- .../reference/errors/precision_range/index.md | 36 +-- .../errors/property_access_denied/index.md | 10 +- .../reference/errors/read-only/index.md | 26 +- .../index.md | 37 ++- .../resulting_string_too_large/index.md | 14 +- .../errors/stmt_after_return/index.md | 18 +- .../errors/strict_non_simple_params/index.md | 2 +- .../errors/too_much_recursion/index.md | 9 +- 100 files changed, 1828 insertions(+), 1637 deletions(-) diff --git a/files/fr/web/javascript/closures/index.md b/files/fr/web/javascript/closures/index.md index e18c874c969773..f7f459c92ae180 100644 --- a/files/fr/web/javascript/closures/index.md +++ b/files/fr/web/javascript/closures/index.md @@ -15,11 +15,12 @@ Dans l'exemple suivant : ```js function init() { var nom = "Mozilla"; // nom est une variable locale de init - function afficheNom() { // afficheNom est une fonction interne de init + function afficheNom() { + // afficheNom est une fonction interne de init console.log(nom); // ici nom est une variable libre (définie dans la fonction parente) } afficheNom(); -}; +} init(); ``` @@ -48,21 +49,21 @@ Ce code produit le même résultat que l'appel à `init()` étudié précédemme Le code continue à fonctionner, ce qui peut paraître contre-intuitif au regard de la syntaxe utilisée. Usuellement, les variables locales d'une fonction n'existent que pendant l'exécution d'une fonction. Une fois que `creerFonction()` a fini son exécution, on aurait pu penser que la variable `nom` n'est plus accessible. Cependant, le code fonctionne : en JavaScript, la variable est donc accessible d'une certaine façon. -L'explication est la suivante : `maFonction` est une fermeture. La fermeture combine la fonction `afficheNom` et son environnement. Cet environnement est composé de toutes les variables locales accessibles (dans la portée) à la création de la fermeture. Ici `maFonction` est une fermeture qui contient la fonction `afficheNom` et une référence à la variable `var nom = "Mozilla"` qui existait lorsque la fermeture a été créée. L'instance de `afficheNom` conserve une référence à son environnement lexical, dans lequel `nom` existe. Pour cette raison, lorsque `maFonction` est invoquée, la variable `nom` reste disponible et "Mozilla" est transmis à `console.log`. +L'explication est la suivante : `maFonction` est une fermeture. La fermeture combine la fonction `afficheNom` et son environnement. Cet environnement est composé de toutes les variables locales accessibles (dans la portée) à la création de la fermeture. Ici `maFonction` est une fermeture qui contient la fonction `afficheNom` et une référence à la variable `var nom = "Mozilla"` qui existait lorsque la fermeture a été créée. L'instance de `afficheNom` conserve une référence à son environnement lexical, dans lequel `nom` existe. Pour cette raison, lorsque `maFonction` est invoquée, la variable `nom` reste disponible et "Mozilla" est transmis à `console.log`. Voici un exemple un peu plus intéressant, une fonction `ajouterA` : ```js function ajouterA(x) { - return function(y) { + return function (y) { return x + y; }; -}; +} var ajouter_5 = ajouterA(5); var ajouter_10 = ajouterA(10); -console.log(ajouter_5(2)); // 7 +console.log(ajouter_5(2)); // 7 console.log(ajouter_10(2)); // 12 ``` @@ -100,10 +101,10 @@ Voici le code JavaScript qui correspond : ```js function fabriqueRedimensionneur(taille) { - return function() { - document.body.style.fontSize = taille + 'px'; + return function () { + document.body.style.fontSize = taille + "px"; }; -}; +} var taille12 = fabriqueRedimensionneur(12); var taille14 = fabriqueRedimensionneur(14); @@ -113,9 +114,9 @@ var taille16 = fabriqueRedimensionneur(16); `taille12`, `taille14`, et `taille16` sont désormais des fermetures qui peuvent, respectivement, redimensionner le texte de l'élément `body` à 12, 14, ou 16 pixels. On peut les attacher aux boutons de la façon suivantes : ```js -document.getElementById('taille-12').onclick = taille12; -document.getElementById('taille-14').onclick = taille14; -document.getElementById('taille-16').onclick = taille16; +document.getElementById("taille-12").onclick = taille12; +document.getElementById("taille-14").onclick = taille14; +document.getElementById("taille-16").onclick = taille16; ``` ```html @@ -135,21 +136,21 @@ JavaScript ne permet pas de faire cela de façon native. En revanche, on peut é Voici comment définir une fonction publique accédant à des fonctions et des variables privées en utilisant des fermetures. Cette façon de procéder est également connue comme le patron de conception [module](https://en.wikipedia.org/wiki/Module_pattern) : ```js -var compteur = (function() { +var compteur = (function () { var compteurPrive = 0; function changeValeur(val) { compteurPrive += val; } return { - increment: function() { + increment: function () { changeValeur(1); }, - decrement: function() { + decrement: function () { changeValeur(-1); }, - valeur: function() { + valeur: function () { return compteurPrive; - } + }, }; })(); @@ -172,21 +173,21 @@ Ces trois fonctions publiques sont des fermetures qui partagent le même environ On remarquera qu'on définit une fonction anonyme qui crée un compteur puis qu'on l'appelle immédiatement pour assigner le résultat à la variable `compteur`. On pourrait stocker cette fonction dans une variable puis l'appeler plusieurs fois afin de créer plusieurs compteurs. ```js -var creerCompteur = function() { +var creerCompteur = function () { var compteurPrive = 0; function changeValeur(val) { compteurPrive += val; } return { - increment: function() { + increment: function () { changeValeur(1); }, - decrement: function() { + decrement: function () { changeValeur(-1); }, - valeur: function() { + valeur: function () { return compteurPrive; - } + }, }; }; @@ -221,16 +222,16 @@ On peut oublier parfois, dans le cas de fonctions imbriquées, qu'une fonction a ```js // Portée globale var e = 10; -function somme(a){ - return function(b){ - return function(c){ +function somme(a) { + return function (b) { + return function (c) { // Portée des autres fonctions (externes) - return function(d){ + return function (d) { // Portée locale return a + b + c + d + e; - } - } - } + }; + }; + }; } console.log(somme(1)(2)(3)(4)); // affiche 20 @@ -239,23 +240,23 @@ console.log(somme(1)(2)(3)(4)); // affiche 20 // Portée globale var e = 10; -function somme(a){ - return function somme2(b){ - return function somme3(c){ +function somme(a) { + return function somme2(b) { + return function somme3(c) { // Portée des autres fonctions - return function somme4(d){ + return function somme4(d) { // Portée locale return a + b + c + d + e; - } - } - } + }; + }; + }; } var somme2 = somme(1); var somme3 = somme2(2); var somme4 = somme3(3); var resultat = somme4(4); -console.log(resultat) // affiche 20 +console.log(resultat); // affiche 20 ``` Dans l'exemple qui précède, on a une suite de fonctions imbriquées dont chacune accède à la portée des fonctions extérieures. Dans ce contexte, on peut dire que les fermetures ont accès à _l'ensemble_ des portées des fonctions extérieures. @@ -266,28 +267,28 @@ Avant que le mot clé [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) ```html

Des aides seront affichées ici

-

E-mail :

-

Nom :

-

Âge :

+

E-mail :

+

Nom :

+

Âge :

``` ```js function afficherAide(aide) { - document.getElementById('aide').innerHTML = aide; + document.getElementById("aide").innerHTML = aide; } function preparerAide() { var texteAide = [ - {'id': 'email', 'aide': 'Votre adresse e-mail'}, - {'id': 'nom', 'aide': 'Vos prénom et nom'}, - {'id': 'âge', 'aide': 'Votre âge (plus de 16 ans requis)'} - ]; + { id: "email", aide: "Votre adresse e-mail" }, + { id: "nom", aide: "Vos prénom et nom" }, + { id: "âge", aide: "Votre âge (plus de 16 ans requis)" }, + ]; for (var i = 0; i < texteAide.length; i++) { var item = texteAide[i]; - document.getElementById(item.id).onfocus = function() { + document.getElementById(item.id).onfocus = function () { afficherAide(item.aide); - } + }; } } @@ -304,21 +305,21 @@ Une solution consiste à utiliser plus de fermetures et à appliquer une fabriqu ```js function afficheAide(aide) { - document.getElementById('aide').innerHTML = aide; + document.getElementById("aide").innerHTML = aide; } function creerCallbackAide(aide) { - return function() { + return function () { afficheAide(aide); }; } function prepareAide() { var texteAide = [ - {'id': 'email', 'aide': 'Votre adresse e-mail'}, - {'id': 'nom', 'aide': 'Votre prénom et nom'}, - {'id': 'âge', 'aide': 'Your age (you must be over 16)'} - ]; + { id: "email", aide: "Votre adresse e-mail" }, + { id: "nom", aide: "Votre prénom et nom" }, + { id: "âge", aide: "Your age (you must be over 16)" }, + ]; for (var i = 0; i < texteAide.length; i++) { var item = texteAide[i]; @@ -333,21 +334,21 @@ Voici une autre solution qui permet de ne pas utiliser plus de fermetures : ```js function afficheAide(aide) { - document.getElementById('aide').innerHTML = aide; + document.getElementById("aide").innerHTML = aide; } function prepareAide() { var texteAide = [ - {'id': 'email', 'aide': 'Votre adresse e-mail'}, - {'id': 'nom', 'aide': 'Votre prénom et nom'}, - {'id': 'âge', 'aide': 'Votre âge (vous devez être majeur)'} - ]; + { id: "email", aide: "Votre adresse e-mail" }, + { id: "nom", aide: "Votre prénom et nom" }, + { id: "âge", aide: "Votre âge (vous devez être majeur)" }, + ]; for (var i = 0; i < texteAide.length; i++) { let item = texteAide[i]; - document.getElementById(item.id).onfocus = function() { + document.getElementById(item.id).onfocus = function () { afficheAide(item.aide); - } + }; } } @@ -362,20 +363,20 @@ Autrement, on aurait pu utiliser `forEach()` afin de parcourir le tableau `texte ```js function afficheAide(aide) { - document.getElementById('aide').innerHTML = aide; + document.getElementById("aide").innerHTML = aide; } function prepareAide() { var texteAide = [ - {'id': 'email', 'aide': 'Votre adresse e-mail'}, - {'id': 'nom', 'aide': 'Votre prénom et nom'}, - {'id': 'âge', 'aide': 'Votre âge (vous devez être majeur)'} - ]; - - texteAide.forEach(function(texte) { - document.getElementById(texte.id).onfocus = function() { - afficheAide(texte.help); - } + { id: "email", aide: "Votre adresse e-mail" }, + { id: "nom", aide: "Votre prénom et nom" }, + { id: "âge", aide: "Votre âge (vous devez être majeur)" }, + ]; + + texteAide.forEach(function (texte) { + document.getElementById(texte.id).onfocus = function () { + afficheAide(texte.help); + }; }); } @@ -394,11 +395,11 @@ Voici un exemple de la mauvaise façon de procéder : function MonObjet(nom, message) { this.nom = nom.toString(); this.message = message.toString(); - this.getNom = function() { + this.getNom = function () { return this.nom; }; - this.getMessage = function() { + this.getMessage = function () { return this.message; }; } @@ -412,12 +413,12 @@ function MonObjet(nom, message) { this.message = message.toString(); } MonObjet.prototype = { - getNom: function() { + getNom: function () { return this.nom; }, - getMessage: function() { + getMessage: function () { return this.message; - } + }, }; ``` @@ -428,10 +429,10 @@ function MonObjet(nom, message) { this.nom = nom.toString(); this.message = message.toString(); } -MonObjet.prototype.getNom = function() { +MonObjet.prototype.getNom = function () { return this.nom; }; -MonObjet.prototype.getMessage = function() { +MonObjet.prototype.getMessage = function () { return this.message; }; ``` diff --git a/files/fr/web/javascript/data_structures/index.md b/files/fr/web/javascript/data_structures/index.md index 3bfd1ef1e11dc0..60b4388ef3b750 100644 --- a/files/fr/web/javascript/data_structures/index.md +++ b/files/fr/web/javascript/data_structures/index.md @@ -13,9 +13,9 @@ Les langages de programmation disposent de structures de données natives. Selon JavaScript est un langage dont le typage est _faible_ et _dynamique_. Cela signifie qu'il n'est pas nécessaire de déclarer le type d'une variable avant de l'utiliser. Le type de la variable sera automatiquement déterminé lorsque le programme sera exécuté. Cela signifie également que la même variable pourra avoir différents types au cours de son existence : ```js -let toto = 42; // toto est un nombre - toto = 'truc'; // toto est désormais une chaîne de caractères - toto = true; // toto est désormais un booléen +let toto = 42; // toto est un nombre +toto = "truc"; // toto est désormais une chaîne de caractères +toto = true; // toto est désormais un booléen ``` ## Les types de données JavaScript @@ -23,6 +23,7 @@ let toto = 42; // toto est un nombre L'ensemble des types disponible en JavaScript se compose [_des valeurs primitives_](#les_valeurs_primitives) et [_des objets_](#les_objects). - [Les valeurs primitives](#les_valeurs_primitives) (des données immuables, représentées au niveau le plus bas du langage) + - [Le type booléen](#le_type_booléen) - [Le type nul](#le_type_nul) - [Le type indéfini](#le_type_indéfini) @@ -145,7 +146,7 @@ En JavaScript, les objets peuvent être considérés comme des collections de pr Il existe deux types de propriétés qui ont certains attributs : des [propriétés de _données_](#propriétés_de_données) (data property) et des [propriétés d'_accesseur_](#propriétés_daccesseur). -> **Note :** Chaque propriété est décrite par des *attributs* correspondants. Ceux-ci sont utilisés par le moteur JavaScript et ne peuvent pas être manipulés depuis le code. Pour les identifier, les attributs sont indiqués entre double crochets. +> **Note :** Chaque propriété est décrite par des _attributs_ correspondants. Ceux-ci sont utilisés par le moteur JavaScript et ne peuvent pas être manipulés depuis le code. Pour les identifier, les attributs sont indiqués entre double crochets. > > Voir la page [`Object.defineProperty()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) pour en savoir plus. @@ -219,7 +220,7 @@ Elles possèdent les attributs suivants : | ------------------ | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | | `[[Get]]` | Un objet `Function` ou `undefined` | La fonction qui est appelée sans argument afin de récupérer la valeur de la propriété quand on souhaite y accéder. Voir aussi la page sur [`get`](/fr/docs/Web/JavaScript/Reference/Functions/get). | `undefined` | | `[[Set]]` | Un objet `Function` ou `undefined` | La fonction, appelée avec un argument qui contient la valeur qu'on souhaite affecter à la valeur et qui est exécutée à chaque fois qu'on souhaite modifier la valeur. Voir aussi la page sur [`set`](/fr/docs/Web/JavaScript/Reference/Functions/set). | `undefined` | -| `[[Enumerable]]` | Booléen | S'il vaut `true`, la propriété sera listée dans les boucles [`for…in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in). | `false` | +| `[[Enumerable]]` | Booléen | S'il vaut `true`, la propriété sera listée dans les boucles [`for…in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in). | `false` | | `[[Configurable]]` | Booléen | S'il vaut `false`, la propriété ne pourra pas être supprimée et ne pourra pas être transformée en une propriété de données. | `false` | ### Les objets « normaux » et les fonctions diff --git a/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md index b01b3c2dfbae1f..f33ba6426884f8 100644 --- a/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md +++ b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md @@ -330,67 +330,87 @@ Dans la plupart des cas, ce n'est pas l'algorithme le plus efficace mais il est ```js var RecuperateurDePropriete = { - getOwnEnumerables: function (obj) { - return this._getPropertyNames(obj, true, false, this._enumerable); - // On pourrait également utiliser for..in qu'on filtre avec hasOwnProperty - // ou encore : return Object.keys(obj); - }, - getOwnNonenumerables: function (obj) { - return this._getPropertyNames(obj, true, false, this._notEnumerable); - }, - getOwnEnumerablesAndNonenumerables: function (obj) { - return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable); - // On peut également simplement utiliser : return Object.getOwnPropertyNames(obj); - }, - getPrototypeEnumerables: function (obj) { - return this._getPropertyNames(obj, false, true, this._enumerable); - }, - getPrototypeNonenumerables: function (obj) { - return this._getPropertyNames(obj, false, true, this._notEnumerable); - }, - getPrototypeEnumerablesAndNonenumerables: function (obj) { - return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable); - }, - getOwnAndPrototypeEnumerables: function (obj) { - return this._getPropertyNames(obj, true, true, this._enumerable); - // On pourra aussi utiliser for..in sans filtre - }, - getOwnAndPrototypeNonenumerables: function (obj) { - return this._getPropertyNames(obj, true, true, this._notEnumerable); - }, - getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) { - return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable); - }, - // Fonctions de rappels statiques - _enumerable : function (obj, prop) { - return obj.propertyIsEnumerable(prop); - }, - _notEnumerable : function (obj, prop) { - return !obj.propertyIsEnumerable(prop); - }, - _enumerableAndNotEnumerable : function (obj, prop) { - return true; - }, - // Inspirée par https://stackoverflow.com/a/8024294/271577 - _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) { - var props = []; + getOwnEnumerables: function (obj) { + return this._getPropertyNames(obj, true, false, this._enumerable); + // On pourrait également utiliser for..in qu'on filtre avec hasOwnProperty + // ou encore : return Object.keys(obj); + }, + getOwnNonenumerables: function (obj) { + return this._getPropertyNames(obj, true, false, this._notEnumerable); + }, + getOwnEnumerablesAndNonenumerables: function (obj) { + return this._getPropertyNames( + obj, + true, + false, + this._enumerableAndNotEnumerable, + ); + // On peut également simplement utiliser : return Object.getOwnPropertyNames(obj); + }, + getPrototypeEnumerables: function (obj) { + return this._getPropertyNames(obj, false, true, this._enumerable); + }, + getPrototypeNonenumerables: function (obj) { + return this._getPropertyNames(obj, false, true, this._notEnumerable); + }, + getPrototypeEnumerablesAndNonenumerables: function (obj) { + return this._getPropertyNames( + obj, + false, + true, + this._enumerableAndNotEnumerable, + ); + }, + getOwnAndPrototypeEnumerables: function (obj) { + return this._getPropertyNames(obj, true, true, this._enumerable); + // On pourra aussi utiliser for..in sans filtre + }, + getOwnAndPrototypeNonenumerables: function (obj) { + return this._getPropertyNames(obj, true, true, this._notEnumerable); + }, + getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) { + return this._getPropertyNames( + obj, + true, + true, + this._enumerableAndNotEnumerable, + ); + }, + // Fonctions de rappels statiques + _enumerable: function (obj, prop) { + return obj.propertyIsEnumerable(prop); + }, + _notEnumerable: function (obj, prop) { + return !obj.propertyIsEnumerable(prop); + }, + _enumerableAndNotEnumerable: function (obj, prop) { + return true; + }, + // Inspirée par https://stackoverflow.com/a/8024294/271577 + _getPropertyNames: function getAllPropertyNames( + obj, + iterateSelfBool, + iteratePrototypeBool, + includePropCb, + ) { + var props = []; - do { - if (iterateSelfBool) { - Object.getOwnPropertyNames(obj).forEach(function (prop) { - if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) { - props.push(prop); - } - }); - } - if (!iteratePrototypeBool) { - break; - } - iterateSelfBool = true; - } while (obj = Object.getPrototypeOf(obj)); + do { + if (iterateSelfBool) { + Object.getOwnPropertyNames(obj).forEach(function (prop) { + if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) { + props.push(prop); + } + }); + } + if (!iteratePrototypeBool) { + break; + } + iterateSelfBool = true; + } while ((obj = Object.getPrototypeOf(obj))); - return props; - } + return props; + }, }; ``` diff --git a/files/fr/web/javascript/equality_comparisons_and_sameness/index.md b/files/fr/web/javascript/equality_comparisons_and_sameness/index.md index 631034e9a6ec1f..9d0f16c1d69d43 100644 --- a/files/fr/web/javascript/equality_comparisons_and_sameness/index.md +++ b/files/fr/web/javascript/equality_comparisons_and_sameness/index.md @@ -176,8 +176,12 @@ L'égalité de valeurs répond à un dernier cas d'utilisation : savoir si deux ```js // Ajouter la propriété immuable NEGATIVE_ZERO au constructor Number. -Object.defineProperty(Number, "NEGATIVE_ZERO", - { value: -0, writable: false, configurable: false, enumerable: false }); +Object.defineProperty(Number, "NEGATIVE_ZERO", { + value: -0, + writable: false, + configurable: false, + enumerable: false, +}); function attemptMutation(v) { Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v }); @@ -243,8 +247,8 @@ Voici une liste (non exhaustive) d'opérateurs et de méthodes natives qui peuve - : Si on prend l'opposé de `0`, on aura, bien entendu, `-0`. Cependant, avec les expressions, cela peut faire que la valeur `-0` se glisse dans les variables sans qu'on s'en rende compte. Par exemple : ```js - let forceArrêt = obj.masse * -obj.vitesse - ``` + let forceArrêt = obj.masse * -obj.vitesse + ``` Si `obj.vitesse` vaut `0` (ou est évalué à `0`), un `-0` sera introduit, ce qui fera que `forceArrêt` pourra être négative. diff --git a/files/fr/web/javascript/event_loop/index.md b/files/fr/web/javascript/event_loop/index.md index 3d397e626f316c..7ef9cd31ad64d1 100644 --- a/files/fr/web/javascript/event_loop/index.md +++ b/files/fr/web/javascript/event_loop/index.md @@ -21,12 +21,12 @@ Les sections qui suivent décrivent un modèle théorique. En réalité, les mot Les appels de fonction forment une pile de cadre (_frames_). ```js -function f(b){ +function f(b) { var a = 12; return a + b + 35; } -function g(x){ +function g(x) { var m = 4; return f(m * x); } @@ -49,7 +49,7 @@ Un environnement d'exécution JavaScript (_runtime_) contient une queue de messa La boucle d'événement tire principalement son nom de son implémentation. Celle-ci ressemble à : ```js -while (queue.attendreMessage()){ +while (queue.attendreMessage()) { queue.traiterProchainMessage(); } ``` @@ -75,13 +75,13 @@ Voici un exemple qui illustre ce concept (`setTimeout` ne s'exécute pas immédi ```js const s = new Date().getSeconds(); -setTimeout(function() { +setTimeout(function () { // prints console.log("Exécuté après " + (new Date().getSeconds() - s) + " secondes."); }, 500); -while(true) { - if(new Date().getSeconds() - s >= 2) { +while (true) { + if (new Date().getSeconds() - s >= 2) { console.log("Ouf, on a bouclé pendant 2 secondes"); break; } @@ -92,27 +92,25 @@ while(true) { Un délai à zéro ne signifie pas que le callback sera déclenché après zéro milliseconde. Appeler [`setTimeout`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) avec un délai de `0` (zéro) milliseconde n'éxécute pas le callback après l'interval donné. -L'exécution dépend du nombre de tâches en attente dans la queue. Dans l'exemple ci-dessous, le message `'ceci est juste un message'` sera affiché dans la console avant que le message dans le callback soit traité, parce que le délai est le temps *minimum* requis par l'environnement d'exécution (runtime) pour traiter la demande (pas un temps _garanti_). +L'exécution dépend du nombre de tâches en attente dans la queue. Dans l'exemple ci-dessous, le message `'ceci est juste un message'` sera affiché dans la console avant que le message dans le callback soit traité, parce que le délai est le temps _minimum_ requis par l'environnement d'exécution (runtime) pour traiter la demande (pas un temps _garanti_). Fondamentalement, `setTimeout` doit attendre la fin de tout le code pour les messages en file d'attente, même si vous avez spécifié une limite de temps particulière pour votre setTimeout. ```js -(function() { - - console.log('ceci est le début'); +(function () { + console.log("ceci est le début"); setTimeout(function cb() { - console.log('Callback 1: ceci est un msg depuis le callback'); + console.log("Callback 1: ceci est un msg depuis le callback"); }); // has a default time value of 0 - console.log('ceci est juste un message'); + console.log("ceci est juste un message"); setTimeout(function cb1() { - console.log('Callback 2: ceci est un msg depuis le callback'); + console.log("Callback 2: ceci est un msg depuis le callback"); }, 0); - console.log('ceci est la fin'); - + console.log("ceci est la fin"); })(); // "ceci est le début" diff --git a/files/fr/web/javascript/guide/control_flow_and_error_handling/index.md b/files/fr/web/javascript/guide/control_flow_and_error_handling/index.md index 82861e6393c5cc..dd2944e67b967a 100644 --- a/files/fr/web/javascript/guide/control_flow_and_error_handling/index.md +++ b/files/fr/web/javascript/guide/control_flow_and_error_handling/index.md @@ -103,7 +103,7 @@ Attention à ne pas utiliser des instructions d'affectation dans les expressions Voici un exemple de ce qu'il ne faut **pas** faire : -```js example-bad +```js-nolint example-bad if (x = y) { /* exécuter des instructions */ } @@ -142,15 +142,16 @@ Les autres valeurs, y compris les objets, seront équivalents à `true`. #### Exemple -Dans l'exemple qui suit, la fonction` checkData `renvoie `true` si une chaîne de caractères mesure trois caractères. Sinon, elle affiche une alerte et renvoie `false`. +Dans l'exemple qui suit, la fonction `checkData` renvoie `true` si une chaîne de caractères mesure trois caractères. Sinon, elle affiche une alerte et renvoie `false`. ```js function checkData(maChaîne) { if (maChaîne.length == 3) { return true; } else { - alert("Veuillez saisir trois caractères. " + - maChaîne + " n'est pas valide."); + alert( + "Veuillez saisir trois caractères. " + maChaîne + " n'est pas valide.", + ); return false; } } @@ -242,10 +243,14 @@ throw expression; Il est possible d'utiliser n'importe quelle expression, sans restriction de type. Le fragment de code qui suit illustre les différentes possibilités : ```js -throw "Erreur2"; //type String -throw 42; //type Number -throw true; //type Boolean -throw {toString: function () { return "je suis un objet !"; } }; +throw "Erreur2"; //type String +throw 42; //type Number +throw true; //type Boolean +throw { + toString: function () { + return "je suis un objet !"; + }, +}; ``` > **Note :** Vous pouvez spécifier un objet lorsque vous lancez une exception. Vous pouvez alors faire référence aux propriétés de l'objet dans le bloc `catch`. @@ -259,9 +264,9 @@ function ExceptionUtilisateur(message) { // On surcharge la méthode toString pour afficher // un message plus explicite (par exemple dans la console) -ExceptionUtilisateur.prototype.toString = function() { +ExceptionUtilisateur.prototype.toString = function () { return this.name + ': "' + this.message + '"'; -} +}; // On crée une instance pour ce type d'objet // et on renvoie une exception avec cette instance @@ -281,16 +286,29 @@ Dans l'exemple qui suit, on utilise une instruction `try...catch`. On définit u ```js function getNomMois(numMois) { numMois = numMois - 1; // On décale de 1 car les indices du tableaux commencent à 0 - var mois = ["Janvier", "Février", "Mars", "Avril" ,"Mai", "Juin", "Juillet", - "Août", "Septembre", "Octobre", "Novembre", "Décembre"]; + var mois = [ + "Janvier", + "Février", + "Mars", + "Avril", + "Mai", + "Juin", + "Juillet", + "Août", + "Septembre", + "Octobre", + "Novembre", + "Décembre", + ]; if (mois[numMois] != null) { return mois[numMois]; } else { - throw "NuméroMoisInvalide"; // Ici on utilise l'instruction throw + throw "NuméroMoisInvalide"; // Ici on utilise l'instruction throw } } -try { // les instructions à essayer si tout se passe bien +try { + // les instructions à essayer si tout se passe bien nomMois = getNomMois(maVarMois); // La fonction peut renvoyer une exception } catch (e) { nomMois = "inconnu"; @@ -339,7 +357,7 @@ Dans l'exemple suivant, on écrit dans un fichier, si une exception se produit l ouvrirFichier(); try { écrireFichier(données); // Une erreur peut se produire -} catch(e) { +} catch (e) { gérerException(e); // On gère le cas où on a une exception } finally { fermerFichier(); // On n'oublie jamais de fermer le flux. @@ -353,7 +371,7 @@ function f() { try { console.log(0); throw "bug"; - } catch(e) { + } catch (e) { console.log(1); return true; // Cette instruction est bloquée jusqu'à la fin du bloc finally console.log(2); // Ne pourra jamais être exécuté @@ -375,10 +393,10 @@ Lorsqu'on surcharge les valeurs de retour avec le bloc `finally`, cela s'appliqu function f() { try { throw "problème"; - } catch(e) { + } catch (e) { console.log('"problème" interne intercepté'); throw e; // cette instruction est mise en attente - // tant que le bloc finally n'est pas fini + // tant que le bloc finally n'est pas fini } finally { return false; // surcharge le "throw" précédent } @@ -387,7 +405,7 @@ function f() { try { f(); -} catch(e) { +} catch (e) { // ce bloc n'est jamais utilisé car le throw // utilisé dans le bloc catch a été surchargé // par l'instruction return de finally diff --git a/files/fr/web/javascript/guide/expressions_and_operators/index.md b/files/fr/web/javascript/guide/expressions_and_operators/index.md index c92d6c355e012f..5208f32cd4e5cd 100644 --- a/files/fr/web/javascript/guide/expressions_and_operators/index.md +++ b/files/fr/web/javascript/guide/expressions_and_operators/index.md @@ -62,24 +62,24 @@ Un opérateur d'affectation affecte une valeur à son opérande gauche selon la Il existe également des opérateurs d'affectation composites qui sont des raccourcis pour les opérations listées dans le tableau qui suit : -| Nom | Opérateur | Signification | -| ---------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------ | -| [Affectation](/fr/docs/Web/JavaScript/Reference/Operators/Assignment) | `x = f()` | `x = f()` | -| [Affectation après addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition_assignment) | `x += f()` | `x = x + f()` | -| [Affectation après soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment) | `x -= f()` | `x = x - f()` | -| [Affectation après multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication_assignment) | `x *= f()` | `x = x * f()` | -| [Affectation après division](/fr/docs/Web/JavaScript/Reference/Operators/Division_assignment) | `x /= f()` | `x = x / f()` | -| [Affectation du reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder_assignment) | `x %= f()` | `x = x % f()` | -| [Affectation après exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation_assignment) | `x **= f()` | `x = x ** f()` | -| [Affectation après décalage à gauche](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment) | `x <<= f()` | `x = x << f()` | -| [Affectation après décalage à droite](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment) | `x >>= f()` | `x = x >> f()` | -| [Affectation après décalage à droite non signé](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment) | `x >>>= f()` | `x = x >>> f()` | -| [Affectation après ET binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment) | `x &= f()` | `x = x & f()` | -| [Affectation après OU exclusif binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment) | `x ^= f()` | `x = x ^ f()` | -| [Affectation après OU binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment) | `x \|= f()` | `x = x \| f()` | -| [Affectation après ET logique](/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment) | `x &&= f()` | `x && (x = f())` | -| [Affectation après OU logique](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment) | `x \|\|= f()` | `x \|\| (x = f())` | -| [Affectation après coalescence des nuls](/fr/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment) | `x ??= f()` | `x ?? (x = f())` | +| Nom | Opérateur | Signification | +| ---------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------ | +| [Affectation](/fr/docs/Web/JavaScript/Reference/Operators/Assignment) | `x = f()` | `x = f()` | +| [Affectation après addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition_assignment) | `x += f()` | `x = x + f()` | +| [Affectation après soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment) | `x -= f()` | `x = x - f()` | +| [Affectation après multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication_assignment) | `x *= f()` | `x = x * f()` | +| [Affectation après division](/fr/docs/Web/JavaScript/Reference/Operators/Division_assignment) | `x /= f()` | `x = x / f()` | +| [Affectation du reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder_assignment) | `x %= f()` | `x = x % f()` | +| [Affectation après exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation_assignment) | `x **= f()` | `x = x ** f()` | +| [Affectation après décalage à gauche](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment) | `x <<= f()` | `x = x << f()` | +| [Affectation après décalage à droite](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment) | `x >>= f()` | `x = x >> f()` | +| [Affectation après décalage à droite non signé](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment) | `x >>>= f()` | `x = x >>> f()` | +| [Affectation après ET binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment) | `x &= f()` | `x = x & f()` | +| [Affectation après OU exclusif binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment) | `x ^= f()` | `x = x ^ f()` | +| [Affectation après OU binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment) | `x \|= f()` | `x = x \| f()` | +| [Affectation après ET logique](/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment) | `x &&= f()` | `x && (x = f())` | +| [Affectation après OU logique](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment) | `x \|\|= f()` | `x \|\| (x = f())` | +| [Affectation après coalescence des nuls](/fr/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment) | `x ??= f()` | `x ?? (x = f())` | ### Affectation aux propriétés @@ -119,11 +119,11 @@ C'est une erreur que d'affecter des valeurs à des propriétés non-modifiables Pour les affectations plus complexes, [l'affectation par décomposition](/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) permet de construire une expression JavaScript pour extraire des données de tableaux ou d'objets avec une syntaxe qui reflète les littéraux utilisés pour la construction de tableaux ou d'objets. ```js -const toto = ['un', 'deux', 'trois']; +const toto = ["un", "deux", "trois"]; // sans décomposition -const un = toto[0]; -const deux = toto[1]; +const un = toto[0]; +const deux = toto[1]; const trois = toto[2]; // avec décomposition @@ -159,14 +159,14 @@ let x; const y = (x = f()); // Une notation équivalente serait : const y = x = f(); console.log(y); // Affiche la valeur de retour de l'affectation x = f(). -console.log(x = f()); // Affiche la valeur de retour directement. +console.log((x = f())); // Affiche la valeur de retour directement. // Une expression d'affectation peut être imbriquée à n'importe quel // endroit où les expressions sont autorisées, que ce soit comme // élément d'un littéral de tableau ou comme argument dans un appel // de fonction -console.log([ 0, x = f(), 0 ]); -console.log(f(0, x = f(), 0)); +console.log([0, (x = f()), 0]); +console.log(f(0, (x = f()), 0)); ``` Le résultat de l'évaluation correspond à l'expression à droite du signe `=` dans la colonne « Signification » du tableau ci-avant. Cela signifie que l'évaluation de `x = f()` aura comme résultat celui de `f()`, que l'évaluation de `x += f()` aura comme résultat la somme `x + f()`, que celle de @@ -183,12 +183,12 @@ On notera que pour les opérateurs d'affectation, à l'exception de `=`, les val Par exemple, si on a les fonctions `f` et `g` et les variables `x` et `y` comme suit : ```js -function f () { - console.log('F!'); +function f() { + console.log("F!"); return 2; } -function g () { - console.log('G!'); +function g() { + console.log("G!"); return 3; } let x, y; @@ -197,9 +197,9 @@ let x, y; Prenons ces trois exemples : ```js -y = x = f() -y = [ f(), x = g() ] -x[f()] = g() +y = x = f(); +y = [f(), (x = g())]; +x[f()] = g(); ``` #### Exemple d'évaluation n°1 @@ -207,13 +207,13 @@ x[f()] = g() `y = x = f()` est équivalente à `y = (x = f())`, car l'opérateur d'affectation est associatif à droite. Toutefois l'évaluation se fait de gauche à droite : 1. L'évaluation de l'expression d'affectation `y = x = f()` commence. - 1. L'opérande `y` à gauche de l'affectation est évalué comme une référence à la variable nommée `y`. - 2. L'évaluation de l'expression d'affectation `x = f()` commence. - 1. L'opérande `x` à gauche de l'affectation est évalué comme une référence à la variable nommée `x`. - 2. L'appel de fonction `f()` affiche "F!" dans la console et renvoie la valeur `2`. - 3. Ce résultat de `f()`, `2`, est affecté à `x`. - 3. L'évaluation de l'expression d'affectation `x = f()` est maintenant terminée. Son résultat est la nouvelle valeur de `x`, qui est `2`. - 4. Ce résultat, `2`, est à son tour affecté à `y`. + 1. L'opérande `y` à gauche de l'affectation est évalué comme une référence à la variable nommée `y`. + 2. L'évaluation de l'expression d'affectation `x = f()` commence. + 1. L'opérande `x` à gauche de l'affectation est évalué comme une référence à la variable nommée `x`. + 2. L'appel de fonction `f()` affiche "F!" dans la console et renvoie la valeur `2`. + 3. Ce résultat de `f()`, `2`, est affecté à `x`. + 3. L'évaluation de l'expression d'affectation `x = f()` est maintenant terminée. Son résultat est la nouvelle valeur de `x`, qui est `2`. + 4. Ce résultat, `2`, est à son tour affecté à `y`. 2. L'évaluation de l'expression d'affectation `y = x = f()` est maintenant terminée. Son résultat est la nouvelle valeur de `y`, qui est ici `2`. La valeur `2` a été affectée à `x` et `y`, et la console a affiché "F!". #### Exemple d'évaluation n°2 @@ -221,16 +221,16 @@ x[f()] = g() `y = [ f(), x = g() ]` est également évaluée de gauche à droite : 1. L'évaluation de l'expression d'affectation `y = [ f(), x = g() ]` commence. - 1. L'opérande `y` à gauche de l'affectation est évalué comme une référence à la variable nommée `y`. - 2. L'évaluation du littéral de tableau `[ f(), x = g() ]` commence. - 1. L'appel de fonction `f()` affiche "F!" dans la console et renvoie la valeur `2`. - 2. L'évaluation de l'expression d'affectation `x = g()` commence. - 1. L'opérande `x` à gauche de l'affectation est évalué comme une référence à la variable nommée `x`. - 2. L'appel de fonction `g()` affiche "G!" dans la console et renvoie la valeur `3`. - 3. Ce résultat de `g()`, `3`, est affecté à `x`. - 3. L'évaluation de l'expression d'affectation `x = g()` est maintenant terminée. Son résultat est la nouvelle valeur de `x`  `3`. Ce résultat devient l'élément qui suit dans le littéral de tableau (après le `2` provenant de `f()`). - 3. L'évaluation du littéral de tableau `[ f(), x = g() ]` est maintenant terminée. Son résultat est un tableau avec deux valeurs : `[ 2, 3 ]`. - 4. Ce tableau, `[ 2, 3 ]`, est affecté à `y`. + 1. L'opérande `y` à gauche de l'affectation est évalué comme une référence à la variable nommée `y`. + 2. L'évaluation du littéral de tableau `[ f(), x = g() ]` commence. + 1. L'appel de fonction `f()` affiche "F!" dans la console et renvoie la valeur `2`. + 2. L'évaluation de l'expression d'affectation `x = g()` commence. + 1. L'opérande `x` à gauche de l'affectation est évalué comme une référence à la variable nommée `x`. + 2. L'appel de fonction `g()` affiche "G!" dans la console et renvoie la valeur `3`. + 3. Ce résultat de `g()`, `3`, est affecté à `x`. + 3. L'évaluation de l'expression d'affectation `x = g()` est maintenant terminée. Son résultat est la nouvelle valeur de `x`  `3`. Ce résultat devient l'élément qui suit dans le littéral de tableau (après le `2` provenant de `f()`). + 3. L'évaluation du littéral de tableau `[ f(), x = g() ]` est maintenant terminée. Son résultat est un tableau avec deux valeurs : `[ 2, 3 ]`. + 4. Ce tableau, `[ 2, 3 ]`, est affecté à `y`. 2. L'évaluation de l'expression d'affectation `y = [ f(), x = g() ]` est maintenant terminée. Son résultat est la nouvelle valeur de `y`, qui est `[ 2, 3 ]`. `3` est affecté à `x`, `[ 2, 3 ]` est affecté à `y` et la console a affiché "F!" puis "G!". #### Exemple d'évaluation n°3 @@ -238,12 +238,12 @@ x[f()] = g() `x[f()] = g()` est également évaluée de gauche à droite. Dans cet exemple, on part du principe que la valeur de `x` est déjà un objet (pour plus d'informations sur les objets, voir [Utiliser les objets](/fr/docs/Web/JavaScript/Guide/Working_with_Objects)). 1. L'évaluation de l'expression d'affectation `x[f()] = g()` commence. - 1. L'évaluation de l'accès à la propriété `x[f()]` situé à gauche de l'opérateur d'affectation commence. - 1. Le `x` est évalué comme une référence à la variable nommée `x`. - 2. Ensuite, l'appel `f()` affiche "F!" dans la console et renvoie la valeur `2`. - 2. L'évaluation de `x[f()]` est maintenant terminée et son résultat est une variable qui référence la propriété `x[2]`. - 3. Ensuite, l'appel à la fonction `g()` affiche "G!" dans la console et renvoie la valeur `3`. - 4. Ce résultat, `3`, est affecté à `x[2]` (cette étape réussira uniquement si la valeur de `x` est un [objet](/fr/docs/Web/JavaScript/Guide/Working_with_Objects))? + 1. L'évaluation de l'accès à la propriété `x[f()]` situé à gauche de l'opérateur d'affectation commence. + 1. Le `x` est évalué comme une référence à la variable nommée `x`. + 2. Ensuite, l'appel `f()` affiche "F!" dans la console et renvoie la valeur `2`. + 2. L'évaluation de `x[f()]` est maintenant terminée et son résultat est une variable qui référence la propriété `x[2]`. + 3. Ensuite, l'appel à la fonction `g()` affiche "G!" dans la console et renvoie la valeur `3`. + 4. Ce résultat, `3`, est affecté à `x[2]` (cette étape réussira uniquement si la valeur de `x` est un [objet](/fr/docs/Web/JavaScript/Guide/Working_with_Objects))? 2. L'évaluation de l'expression d'affectation `x[f()] = g()` est maintenant terminée. Son résultat est la nouvelle valeur de `x[2]`, qui est `3`. `3` a été affecté à `x[2]` et la console a affiché "F!" puis "G!". ### Éviter les enchaînements d'affectation @@ -252,7 +252,7 @@ L'enchaînement ou l'imbrication d'affectations dans d'autres expressions peut p On évitera en particulier les enchaînements d'affectation dans une instruction [`const`][], [`let`][], ou [`var`][] qui _ne fonctionnent pas_ dans la plupart des cas. Seule la variable la plus à gauche sera alors déclarée et les variables intermédiaires dans la chaîne ne seront _pas_ déclarées par l'instruction `const`/`let`/`var`. Ainsi, si on a : -```js +```js-nolint const z = y = x = f(); ``` @@ -472,15 +472,15 @@ Un opérateur binaire traite les opérandes comme des suites de 32 bits (des zé Le tableau qui suit détaille les opérateurs binaires JavaScript. -| Opérateur | Utilisation | Description | -| ------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| Opérateur | Utilisation | Description | +| ------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ | | [ET binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND) | `a & b` | Renvoie un à chaque position pour laquelle les bits des deux opérandes valent un. | -| [OU binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR) | `a \| b` | Renvoie un zéro à chaque position pour laquelle les bits des deux opérandes valent zéro. | +| [OU binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR) | `a \| b` | Renvoie un zéro à chaque position pour laquelle les bits des deux opérandes valent zéro. | | [OU exclusif binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR) | `a ^ b` | Renvoie un zéro à chaque position pour laquelle les bits sont les mêmes. [Renvoie un à chaque position où les bits sont différents.] | -| [NON binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT) | `~ a` | Inverse les bits de l'opérande. | -| [Décalage à gauche](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift) | `a << b` | Décale la représentation binaire de `a` de `b` bits vers la gauche, en ajoutant des zéros à droite. | -| [Décalage à droite avec propagation du signe](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift) | `a >> b` | Décale la représentation binaire de `a` de `b` bits vers la droite, enlevant les bits en trop. | -| [Décalage à droite avec remplissage à zéro](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift) | `a >>> b` | Décale la représentation binaire de `a` de `b` bits vers la droite, enlevant les bits en trop et en ajoutant des zéros à gauche. | +| [NON binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT) | `~ a` | Inverse les bits de l'opérande. | +| [Décalage à gauche](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift) | `a << b` | Décale la représentation binaire de `a` de `b` bits vers la gauche, en ajoutant des zéros à droite. | +| [Décalage à droite avec propagation du signe](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift) | `a >> b` | Décale la représentation binaire de `a` de `b` bits vers la droite, enlevant les bits en trop. | +| [Décalage à droite avec remplissage à zéro](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift) | `a >>> b` | Décale la représentation binaire de `a` de `b` bits vers la droite, enlevant les bits en trop et en ajoutant des zéros à gauche. | ### Opérateurs binaires logiques @@ -498,13 +498,13 @@ Les opérateurs logiques binaires fonctionnent de la façon suivante : Par exemple, la représentation binaire du nombre décimal `9` est `1001`, et celle du nombre décimal `15` est `1111`. Aussi, quand on utilise les opérateurs binaires sur ces valeurs, on a les résultats suivants : -| Expression | Résultat | Description binaire | -| ---------- | -------- | ----------------------------------------------------- | -| `15 & 9` | `9` | `1111 & 1001 = 1001` | -| `15 \| 9` | `15` | `1111 \| 1001 = 1111` | -| `15 ^ 9` | `6` | `1111 ^ 1001 = 0110` | -| `~15` | `-16` | `~ 0000 0000 … 0000 1111 = 1111 1111 … 1111 0000` | -| `~9` | `-10` | `~ 0000 0000 … 0000 1001 = 1111 1111 … 1111 0110` | +| Expression | Résultat | Description binaire | +| ---------- | -------- | ------------------------------------------------- | +| `15 & 9` | `9` | `1111 & 1001 = 1001` | +| `15 \| 9` | `15` | `1111 \| 1001 = 1111` | +| `15 ^ 9` | `6` | `1111 ^ 1001 = 0110` | +| `~15` | `-16` | `~ 0000 0000 … 0000 1111 = 1111 1111 … 1111 0000` | +| `~9` | `-10` | `~ 0000 0000 … 0000 1001 = 1111 1111 … 1111 0110` | On notera que tous les 32 bits sont inversés lors de l'utilisation de l'opérateur NON binaire et que les valeurs avec le bit le plus à gauche à 1 représentent des valeurs négatives (représentation en complément à deux). Aussi, l'évaluation de `~x` fournira la même valeur que `-x - 1`. @@ -615,33 +615,33 @@ Les expressions équivalentes à `false` sont celles qui sont évaluées avec la Les exemples de code suivant illustrent l'utilisation de l'opérateur ET logique `&&`. ```js -const a1 = true && true; // t && t renvoie true -const a2 = true && false; // t && f renvoie false -const a3 = false && true; // f && t renvoie false -const a4 = false && (3 === 4); // f && f renvoie false -const a5 = 'Chat' && 'Chien'; // t && t renvoie Chien -const a6 = false && 'Chat'; // f && t renvoie false -const a7 = 'Chat' && false; // t && f renvoie false +const a1 = true && true; // t && t renvoie true +const a2 = true && false; // t && f renvoie false +const a3 = false && true; // f && t renvoie false +const a4 = false && 3 === 4; // f && f renvoie false +const a5 = "Chat" && "Chien"; // t && t renvoie Chien +const a6 = false && "Chat"; // f && t renvoie false +const a7 = "Chat" && false; // t && f renvoie false ``` Les exemples de code suivant illustrent l'utilisation de l'opérateur OU logique `||`. ```js -const o1 = true || true; // t || t renvoie true -const o2 = false || true; // f || t renvoie true -const o3 = true || false; // t || f renvoie true -const o4 = false || (3 === 4); // f || f renvoie false -const o5 = 'Chat' || 'Chien'; // t || t renvoie Chat -const o6 = false || 'Chat'; // f || t renvoie Chat -const o7 = 'Chat' || false; // t || f renvoie Chat +const o1 = true || true; // t || t renvoie true +const o2 = false || true; // f || t renvoie true +const o3 = true || false; // t || f renvoie true +const o4 = false || 3 === 4; // f || f renvoie false +const o5 = "Chat" || "Chien"; // t || t renvoie Chat +const o6 = false || "Chat"; // f || t renvoie Chat +const o7 = "Chat" || false; // t || f renvoie Chat ``` Les exemples de code suivant illustrent l'utilisation de l'opérateur NON logique `!`. ```js -const n1 = !true; // !t renvoie false -const n2 = !false; // !f renvoie true -const n3 = !'Chat'; // !t renvoie false +const n1 = !true; // !t renvoie false +const n2 = !false; // !f renvoie true +const n3 = !"Chat"; // !t renvoie false ``` ### Évaluation en court-circuit @@ -705,7 +705,7 @@ En complément des opérateurs de comparaison qui peuvent être utilisés avec l Ainsi : ```js -console.log('ma ' + 'chaîne'); // affichera "ma chaîne" dans la console. +console.log("ma " + "chaîne"); // affichera "ma chaîne" dans la console. ``` L'opérateur d'affectation raccourci `+=` peut également être utilisé pour concaténer des chaînes. @@ -713,8 +713,8 @@ L'opérateur d'affectation raccourci `+=` peut également être utilisé pour co Par exemple : ```js -let maChaine = 'alpha'; -maChaine += 'bet'; // sera évalué en "alphabet" et affectera cette valeur à maChaine. +let maChaine = "alpha"; +maChaine += "bet"; // sera évalué en "alphabet" et affectera cette valeur à maChaine. ``` ## Opérateur conditionnel (ternaire) @@ -722,7 +722,7 @@ maChaine += 'bet'; // sera évalué en "alphabet" et affectera cette valeur à m [L'opérateur conditionnel](/fr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) est le seul opérateur JavaScript à prendre trois opérandes. Il permet de se résoudre en une valeur ou en une autre selon une condition donnée. Sa syntaxe est la suivante : ```js -condition ? val1 : val2 +condition ? val1 : val2; ``` Si `condition` est vraie, l'expression sera résolue avec la valeur de `val1`. Sinon, elle sera résolue avec la valeur de `val2`. L'opérateur conditionnel peut être utilisé à tout endroit où un opérateur standard peut être utilisé. @@ -730,7 +730,7 @@ Si `condition` est vraie, l'expression sera résolue avec la valeur de `val1`. S Par exemple : ```js -const statut = age >= 18 ? 'adulte' : 'mineur'; +const statut = age >= 18 ? "adulte" : "mineur"; ``` Cette instruction affecte la valeur `"adulte"` à la variable `statut` si `age` est supérieur ou égal à 18. Sinon, c'est la valeur `"mineur"` qui est affectée à `statut`. @@ -746,7 +746,7 @@ const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; const a = [x, x, x, x, x]; for (let i = 0, j = 9; i <= j; i++, j--) { -// ^ + // ^ console.log(`a[${i}][${j}]= ${a[i][j]}`); } ``` @@ -772,7 +772,7 @@ Lorsque l'opérateur `delete` réussit, la propriété est supprimée de l'objet ```js delete Math.PI; // renvoie false (on ne peut pas supprimer des propriétés non-configurables) -const monObj = {h: 4}; +const monObj = { h: 4 }; delete monObj.h; // renvoie true (on peut supprimer des propriétés personnalisées) ``` @@ -785,7 +785,7 @@ Comme les tableaux sont également des objets, il est techniquement possible de [L'opérateur `typeof`](/fr/docs/Web/JavaScript/Reference/Operators/typeof) s'utilise de la façon suivante : ```js -typeof operande +typeof operande; ``` L'opérateur `typeof` renvoie une chaîne de caractères qui indique le type de l'opérande non-évalué. `operande` est une chaîne de caractères, une variable, un mot-clé ou un objet dont on souhaite connaître le type. On peut utiliser des parenthèses autour de l'opérande. @@ -793,21 +793,21 @@ L'opérateur `typeof` renvoie une chaîne de caractères qui indique le type de Prenons la définition des variables suivantes : ```js -const maFonction = new Function('5 + 2'); -const forme = 'rond'; +const maFonction = new Function("5 + 2"); +const forme = "rond"; const taille = 1; -const toto = ['Pomme', 'Mangue', 'Orange']; +const toto = ["Pomme", "Mangue", "Orange"]; const jour = new Date(); ``` L'opérateur `typeof` renvoie les résultats suivants pour ces différentes variables : ```js -typeof maFonction; // renvoie "function" -typeof forme; // renvoie "string" -typeof taille; // renvoie "number" -typeof toto; // renvoie "object" -typeof jour; // renvoie "object" +typeof maFonction; // renvoie "function" +typeof forme; // renvoie "string" +typeof taille; // renvoie "number" +typeof toto; // renvoie "object" +typeof jour; // renvoie "object" typeof inexistant; // renvoie "undefined" ``` @@ -821,42 +821,42 @@ typeof null; // renvoie "object" Pour un nombre ou une chaîne de caractères, `typeof` renverra les résultats suivants : ```js -typeof 62; // renvoie "number" -typeof 'Coucou monde'; // renvoie "string" +typeof 62; // renvoie "number" +typeof "Coucou monde"; // renvoie "string" ``` Pour les valeurs qui sont des propriétés, `typeof` renvoie le type de la valeur contenue dans la propriété : ```js typeof document.lastModified; // renvoie "string" -typeof window.length; // renvoie "number" -typeof Math.LN2; // renvoie "number" +typeof window.length; // renvoie "number" +typeof Math.LN2; // renvoie "number" ``` Pour les méthodes et fonctions, `typeof` renverra les résultats suivants : ```js -typeof blur; // renvoie "function" -typeof eval; // renvoie "function" -typeof parseInt; // renvoie "function" +typeof blur; // renvoie "function" +typeof eval; // renvoie "function" +typeof parseInt; // renvoie "function" typeof shape.split; // renvoie "function" ``` Pour les objets natifs, `typeof` renverra les résultats suivants : ```js -typeof Date; // renvoie "function" +typeof Date; // renvoie "function" typeof Function; // renvoie "function" -typeof Math; // renvoie "object" -typeof Option; // renvoie "function" -typeof String; // renvoie "function" +typeof Math; // renvoie "object" +typeof Option; // renvoie "function" +typeof String; // renvoie "function" ``` ### `void` [L'opérateur `void`](/fr/docs/Web/JavaScript/Reference/Operators/void) s'utilise d'une des deux façons suivantes : -```js +```js-nolint void (expression) void expression ``` @@ -872,7 +872,7 @@ Un opérateur relationnel compare ses opérandes et renvoie une valeur booléenn [L'opérateur `in`](/fr/docs/Web/JavaScript/Reference/Operators/in) renvoie `true` si la propriété indiquée par l'opérande gauche est présente dans l'objet indiqué par l'opérande droit. La syntaxe est la suivante : ```js -nomPropriete in nomObjet +nomPropriete in nomObjet; ``` où `nomPropriete` est une chaîne de caractères, une valeur numérique ou un symbole représentant une propriété, et `nomObjet` est le nom de l'objet. @@ -881,23 +881,23 @@ Voici quelques exemples utilisant l'opérateur `in`. ```js // Tableaux -const arbres = ['séquoia', 'laurier', 'cèdre', 'chêne', 'érable']; -0 in arbres; // renvoie true -3 in arbres; // renvoie true -6 in arbres; // renvoie false -'séquoia' in arbres; // renvoie false (il faut indiquer l'indice, pas la - // valeur) -'length' in arbres; // renvoie true (length est une propriété native) +const arbres = ["séquoia", "laurier", "cèdre", "chêne", "érable"]; +0 in arbres; // renvoie true +3 in arbres; // renvoie true +6 in arbres; // renvoie false +"séquoia" in arbres; // renvoie false (il faut indiquer l'indice, pas la +// valeur) +"length" in arbres; // renvoie true (length est une propriété native) // Objets natifs -'PI' in Math; // renvoie true -const maChaine = new String('corail'); -'length' in maChaine; // renvoie true +"PI" in Math; // renvoie true +const maChaine = new String("corail"); +"length" in maChaine; // renvoie true // Objets personnalisés -const maVoiture = { fabricant: 'Honda', modele: 'Accord', annee: 1998 }; -'fabricant' in maVoiture; // renvoie true -'modele' in maVoiture; // renvoie true +const maVoiture = { fabricant: "Honda", modele: "Accord", annee: 1998 }; +"fabricant" in maVoiture; // renvoie true +"modele" in maVoiture; // renvoie true ``` ### `instanceof` @@ -905,7 +905,7 @@ const maVoiture = { fabricant: 'Honda', modele: 'Accord', annee: 1998 }; [L'opérateur `instanceof`](/fr/docs/Web/JavaScript/Reference/Operators/instanceof) renvoie `true` si l'objet porté par l'opérande gauche est du type indiqué par l'opérande droit. La syntaxe est : ```js -nomObjet instanceof typeObjet +nomObjet instanceof typeObjet; ``` où `nomObjet` est le nom de l'objet dont on souhaite vérifier le type et `typeObjet` est le type en question, comme [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date) ou [`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array). @@ -930,16 +930,16 @@ Tous les opérateurs manipulent en fin de compte une ou plusieurs expressions de [Le mot-clé `this`](/fr/docs/Web/JavaScript/Reference/Operators/this) fait référence à l'objet courant. En général, `this` fait référence à l'objet appelant d'une méthode. `this` pourra être utilisé avec la notation utilisant le point ou celle utilisant les crochets : ```js -this['nomPropriete'] -this.nomPropriete +this["nomPropriete"]; +this.nomPropriete; ``` Prenons une fonction `valider()` qui valide la propriété `value` d'un objet en fonction d'un minimum et d'un maximum : ```js function valider(obj, min, max) { - if ((obj.value < min) || (obj.value > max)) { - console.log('Valeur invalide !'); + if (obj.value < min || obj.value > max) { + console.log("Valeur invalide !"); } } ``` @@ -948,7 +948,7 @@ On peut appeler `valider()` pour un élément de formulaire sur le gestionnaire ```html

Saisissez un nombre entre 18 et 99 :

- + ``` ### Opérateur de groupement @@ -961,16 +961,16 @@ const b = 2; const c = 3; // Précédence par défaut -a + b * c // 7 +a + b * c; // 7 // Qui est évalue par défaut comme -a + (b * c) // 7 +a + (b * c); // 7 // On passe outre cette précédence pour // additionner avant de multiplier -(a + b) * c // 9 +(a + b) * c; // 9 // Ce qui est équivalent à -a * c + b * c // 9 +a * c + b * c; // 9 ``` ### `new` diff --git a/files/fr/web/javascript/guide/functions/index.md b/files/fr/web/javascript/guide/functions/index.md index a2452b035f732c..4a6dc26f72330a 100644 --- a/files/fr/web/javascript/guide/functions/index.md +++ b/files/fr/web/javascript/guide/functions/index.md @@ -43,30 +43,30 @@ function maFonction(monObjet) { monObjet.fabricant = "Toyota"; } -var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998}; +var mavoiture = { fabricant: "Honda", modèle: "Accord", année: 1998 }; var x, y; -x = mavoiture.fabricant; // x aura la valeur "Honda" +x = mavoiture.fabricant; // x aura la valeur "Honda" maFonction(mavoiture); y = mavoiture.fabricant; // y aura la valeur "Toyota" - // (la propriété fabricant a été modifiée par la fonction) +// (la propriété fabricant a été modifiée par la fonction) ``` > **Note :** Affecter un nouvel objet au paramètre n'aura **pas** d'effet en dehors de la fonction car cela revient à changer la valeur du paramètre plutôt que la valeur d'une des propriétés de l'objet. Par exemple : ```js function maFonction(monObjet) { - monObjet = {fabricant: "Ford", modèle: "Focus", année: 2006}; + monObjet = { fabricant: "Ford", modèle: "Focus", année: 2006 }; } -var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998}; +var mavoiture = { fabricant: "Honda", modèle: "Accord", année: 1998 }; var x, y; -x = mavoiture.fabricant; // x reçoit la valeur "Honda" +x = mavoiture.fabricant; // x reçoit la valeur "Honda" maFonction(mavoiture); -y = mavoiture.fabricant; // y reçoit la valeur "Honda" +y = mavoiture.fabricant; // y reçoit la valeur "Honda" ``` Dans le premier exemple, l'objet `mavoiture` était passé à la fonction `maFonction` qui le modifiait. Dans le second exemple, la fonction n'a pas modifié l'objet qui avait été passé en argument, elle a créé une nouvelle variable locale, possédant le même nom que l'objet global passé en argument : il n'y a donc pas de modifications sur cet objet global. @@ -76,14 +76,18 @@ Dans le premier exemple, l'objet `mavoiture` était passé à la fonction `maFon Syntaxiquement, la déclaration de fonction utilisée ci-dessus est une instruction. On peut également créer une fonction grâce à une **[expression de fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function)**. De telles fonctions peuvent être **anonymes** (ne pas avoir de nom correspondant). La fonction `carré` aurait pu être définie de la façon suivante : ```js -var carré = function (nombre) { return nombre * nombre }; +var carré = function (nombre) { + return nombre * nombre; +}; var x = carré(4); //x reçoit la valeur 16 ``` Cependant, un nom peut être utilisé dans une expression de fonction, ce afin de l'utiliser dans la fonction (récursivité) ou afin de l'identifier dans les appels tracés par un éventuel débogueur : ```js -var factorielle = function fac(n) { return n < 2 ? 1 : n * fac(n - 1) }; +var factorielle = function fac(n) { + return n < 2 ? 1 : n * fac(n - 1); +}; console.log(factorielle(3)); ``` @@ -93,8 +97,7 @@ Les expressions de fonction sont pratiques lorsqu'il s'agit de passer une foncti ```js function map(f, a) { var resultat = []; // Créer un nouveau tableau Array - for (var i = 0; i != a.length; i++) - resultat[i] = f(a[i]); + for (var i = 0; i != a.length; i++) resultat[i] = f(a[i]); return resultat; } ``` @@ -102,7 +105,9 @@ function map(f, a) { Le code suivant applique la fonction `cube` sur chacun des éléments du tableau : ```js -var cube = function(x) { return x * x * x}; // Une expression de fonction +var cube = function (x) { + return x * x * x; +}; // Une expression de fonction map(cube, [0, 1, 2, 5, 10]); ``` @@ -112,10 +117,10 @@ En JavaScript, une fonction peut être définie selon une condition. Le fragment ```js var maFonction; -if (num === 0){ - maFonction = function(monObjet) { - monObjet.fabricant = "Toyota" - } +if (num === 0) { + maFonction = function (monObjet) { + monObjet.fabricant = "Toyota"; + }; } ``` @@ -138,7 +143,9 @@ Les fonctions doivent appartenir à la portée dans laquelle elles sont appelée ```js console.log(carré(5)); /* ... */ -function carré(n) { return n*n } +function carré(n) { + return n * n; +} ``` La portée d'une fonction est la fonction dans laquelle elle est déclarée ou le programme entier si elle est déclarée au niveau le plus haut. @@ -150,7 +157,7 @@ console.log(carré); // La fonction carré est remontée/hoisted mais vaut undef console.log(carré(5)); // TypeError: carré is not a function var carré = function (n) { return n * n; -} +}; // Et avec let... @@ -159,7 +166,7 @@ console.log(carré2(5)); // TypeError: carré2 is not a function let carré2 = function (n) { return n * n; -} +}; ``` Les arguments d'une fonction ne sont pas limités aux chaînes de caractères et aux nombres. Il est possible de passer des objets. La fonction `show_props` (définie dans le chapitre sur [l'utilisation des objets](/fr/docs/JavaScript/Guide/Utiliser_les_objets)) est un exemple de fonction utilisant un argument qui est un objet. @@ -167,11 +174,9 @@ Les arguments d'une fonction ne sont pas limités aux chaînes de caractères et Une fonction peut être récursive, c'est-à-dire qu'elle peut s'appeler elle-même. Voici la fonction qui calcule récursivement la factorielle d'un nombre : ```js -function factorielle(n){ - if ((n === 0) || (n === 1)) - return 1; - else - return (n * factorielle(n - 1)); +function factorielle(n) { + if (n === 0 || n === 1) return 1; + else return n * factorielle(n - 1); } ``` @@ -195,8 +200,8 @@ On ne peut pas accéder aux variables définies dans une fonction en dehors de c ```js // Les variables suivantes sont globales var num1 = 20, - num2 = 3, - nom = "Licorne"; + num2 = 3, + nom = "Licorne"; // Cette fonction est définie dans la portée globale function multiplier() { @@ -206,9 +211,9 @@ function multiplier() { multiplier(); // Renvoie 60 // Un exemple de fonction imbriquée -function getScore () { +function getScore() { var num1 = 2, - num2 = 3; + num2 = 3; function ajoute() { return nom + " a marqué " + (num1 + num2); @@ -234,7 +239,7 @@ Par exemple, avec la définition de fonction suivante : ```js var toto = function truc() { - // les instructions de la fonction + // les instructions de la fonction }; ``` @@ -248,7 +253,8 @@ Une fonction qui s'appelle elle-même est appelée une fonction _récursive_. So ```js var x = 0; -while (x < 10) { // "x < 10" représente la condition d'arrêt +while (x < 10) { + // "x < 10" représente la condition d'arrêt // faire quelque chose x++; } @@ -258,8 +264,10 @@ pourra être converti en une fonction récursive de la façon suivante : ```js function boucle(x) { - if (x >= 10) // "x >= 10" représente la condition d'arrêt (équivalent à "!(x < 10)") + if (x >= 10) { + // "x >= 10" représente la condition d'arrêt (équivalent à "!(x < 10)") return; + } // faire quelque chose boucle(x + 1); // l'appel récursif } @@ -270,8 +278,9 @@ Malgré cela, certains algorithmes ne peuvent pas être convertis en boucles it ```js function parcourirArbre(noeud) { - if (noeud === null) // + if (noeud === null) { return; + } // faire quelque chose avec le noeud for (var i = 0; i < noeud.childNodes.length; i++) { parcourirArbre(noeud.childNodes[i]); @@ -287,18 +296,17 @@ Ce type de « comportement » peut-être observé avec l'exemple suivant : ```js function toto(i) { - if (i < 0) - return; - console.log('début : ' + i); + if (i < 0) return; + console.log("début : " + i); toto(i - 1); - console.log('fin : ' + i); + console.log("fin : " + i); } toto(3); ``` qui affichera : -```js +```plain début : 3 début : 2 début : 1 @@ -334,9 +342,9 @@ function ajouteCarrés(a, b) { } return carré(a) + carré(b); } -a = ajouteCarrés(2,3); // renvoie 13 -b = ajouteCarrés(3,4); // renvoie 25 -c = ajouteCarrés(4,5); // renvoie 41 +a = ajouteCarrés(2, 3); // renvoie 13 +b = ajouteCarrés(3, 4); // renvoie 25 +c = ajouteCarrés(4, 5); // renvoie 41 ``` La fonction interne étant une fermeture, on peut appeler la fonction parente afin de définir les arguments pour la fonction englobante et ceux de la fonction fille : @@ -409,26 +417,27 @@ Le conflit se produit à l'instruction `return x` entre le paramètre x de la fo Les fermetures sont l'une des fonctionnalités les plus intéressantes de JavaScript. Comme on l'a vu précédemment, JavaScript permet d'imbriquer des fonctions et la fonction interne aura accès aux variables et paramètres de la fonction parente. À l'inverse, la fonction parente ne pourra pas accéder aux variables liées à la fonction interne. Cela fournit une certaine sécurité pour les variables de la fonction interne. De plus, si la fonction interne peut exister plus longtemps que la fonction parente, les variables et fonctions de la fonction parente pourront exister au travers de la fonction interne. On crée une fermeture lorsque la fonction interne est disponible en dehors de la fonction parente. ```js -var animal = function(nom) { // La fonction externe utilise un paramètre "nom" +var animal = function (nom) { + // La fonction externe utilise un paramètre "nom" var getNom = function () { - return nom; // La fonction interne accède à la variable "nom" de la fonction externe - } - return getNom; // Renvoie la fonction interne pour la rendre disponible en dehors de la portée de la fonction parente -} + return nom; // La fonction interne accède à la variable "nom" de la fonction externe + }; + return getNom; // Renvoie la fonction interne pour la rendre disponible en dehors de la portée de la fonction parente +}; monAnimal = animal("Licorne"); -monAnimal(); // Renvoie "Licorne" +monAnimal(); // Renvoie "Licorne" ``` Bien entendu, dans la pratique, les cas peuvent être plus complexes. On peut renvoyer un objet qui contient des méthodes manipulant les variables internes de la fonction parente. ```js -var créerAnimal = function (nom) { +var créerAnimal = function (nom) { var sexe; return { - setNom: function(nouveauNom) { + setNom: function (nouveauNom) { nom = nouveauNom; }, @@ -440,47 +449,53 @@ var créerAnimal = function (nom) { return sexe; }, - setSexe: function(nouveauSexe) { - if (typeof nouveauSexe == "string" && (nouveauSexe.toLowerCase() == "mâle" || nouveauSexe.toLowerCase() == "femelle")) { + setSexe: function (nouveauSexe) { + if ( + typeof nouveauSexe == "string" && + (nouveauSexe.toLowerCase() == "mâle" || + nouveauSexe.toLowerCase() == "femelle") + ) { sexe = nouveauSexe; } - } - } -} + }, + }; +}; var animal = créerAnimal("Licorne"); -animal.getNom(); // Licorne +animal.getNom(); // Licorne animal.setNom("Bobby"); animal.setSexe("mâle"); -animal.getSexe(); // mâle -animal.getNom(); // Bobby +animal.getSexe(); // mâle +animal.getNom(); // Bobby ``` Dans le code précédent, la variable `nom` est de la fonction externe est accessible depuis les fonctions internes. Il est impossible d'accéder aux variables internes en dehors des fonctions internes. Les variables internes agissent comme des coffres-forts pour les fonctions internes. Elles permettent d'avoir un accès persistent et encapsulé aux données internes. Pour les fonctions, il n'est pas nécessaire de les affecter à une variable ou même de les nommer. ```js -var getCode = (function (){ - var codeAPI = "0]Eal(eh&2"; // Un code qu'on ne souhaite pas diffuser ni modifier +var getCode = (function () { + var codeAPI = "0]Eal(eh&2"; // Un code qu'on ne souhaite pas diffuser ni modifier return function () { return codeAPI; }; })(); -getCode(); // Renvoie la valeur du code +getCode(); // Renvoie la valeur du code ``` Il y a malgré tout quelques pièges auxquels il faut faire attention lorsqu'on utilise les fermetures. Si une fonction imbriquée définit une variable avec le même nom que le nom d'une variable de la portée externe, il n'y aura plus aucun moyen d'accéder à la variable. ```js -var créerAnimal = function(nom) { // La fonction externe définit une variable appelée "nom" +var créerAnimal = function (nom) { + // La fonction externe définit une variable appelée "nom" return { - setNom: function(nom) { // La fonction imbriquée définit une variable appelée "nom" - nom = nom; // ??? comment accéder à la variable "nom" définie par la fonction externe - } - } -} + setNom: function (nom) { + // La fonction imbriquée définit une variable appelée "nom" + nom = nom; // ??? comment accéder à la variable "nom" définie par la fonction externe + }, + }; +}; ``` L'opérateur [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this) doit être traité avec précaution dans les fermetures. Attention, `this` fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini. @@ -490,7 +505,7 @@ L'opérateur [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur Les arguments d'une fonction sont maintenus dans un objet semblable à un tableau. Dans une fonction, il est possible d'utiliser les arguments passés à la fonction de la façon suivante : ```js -arguments[i] +arguments[i]; ``` où `i` représente l'index ordinal de l'argument (le premier argument ayant un indice à 0). On accède donc au premier argument avec `arguments[0]`. Le nombre total d'arguments est fourni grâce à `arguments.length`. @@ -501,13 +516,13 @@ Par exemple, on peut construire une fonction qui concatène plusieurs chaînes. ```js function monConcat(séparateur) { - var result = ""; // on initialise la liste - var i; - // on parcourt les arguments - for (i = 1; i < arguments.length; i++) { - result += arguments[i] + séparateur; - } - return result; + var result = ""; // on initialise la liste + var i; + // on parcourt les arguments + for (i = 1; i < arguments.length; i++) { + result += arguments[i] + séparateur; + } + return result; } ``` @@ -540,9 +555,9 @@ Avant ECMAScript 2015, la stratégie pour manipuler des valeurs par défaut adap ```js function multiplier(a, b) { - b = typeof b !== 'undefined' ? b : 1; + b = typeof b !== "undefined" ? b : 1; - return a*b; + return a * b; } multiplier(5); // 5 @@ -552,7 +567,7 @@ Si on peut utiliser les paramètres par défaut, il n'est plus nécessaire de fa ```js function multiplier(a, b = 1) { - return a*b; + return a * b; } multiplier(5); // 5 @@ -566,7 +581,7 @@ La syntaxe des [paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonction ```js function multiplier(facteur, ...lesArgs) { - return lesArgs.map(x => facteur * x); + return lesArgs.map((x) => facteur * x); } var arr = multiplier(2, 1, 2, 3); @@ -584,16 +599,13 @@ Les fonctions fléchées ont été introduites pour deux raisons principales : u Dans certaines constructions fonctionnelles, on peut apprécier une syntaxe courte. Par exemple, si on compare les deux dernières lignes de ce fragment de code : ```js -var a = [ - "Hydrogen", - "Helium", - "Lithium", - "Beryllium" -]; +var a = ["Hydrogen", "Helium", "Lithium", "Beryllium"]; -var a2 = a.map(function(s){ return s.length }); +var a2 = a.map(function (s) { + return s.length; +}); console.log(a2); // affiche [8, 6, 7, 9] -var a3 = a.map( s => s.length ); +var a3 = a.map((s) => s.length); console.log(a3); // affiche [8, 6, 7, 9] ``` @@ -622,8 +634,8 @@ Avec ECMAScript 3/5, ce problème fut résolu avec l'affectation de la valeur de ```js function Personne() { var self = this; // Certains utilisent `that`, d'autres `self`. - // On utilisera l'un des deux et on pas - // l'autre pour être cohérent. + // On utilisera l'un des deux et on pas + // l'autre pour être cohérent. self.âge = 0; setInterval(function grandir() { @@ -639,7 +651,7 @@ On aurait aussi pu créer une fonction liée afin que la « bonne » valeur de ` Les fonctions fléchées capturent la valeur de `this` dans le contexte englobant et cela permet de manipuler la valeur pertinente ici : ```js -function Personne(){ +function Personne() { this.âge = 0; setInterval(() => { diff --git a/files/fr/web/javascript/guide/grammar_and_types/index.md b/files/fr/web/javascript/guide/grammar_and_types/index.md index 860aac4b76bc09..593e8793b2f806 100644 --- a/files/fr/web/javascript/guide/grammar_and_types/index.md +++ b/files/fr/web/javascript/guide/grammar_and_types/index.md @@ -95,7 +95,7 @@ Il est possible d'utiliser `undefined` pour déterminer si une variable possède ```js var input; -if (input === undefined){ +if (input === undefined) { faireCeci(); } else { faireCela(); @@ -106,7 +106,7 @@ La valeur `undefined` se comporte comme le booléen `false` lorsqu'elle est util ```js var monTableau = new Array(); -if (!monTableau[0]){ +if (!monTableau[0]) { maFunction(); } ``` @@ -209,16 +209,16 @@ En ce qui concerne les fonctions, seules les déclarations de fonctions sont rem ```js /* Déclaration de fonction */ -toto(); // "truc" -function toto(){ +toto(); // "truc" +function toto() { console.log("truc"); } /* Expression de fonction */ -machin(); // erreur TypeError : machin n'est pas une fonction -var machin = function() { +machin(); // erreur TypeError : machin n'est pas une fonction +var machin = function () { console.log("titi"); -} +}; ``` ### Les variables globales @@ -232,7 +232,7 @@ Ainsi, il est possible d'accéder à des variables déclarées dans une fenêtre Il est possible de créer des constantes en lecture seule en utilisant le mot-clé {{jsxref("Instructions/const","const")}}. La syntaxe d'un identifiant pour une constante est la même que pour les variables (elle doit débuter avec une lettre, un tiret du bas, un symbole dollar et peut contenir des caractères numériques, alphabétiques et des tirets bas voire des caractères Unicode). ```js -const préfixe = '212'; +const préfixe = "212"; ``` Une constante ne peut pas changer de valeur grâce à une affectation ou être re-déclarée pendant l'exécution du script. @@ -243,7 +243,7 @@ Il est impossible de déclarer une constante avec le même nom qu'une autre vari ```js example-bad // Renverra une erreur -function f() {}; +function f() {} const f = 5; // Renverra également une erreur @@ -258,7 +258,7 @@ function f() { Cependant, les propriétés des objets qui sont affectés comme constantes ne sont pas protégées, on pourra ainsi exécuter sans problème le code suivant : ```js -const MON_OBJET = {"clé": "valeur"}; +const MON_OBJET = { clé: "valeur" }; MON_OBJET.clé = "autreValeur"; ``` @@ -346,13 +346,13 @@ Une autre méthode pour récupérer un nombre à partir d'une chaîne de caract Les littéraux sont utilisés pour représenter des valeurs en JavaScript. Ce sont des valeurs fixes, pas des variables, qui sont fournies _littéralement_ au script. Cette section décrit les différents types de littéraux : -- [Littéraux de tableaux](<#les_littéraux_de_tableaux>) -- [Littéraux booléens](<#les_littéraux_booléens>) -- [Littéraux de nombres flottants](<#les_littéraux_de_nombres_décimaux>) -- [Littéraux numériques](<#les_littéraux_numériques>) -- [Littéraux d'objets](<#les_littéraux_dobjets>) +- [Littéraux de tableaux](#les_littéraux_de_tableaux) +- [Littéraux booléens](#les_littéraux_booléens) +- [Littéraux de nombres flottants](#les_littéraux_de_nombres_décimaux) +- [Littéraux numériques](#les_littéraux_numériques) +- [Littéraux d'objets](#les_littéraux_dobjets) - [Littéraux d'expressions rationnelles](#les_littéraux_dexpressions_rationnelles) -- [Littéraux de chaînes de caractères](<#les_littéraux_de_chaînes_de_caractères>) +- [Littéraux de chaînes de caractères](#les_littéraux_de_chaînes_de_caractères) ### Les littéraux de tableaux @@ -385,19 +385,19 @@ Si une virgule est ajoutée à la fin de la liste des éléments, elle est ignor > **Note :** Avec d'anciennes versions de navigateurs, les virgules de fin peuvent causer des erreurs, il est fortement conseillé de les retirer. ```js -var maListe = ['maison', , 'école', ]; +var maListe = ["maison", , "école"]; ``` Dans l'exemple qui suit, la longueur du tableau est égale à 4 et `maListe[0]` et `maListe[2]` sont manquants. ```js -var maListe = [ , 'maison', , 'école']; +var maListe = [, "maison", , "école"]; ``` Dans l'exemple qui suit, la longueur du tableau est égale à 4 et `maListe[1]` et `maListe[3]` sont manquants. ```js -var maListe = ['maison', , 'école', , ]; +var maListe = ["maison", , "école", ,]; ``` Comprendre le fonctionnement des virgules supplémentaires est important. Cependant, lorsque vous écrivez du code, veillez, dès que c'est possible, à déclarer les éléments manquants avec `undefined` : cela améliorera la lisibilité de votre code et il sera ainsi plus facile à maintenir. @@ -465,22 +465,24 @@ L'exemple qui suit montre l'utilisation d'un littéral d'objet. Le premier élé var soldes = "Toyota"; function carTypes(nom) { - return (nom === "Honda") ? - nom : - "Désolé, nous ne vendons pas de " + nom + "." ; + return nom === "Honda" ? nom : "Désolé, nous ne vendons pas de " + nom + "."; } -var voiture = { maVoiture: "Saturn", getVoiture: carTypes("Honda"), spécial: soldes }; +var voiture = { + maVoiture: "Saturn", + getVoiture: carTypes("Honda"), + spécial: soldes, +}; -console.log(voiture.maVoiture); // Saturn -console.log(voiture.getVoiture); // Honda +console.log(voiture.maVoiture); // Saturn +console.log(voiture.getVoiture); // Honda console.log(voiture.spécial); // Toyota ``` Il est également possible d'utiliser un littéral numérique ou un littéral de chaîne de caractères pour désigner le nom d'une propriété ou pour imbriquer un objet dans un autre. L'exemple qui suit illustre cette possibilité : ```js -var voiture = { plusieursVoitures: {a: "Saab", b: "Jeep"}, 7: "Mazda" }; +var voiture = { plusieursVoitures: { a: "Saab", b: "Jeep" }, 7: "Mazda" }; console.log(voiture.plusieursVoitures.b); // Jeep console.log(voiture[7]); // Mazda @@ -505,26 +507,26 @@ Avec ES2015, les littéraux d'objets permettent de définir le prototype lors de ```js var obj = { - // __proto__ - __proto__: lePrototypeDeLObjet, - // Notation raccourcie pour ‘handler: handler’ - handler, - // Méthodes - toString() { - // Appelle les méthodes de l'objet parent - return "d " + super.toString(); - }, - // Noms de propriétés calculés dynamiquement - [ 'prop_' + (() => 42)() ]: 42 + // __proto__ + __proto__: lePrototypeDeLObjet, + // Notation raccourcie pour ‘handler: handler’ + handler, + // Méthodes + toString() { + // Appelle les méthodes de l'objet parent + return "d " + super.toString(); + }, + // Noms de propriétés calculés dynamiquement + ["prop_" + (() => 42)()]: 42, }; ``` Attention : ```js -var toto = {a: "alpha", 2: "deux"}; -console.log(toto.a); // alpha -console.log(toto[2]); // deux +var toto = { a: "alpha", 2: "deux" }; +console.log(toto.a); // alpha +console.log(toto[2]); // deux //console.log(toto.2); // Erreur: parenthèse ) manquante après la liste d'argument //console.log(toto[a]); // Erreur: a n'est pas défini console.log(toto["a"]); // alpha @@ -552,7 +554,7 @@ Un littéral de chaîne de caractères consiste en zéro ou plusieurs caractère Il est possible d'utiliser les méthodes de [`String`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) sur un tel littéral. JavaScript convertira automatiquement le littéral en un objet `String`, appellera la méthode puis détruira l'objet `String`. On peut également utiliser la propriété `String.length` sur un littéral de chaîne de caractère : ```js -console.log("j'ai mangé une pomme".length) +console.log("j'ai mangé une pomme".length); // Affichera le nombre de caractères (y compris les blancs). // Dans ce cas, 20. ``` @@ -563,16 +565,15 @@ Avec ECMAScript 2015, on peut également utiliser des littéraux sous forme de _ ```js // Littéral simple pour une chaîne -`Un saut de ligne '\n' en JavaScript.` - -// On peut écrire une chaîne sur plusieurs +`Un saut de ligne '\n' en JavaScript.`// On peut écrire une chaîne sur plusieurs // lignes `Dans les gabarits, on peut écrire - sur plusieurs lignes. ` + sur plusieurs lignes. `; // Interpolation de chaîne -var nom = "Robert", jour = "aujourd'hui"; -`Bonjour ${nom}, comment allez-vous ${jour} ?` +var nom = "Robert", + jour = "aujourd'hui"; +`Bonjour ${nom}, comment allez-vous ${jour} ?`; // On peut construire un préfixe HTTP // afin de construire plus facilement @@ -589,29 +590,29 @@ POST`http://toto.org/truc?a=${a}&b=${b} En plus des caractères « classiques », il est possible d'insérer des caractères spéciaux dans les chaînes de caractères. Voici un exemple : ```js -"une ligne \n une autre ligne" +"une ligne \n une autre ligne"; ``` Voici un tableau listant les caractères spéciaux qu'il est possible d'utiliser dans les chaînes de caractères JavaScript : -| Caractère | Signification | -| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `\0` | Octet null | -| `\b` | Retour arrière | -| `\f` | Saut de page | -| `\n` | Nouvelle ligne | -| `\r` | Retour chariot | -| `\t` | Tabulation | -| `\v` | Tabulation verticale | -| `\'` | Apostrophe ou guillemet droit simple | -| `\"` | Guillemet droit double | -| `\\` | Barre oblique inversée | -| `\XXX` | Le caractère dont l'encodage Latin-1 est spécifié grâce à, au plus, 3 chiffres octaux _XXX_ entre 0 et 377. \251, par exemple représente le caractère copyright. | -| | | -| `\xXX` | Le caractère dont l'encodage Latin-1 est spécifié par deux chiffres hexadécimaux entre 00 et FF. Ainsi, \xA9 correspond à la séquence hexadécimale pour le caractère copyright. | -| | | +| Caractère | Signification | +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `\0` | Octet null | +| `\b` | Retour arrière | +| `\f` | Saut de page | +| `\n` | Nouvelle ligne | +| `\r` | Retour chariot | +| `\t` | Tabulation | +| `\v` | Tabulation verticale | +| `\'` | Apostrophe ou guillemet droit simple | +| `\"` | Guillemet droit double | +| `\\` | Barre oblique inversée | +| `\XXX` | Le caractère dont l'encodage Latin-1 est spécifié grâce à, au plus, 3 chiffres octaux _XXX_ entre 0 et 377. \251, par exemple représente le caractère copyright. | +| | | +| `\xXX` | Le caractère dont l'encodage Latin-1 est spécifié par deux chiffres hexadécimaux entre 00 et FF. Ainsi, \xA9 correspond à la séquence hexadécimale pour le caractère copyright. | +| | | | `\uXXXX` | Le caractère Unicode spécifié par quatre chiffres hexadécimaux _XXXX_. Ainsi, \u00A9 correspondra à la séquence Unicode du symbole copyright. Voir [Les caractères d'échappement Unicode](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#littéraux_de_chaînes_de_caractères). | -| `\u{XXXXX}` | Échappement de codes Unicode. Par exemple, \u{2F804} est équivalent à la combinaison d'échappements « simples » \uD87E\uDC04. | +| `\u{XXXXX}` | Échappement de codes Unicode. Par exemple, \u{2F804} est équivalent à la combinaison d'échappements « simples » \uD87E\uDC04. | #### Les caractères d'échappement @@ -619,7 +620,7 @@ Pour les caractères qui ne font pas partie du tableau précédent, les barres o En précédant d'une barre oblique inversée les guillemets droits doubles, on _échappe_ ces caractères. Voici un exemple : -```js +```js-nolint var citation = "Il lit \"Bug Jargal\" de V. Hugo."; console.log(citation); ``` @@ -639,31 +640,31 @@ var chemin = "c:\\temp"; Il est également possible d'échapper des sauts de lignes de la même façon. La barre oblique inversée et le saut de ligne seront alors ignorés dans la valeur de la chaîne de caractères. ```js -var str = "cette chaîne \ +var str = + "cette chaîne \ est cassée \ sur plusieurs \ -lignes." -console.log(str); // cette chaîne est cassée sur plusieurs lignes. +lignes."; +console.log(str); // cette chaîne est cassée sur plusieurs lignes. ``` Avant ECMAScript 2015 (ES6), JavaScript ne disposait pas d'une syntaxe permettant de traiter les chaînes de caractères comme des contenus de fichier, il est possible d'ajouter un caractère de saut de ligne échappé et un saut de ligne en fin de ligne en utilisant cette façon : ```js var poème = -"Les roses sont rouges,\n\ + "Les roses sont rouges,\n\ Les violettes sont bleues.\n\ Le miel est sucré,\n\ -Et moi je suis." +Et moi je suis."; ``` Grâce à ES6, on peut utiliser des [littéraux de gabarits qui offrent de nouvelles fonctionnalités](https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres) dont une qui permet d'avoir des chaînes de caractères écrites sur plusieurs lignes : ```js -var poème = -`Les roses sont rouges, +var poème = `Les roses sont rouges, Les violettes sont bleues, Le miel est sucré, -Et moi je suis.` +Et moi je suis.`; ``` ## En savoir plus diff --git a/files/fr/web/javascript/guide/indexed_collections/index.md b/files/fr/web/javascript/guide/indexed_collections/index.md index d763d3bdedd12e..59f3cb186fda5c 100644 --- a/files/fr/web/javascript/guide/indexed_collections/index.md +++ b/files/fr/web/javascript/guide/indexed_collections/index.md @@ -10,7 +10,7 @@ Ce chapitre présente les collections de données qui sont ordonnées par un ind ## Le type `Array` -Un *tableau* (array en anglais) est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice. Par exemple, si on a un tableau `emp` qui contient les noms d'employés indexés par leurs numéros d'employé, on pourrait utiliser `emp[0]` pour accéder à l'employé 0, `emp[1]` pour accéder au suivant et ainsi de suite. +Un _tableau_ (array en anglais) est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice. Par exemple, si on a un tableau `emp` qui contient les noms d'employés indexés par leurs numéros d'employé, on pourrait utiliser `emp[0]` pour accéder à l'employé 0, `emp[1]` pour accéder au suivant et ainsi de suite. JavaScript ne possède pas de type particulier pour représenter un tableau de données. En revanche, il est possible d'utiliser l'objet natif `Array` ainsi que ses méthodes pour manipuler des tableaux. L'objet `Array` possède plusieurs méthodes qui permettent de manipuler les tableaux pour les fusionner, les inverser, les trier, etc. Il possède une propriété de longueur ainsi que d'autres propriétés qui peuvent être utilisées avec les expressions rationnelles. @@ -57,9 +57,9 @@ let obj = {prop: [élément0, élément1, ...., élémentN]} Si on souhaite initialiser un tableau avec un seul élément et que cet élément est un nombre, il est nécessaire d'utiliser la notation littérale. En effet, si un nombre est passé à la fonction `Array()` pour construire le tableau, celui-ci sera interprété comme une longueur et non comme la valeur d'un élément. ```js -let arr1 = [42]; // Le tableau créé contient bien un élément qui vaut 42 +let arr1 = [42]; // Le tableau créé contient bien un élément qui vaut 42 let arr2 = Array(42); // Crée un tableau sans élément - // mais dont arr.length vaut 42 +// mais dont arr.length vaut 42 // Le code ci-dessus est équivalent à let arr = []; @@ -69,7 +69,7 @@ arr.length = 42; Si N est un nombre décimal dont la partie fractionnaire n'est pas nulle, tout appel à `Array(N)` renverra une exception `RangeError`. Par exemple : ```js -let arr = Array(9.3); // RangeError: Invalid array length +let arr = Array(9.3); // RangeError: Invalid array length ``` Si on souhaite créer un tableau d'un seul élément et ce quel que soit le type de données, il sera préférable d'utiliser les littéraux de tableaux. Sinon, on peut créer un tableau vide puis lui ajouter un seul élément. @@ -96,15 +96,15 @@ emp[2] = "August West"; > ```js > let arr = []; > arr[3.4] = "Oranges"; -> console.log(arr.length); // 0 -> console.log(arr.hasOwnProperty(3.4)); // true +> console.log(arr.length); // 0 +> console.log(arr.hasOwnProperty(3.4)); // true > ``` Il est aussi possible de remplir un tableau directement lors de sa création : ```js let monTableau = new Array("Coucou", maVar, 3.14159); -let monTableau = ["Mangue", "Pomme", "Orange"] +let monTableau = ["Mangue", "Pomme", "Orange"]; ``` ### Faire référence aux éléments d'un tableau @@ -121,8 +121,8 @@ On pourra accéder au premier élément du tableau en utilisant `monTableau[0]`, > > ```js > let arr = ["un", "deux", "trois"]; -> arr[2]; // "trois" - on accède à un élément du tableau -> arr["length"]; // 3 - on accède à une propriété du tableau +> arr[2]; // "trois" - on accède à un élément du tableau +> arr["length"]; // 3 - on accède à une propriété du tableau > ``` ### Comprendre la propriété `length` @@ -131,14 +131,14 @@ En termes d'implémentation, les tableaux JavaScript stockent leurs éléments c ```js let chats = []; -chats[30] = ['Biduche']; +chats[30] = ["Biduche"]; console.log(chats.length); // 31 ``` Il est aussi possible d'affecter une valeur à la propriété `length`. Si la valeur fournie est inférieure au nombre d'éléments stockés, cela tronquera le tableau. Si la valeur est 0, cela videra le tableau : ```js -let chats = ['Marie', 'Toulouse', 'Berlioz']; +let chats = ["Marie", "Toulouse", "Berlioz"]; console.log(chats.length); // 3 chats.length = 2; @@ -156,7 +156,7 @@ console.log(chats); // [ <3 empty slots> ] Un tableau est une structure de données qui se prête particulièrement aux boucles, on pourra utiliser ces dernières pour parcourir les éléments du tableau de façon itérative. Voici un exemple de parcours simple : ```js -let couleurs = ['rouge', 'vert', 'bleu']; +let couleurs = ["rouge", "vert", "bleu"]; for (let i = 0; i < couleurs.length; i++) { console.log(couleurs[i]); } @@ -165,8 +165,8 @@ for (let i = 0; i < couleurs.length; i++) { Si on sait qu'aucun des éléments ne vaut `false` dans un contexte booléen (par exemple, si le tableau contient des nœuds du [DOM](/fr/docs/Web/API/Document_Object_Model)), on peut utiliser une formulation encore plus concise : ```js -let divs = document.getElementsByTagName('div'); -for (let i = 0, div; div = divs[i]; i++) { +let divs = document.getElementsByTagName("div"); +for (let i = 0, div; (div = divs[i]); i++) { /* On effectue un traitement sur les div */ } ``` @@ -176,8 +176,8 @@ Cette syntaxe permet d'éviter d'avoir à vérifier la longueur du tableau et de La méthode [`forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) fournit une autre méthode pour parcourir un tableau : ```js -let couleurs = ['rouge', 'vert', 'bleu']; -couleurs.forEach(function(couleur) { +let couleurs = ["rouge", "vert", "bleu"]; +couleurs.forEach(function (couleur) { console.log(couleur); }); ``` @@ -185,8 +185,8 @@ couleurs.forEach(function(couleur) { Avec les fonctions fléchées (apparues avec ES6 / ECMAScript 2015), on peut obtenir un code plus concis : ```js -let couleurs = ['rouge', 'vert', 'bleu']; -couleurs.forEach(couleur => console.log(couleur)); +let couleurs = ["rouge", "vert", "bleu"]; +couleurs.forEach((couleur) => console.log(couleur)); ``` La fonction passée comme argument à `forEach()` est exécutée une fois pour chacun des éléments du tableau (l'élément du tableau sera passé comme argument de cette fonction). Les éléments qui n'ont pas de valeur affectée ne sont pas parcourus lors d'une boucle `forEach`. @@ -194,21 +194,23 @@ La fonction passée comme argument à `forEach()` est exécutée une fois pour c On notera que les éléments ne sont pas parcourus lorsqu'ils n'ont pas eu de valeur affectée. Cependant, si on a affecté la valeur [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) de façon explicite à un élément, il sera pris en compte lors de la boucle : ```js -let tableau = ['premier', 'deuxième', , 'quatrième']; +let tableau = ["premier", "deuxième", , "quatrième"]; // affiche ['premier', 'deuxième', 'quatrième']; -tableau.forEach(function(élément) { +tableau.forEach(function (élément) { console.log(élément); }); -if(tableau[2] === undefined) { console.log('tableau[2] vaut undefined'); } // true +if (tableau[2] === undefined) { + console.log("tableau[2] vaut undefined"); +} // true -let tableau = ['premier', 'deuxième', undefined, 'quatrième']; +let tableau = ["premier", "deuxième", undefined, "quatrième"]; // renvoie ['premier', 'deuxième', undefined, 'quatrième']; -tableau.forEach(function(élément) { +tableau.forEach(function (élément) { console.log(élément); -}) +}); ``` Étant donné que les éléments des tableaux sont stockés comme des propriétés classiques, il n'est pas conseillé d'utiliser des boucles [`for…in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in) pour parcourir les tableaux car cela listerait également les propriétés énumérables (en plus des éléments). @@ -220,76 +222,76 @@ L'objet `Array` possède les méthodes suivantes : - [`concat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) permet de fusionner deux ou plusieurs tableaux et de renvoyer le résultat dans un nouveau tableau : ```js - let monTableau = new Array("1", "2", "3"); - monTableau = monTableau.concat("a", "b", "c"); // monTableau is now ["1", "2", "3", "a", "b", "c"] - ``` + let monTableau = new Array("1", "2", "3"); + monTableau = monTableau.concat("a", "b", "c"); // monTableau is now ["1", "2", "3", "a", "b", "c"] + ``` - [`join(délimiteur = ',')`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join) permet de fusionner les éléments du tableau en une chaîne de caractères : ```js - let monTableau = new Array("Air", "Eau", "Feu"); - let list = monTableau.join(" - "); // list sera "Air - Eau - Feu" - ``` + let monTableau = new Array("Air", "Eau", "Feu"); + let list = monTableau.join(" - "); // list sera "Air - Eau - Feu" + ``` - [`push()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/push) permet d'ajouter un ou plusieurs éléments à la fin d'un tableau et renvoie la longueur du tableau : ```js - let monTableau = new Array("1", "2"); - monTableau.push("3"); // monTableau vaut désormais ["1", "2", "3"] - ``` + let monTableau = new Array("1", "2"); + monTableau.push("3"); // monTableau vaut désormais ["1", "2", "3"] + ``` - [`pop()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) permet de retirer le dernier élément (le plus à droite) du tableau et renvoie cet élément : ```js - let monTableau = new Array("1", "2", "3"); - let dernier = monTableau.pop(); // monTableau vaut désormais ["1", "2"], dernier = "3" - ``` + let monTableau = new Array("1", "2", "3"); + let dernier = monTableau.pop(); // monTableau vaut désormais ["1", "2"], dernier = "3" + ``` - [`shift()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) retire le premier élément d'un tableau (le plus à gauche) et renvoie cet élément : ```js - let monTableau = new Array("1", "2", "3"); - let premier = monTableau.shift(); // monTableau vaut désormais ["2", "3"], premier vaut "1" - ``` + let monTableau = new Array("1", "2", "3"); + let premier = monTableau.shift(); // monTableau vaut désormais ["2", "3"], premier vaut "1" + ``` - [`unshift()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) ajoute un ou plusieurs éléments au début du tableau et renvoie la longueur du tableau ainsi modifié : ```js - let monTableau = new Array("1", "2", "3"); - monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"] - ``` + let monTableau = new Array("1", "2", "3"); + monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"] + ``` - [`slice(indice_début, indice_fin)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) extrait une portion d'un tableau et renvoie un nouveau tableau avec ce fragment : ```js - let monTableau = new Array ("a", "b", "c", "d", "e"); - monTableau = monTableau.slice(1, 4); // extrait les éléments entre l'indice 1 et jusqu'à - // celui d'indice 3 (4-1), elle renvoie - // [ "b", "c", "d"] - ``` + let monTableau = new Array("a", "b", "c", "d", "e"); + monTableau = monTableau.slice(1, 4); // extrait les éléments entre l'indice 1 et jusqu'à + // celui d'indice 3 (4-1), elle renvoie + // [ "b", "c", "d"] + ``` - [`splice(indice, nbASupprimer, ajouterElement1, ajouterElement2, ...)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) retire des éléments du tableau et (éventuellement) les remplace : ```js - let monTableau = new Array ("1", "2", "3", "4", "5"); - monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut désormais ["1", "a", "b", "c", "d", "5"] - // Le code remplace à partir de l'indice 1 (où il y avait la valeur "2"), supprime trois éléments puis - // insère les arguments fournis à la suite. - ``` + let monTableau = new Array("1", "2", "3", "4", "5"); + monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut désormais ["1", "a", "b", "c", "d", "5"] + // Le code remplace à partir de l'indice 1 (où il y avait la valeur "2"), supprime trois éléments puis + // insère les arguments fournis à la suite. + ``` - [`reverse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) transpose les éléments du tableau à même ce tableau : le premier élément devient le dernier, le dernier devient le premier et ainsi de suite : ```js - let monTableau = new Array ("1", "2", "3"); - monTableau.reverse(); // monTableau vaut maintenant [ "3", "2", "1" ] - ``` + let monTableau = new Array("1", "2", "3"); + monTableau.reverse(); // monTableau vaut maintenant [ "3", "2", "1" ] + ``` - [`sort()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) trie les éléments d'un tableau à même ce tableau : ```js - let monTableau = new Array("Air", "Feu", "Eau"); - monTableau.sort(); // trie le tableau [ "Air", "Eau", "Feu" ] - ``` + let monTableau = new Array("Air", "Feu", "Eau"); + monTableau.sort(); // trie le tableau [ "Air", "Eau", "Feu" ] + ``` `sort()` peut également utiliser une fonction de rappel (callback) qui détermine comment les éléments sont comparés. La fonction compare deux arguments et renvoie une valeur selon les règles suivantes : @@ -300,84 +302,88 @@ L'objet `Array` possède les méthodes suivantes : Par exemple, on peut utilise la fonction suivante pour trier par rapport à la dernière lettre du mot : ```js - let sortFn = function(a, b){ - if (a[a.length - 1] < b[b.length - 1]) return -1; - if (a[a.length - 1] > b[b.length - 1]) return 1; - if (a[a.length - 1] == b[b.length - 1]) return 0; - } - monTableau.sort(sortFn); // le tableau devient = ["Air","Feu","Eau"] - ``` + let sortFn = function (a, b) { + if (a[a.length - 1] < b[b.length - 1]) return -1; + if (a[a.length - 1] > b[b.length - 1]) return 1; + if (a[a.length - 1] == b[b.length - 1]) return 0; + }; + monTableau.sort(sortFn); // le tableau devient = ["Air","Feu","Eau"] + ``` Du code permettant d'émuler ces fonctions est disponible sur chacune des pages (_polyfill_). Le support natif de ces fonctionnalités dans les différents navigateurs peut être trouvé [ici](http://www.robertnyman.com/javascript/). - [`indexOf(élémentRecherché[, indiceDépart])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) recherche la valeur `élémentRecherché` dans le tableau et renvoie l'indice du premier élément qui correspond : ```js - let a = ['a', 'b', 'a', 'b', 'a']; - console.log(a.indexOf('b')); // Affiche 1 - // On recherche après la première correspondance : - console.log(a.indexOf('b', 2)); // Affiche 3 - console.log(a.indexOf('z')); // Affiche -1 car 'z' n'a pas été trouvé - ``` + let a = ["a", "b", "a", "b", "a"]; + console.log(a.indexOf("b")); // Affiche 1 + // On recherche après la première correspondance : + console.log(a.indexOf("b", 2)); // Affiche 3 + console.log(a.indexOf("z")); // Affiche -1 car 'z' n'a pas été trouvé + ``` - [`lastIndexOf(élémentRecherché[, fromIndex])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf) fonctionne comme `indexOf`, mais recherche à partir de la fin du tableau : ```js - let a = ['a', 'b', 'c', 'd', 'a', 'b']; - console.log(a.lastIndexOf('b')); // Affiche 5 - // On continue la recherche après la première correspondance en fin de tableau - console.log(a.lastIndexOf('b', 4)); // Affiche 1 - console.log(a.lastIndexOf('z')); // Affiche -1 - ``` + let a = ["a", "b", "c", "d", "a", "b"]; + console.log(a.lastIndexOf("b")); // Affiche 5 + // On continue la recherche après la première correspondance en fin de tableau + console.log(a.lastIndexOf("b", 4)); // Affiche 1 + console.log(a.lastIndexOf("z")); // Affiche -1 + ``` - [`forEach(callback[, objetThis])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) exécute la fonction `callback` sur chaque élément du tableau. ```js - let a = ['a', 'b', 'c']; - a.forEach(console.log); // Affichera la valeur de chaque élément dans la console - ``` + let a = ["a", "b", "c"]; + a.forEach(console.log); // Affichera la valeur de chaque élément dans la console + ``` - [`map(callback[, objetThis])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map) renvoie un nouveau tableau dont les éléments sont les images des éléments du tableau courant par la fonction `callback` : ```js - let a1 = ['a', 'b', 'c']; - let a2 = a1.map(function(item) { return item.toUpperCase(); }); - console.log(a2); // affichera A,B,C dans la console - ``` + let a1 = ["a", "b", "c"]; + let a2 = a1.map(function (item) { + return item.toUpperCase(); + }); + console.log(a2); // affichera A,B,C dans la console + ``` - [`filter(callback[, objetThis])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) renvoie un nouveau tableau qui contient les éléments du tableau courant pour lesquels `callback` a renvoyé `true`. ```js - let a1 = ['a', 10, 'b', 20, 'c', 30]; - let a2 = a1.filter(function(item) { return typeof item == 'number'; }); - console.log(a2); // Affichera 10,20,30 dans la console - ``` + let a1 = ["a", 10, "b", 20, "c", 30]; + let a2 = a1.filter(function (item) { + return typeof item == "number"; + }); + console.log(a2); // Affichera 10,20,30 dans la console + ``` - [`every(callback[, objetThis])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/every) renvoie `true` si `callback` renvoie `true` pour chaque élément du tableau. ```js - function isNumber(value){ - return typeof value === 'number'; - } - let a1 = [1, 2, 3]; - console.log(a1.every(isNumber)); // affiche true - let a2 = [1, '2', 3]; - console.log(a2.every(isNumber)); // affiche false - ``` + function isNumber(value) { + return typeof value === "number"; + } + let a1 = [1, 2, 3]; + console.log(a1.every(isNumber)); // affiche true + let a2 = [1, "2", 3]; + console.log(a2.every(isNumber)); // affiche false + ``` - [`some(callback[, objetThis])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/some) renvoie `true` si `callback` renvoie `true` pour au moins un élément du tableau. ```js - function isNumber(value){ - return typeof value === 'number'; - } - let a1 = [1, 2, 3]; - console.log(a1.some(isNumber)); // Affiche true - let a2 = [1, '2', 3]; - console.log(a2.some(isNumber)); // Affiche true - let a3 = ['1', '2', '3']; - console.log(a3.some(isNumber)); // Affiche false - ``` + function isNumber(value) { + return typeof value === "number"; + } + let a1 = [1, 2, 3]; + console.log(a1.some(isNumber)); // Affiche true + let a2 = [1, "2", 3]; + console.log(a2.some(isNumber)); // Affiche true + let a3 = ["1", "2", "3"]; + console.log(a3.some(isNumber)); // Affiche false + ``` Les méthodes présentées ci-avant qui prennent une fonction de rappel (callback) en argument sont appelées méthodes itératives, car elles parcourent le tableau de façon itérative. Chacune de ces méthodes peut prendre en compte un deuxième argument (optionnel) qui sera l'objet `this` pris en compte par le callback. Si ce deuxième argument n'est pas fourni, `this` vaudra la valeur de l'objet global. @@ -386,10 +392,12 @@ L'objet `Array` possède les méthodes suivantes : - [`reduce(callback[, valeurInitiale])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) applique `callback(premièreValeur, secondeValeur)` au fur et à mesure sur le tableau pour le réduire en une seule valeur, c'est cette valeur qui est renvoyée par la fonction : ```js - let a = [10, 20, 30]; - let total = a.reduce(function(premier, deuxième) { return premier + deuxième; }, 0); - console.log(total) // Affiche 60 - ``` + let a = [10, 20, 30]; + let total = a.reduce(function (premier, deuxième) { + return premier + deuxième; + }, 0); + console.log(total); // Affiche 60 + ``` - [`reduceRight(callback[, valeurInitiale])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight) fonctionne comme `reduce()`, mais débute avec le dernier élément (parcourt le tableau de droite à gauche). @@ -427,7 +435,7 @@ Il est aussi possible d'utiliser les tableaux comme des objets afin de stocker d ```js const tableau = [1, 2, 3]; tableau.propriete = "valeur"; -console.log(tableau.propriete); // Affiche "valeur" dans la console +console.log(tableau.propriete); // Affiche "valeur" dans la console ``` ### Les tableaux et les expressions rationnelles @@ -442,7 +450,8 @@ Les méthodes du prototype des tableaux permettent d'utiliser les méthodes d'ob ```js example-bad function printArguments() { - arguments.forEach(function(item) { // TypeError: arguments.forEach is not a function + arguments.forEach(function (item) { + // TypeError: arguments.forEach is not a function console.log(item); }); } @@ -450,7 +459,7 @@ function printArguments() { ```js function printArguments() { - Array.prototype.forEach.call(arguments, function(item) { + Array.prototype.forEach.call(arguments, function (item) { console.log(item); }); } @@ -459,8 +468,8 @@ function printArguments() { Il est possible d'utiliser ces méthodes génériques sur des chaînes de caractères : ```js -Array.prototype.forEach.call("une chaîne", function(chr) { - console.log(chr); +Array.prototype.forEach.call("une chaîne", function (chr) { + console.log(chr); }); ``` @@ -482,19 +491,19 @@ Le type [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBu Les vues de tableaux typés possèdent des noms explicites et fournissent des vues pour les types numériques usuels tels que `Int8`, `Uint32`, `Float64` et ainsi de suite. Il existe un type de vue spécial qui est `Uint8ClampedArray`. Ce type ramène les différentes valeurs exploitées entre 0 et 255. Cela peut notamment être utile pour [le traitement des données d'un canvas](/fr/docs/Web/API/ImageData). -| Type | Intervalle de valeurs | Taille exprimée en octets | Description | Type Web IDL | Type équivalent en C | -| ---------------------------------------- | --------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------- | --------------------- | ------------------------------- | -| [`Int8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int8Array) | `-128` à `127` | 1 | Entier signé avec complément à deux sur 8 bits | `byte` | `int8_t` | -| [`Uint8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) | `0` à `255` | 1 | Entier non-signé sur 8 bits | `octet` | `uint8_t` | -| [`Uint8ClampedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) | `0` à `255` | 1 | Entier non-signé sur 8 bit (écrété) | `octet` | `uint8_t` | -| [`Int16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int16Array) | `-32768` à `32767` | 2 | Entier signé avec complément à deux sur 16 bits | `short` | `int16_t` | -| [`Uint16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array) | `0` à `65535` | 2 | Entier non-signé sur 16 bits | `unsigned short` | `uint16_t` | -| [`Int32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int32Array) | `-2147483648` à `2147483647` | 4 | Entier signé avec complément à deux sur 32 bits | `long` | `int32_t` | -| [`Uint32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array) | `0` à `4294967295` | 4 | Entier non-signé sur 32 bits | `unsigned long` | `uint32_t` | -| [`Float32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float32Array) | `-3.4E38` à `3.4E38` et `1.2E-38` est le plus petit nombre positif | 4 | Nombre flottant sur 32 bits IEEE 754 (7 chiffres significatifs, ex. `1.123456`) | `unrestricted float` | `float` | -| [`Float64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float64Array) | `-1.8E308` à `1.8E308` et `5E-324` est le plus petit nombre positif | 8 | Nombre flottant sur 64 bits IEEE 754 (16 chiffres significatifs, ex. `1.123...15`) | `unrestricted double` | `double` | -| [`BigInt64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array) | `-2^63` à `2^63 - 1` | 8 | Entier signé avec complément à deux sur 64 bits | `bigint` | `int64_t (signed long long)` | -| [`BigUint64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array) | `0` à `2^64 - 1` | 8 | Entier non-signé sur 64 bits | `bigint` | `uint64_t (unsigned long long)` | +| Type | Intervalle de valeurs | Taille exprimée en octets | Description | Type Web IDL | Type équivalent en C | +| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------- | ---------------------------------------------------------------------------------- | --------------------- | ------------------------------- | +| [`Int8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int8Array) | `-128` à `127` | 1 | Entier signé avec complément à deux sur 8 bits | `byte` | `int8_t` | +| [`Uint8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) | `0` à `255` | 1 | Entier non-signé sur 8 bits | `octet` | `uint8_t` | +| [`Uint8ClampedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) | `0` à `255` | 1 | Entier non-signé sur 8 bit (écrété) | `octet` | `uint8_t` | +| [`Int16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int16Array) | `-32768` à `32767` | 2 | Entier signé avec complément à deux sur 16 bits | `short` | `int16_t` | +| [`Uint16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array) | `0` à `65535` | 2 | Entier non-signé sur 16 bits | `unsigned short` | `uint16_t` | +| [`Int32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int32Array) | `-2147483648` à `2147483647` | 4 | Entier signé avec complément à deux sur 32 bits | `long` | `int32_t` | +| [`Uint32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array) | `0` à `4294967295` | 4 | Entier non-signé sur 32 bits | `unsigned long` | `uint32_t` | +| [`Float32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float32Array) | `-3.4E38` à `3.4E38` et `1.2E-38` est le plus petit nombre positif | 4 | Nombre flottant sur 32 bits IEEE 754 (7 chiffres significatifs, ex. `1.123456`) | `unrestricted float` | `float` | +| [`Float64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float64Array) | `-1.8E308` à `1.8E308` et `5E-324` est le plus petit nombre positif | 8 | Nombre flottant sur 64 bits IEEE 754 (16 chiffres significatifs, ex. `1.123...15`) | `unrestricted double` | `double` | +| [`BigInt64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array) | `-2^63` à `2^63 - 1` | 8 | Entier signé avec complément à deux sur 64 bits | `bigint` | `int64_t (signed long long)` | +| [`BigUint64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array) | `0` à `2^64 - 1` | 8 | Entier non-signé sur 64 bits | `bigint` | `uint64_t (unsigned long long)` | Pour plus d'informations sur les tableaux typés, voir [l'article de la référence](/fr/docs/Web/JavaScript/Typed_arrays) sur les différents objets [`TypedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray). diff --git a/files/fr/web/javascript/guide/introduction/index.md b/files/fr/web/javascript/guide/introduction/index.md index d2099eff49323d..7422e47a7707a9 100644 --- a/files/fr/web/javascript/guide/introduction/index.md +++ b/files/fr/web/javascript/guide/introduction/index.md @@ -88,9 +88,9 @@ La console fonctionne exactement de la même manière que `eval` : la derni ```js function saluer(votreNom) { - alert("Hello " + votreNom) + alert("Hello " + votreNom); } -console.log(eval('3 + 5')) +console.log(eval("3 + 5")); ``` ### Le mode éditeur multiligne diff --git a/files/fr/web/javascript/guide/iterators_and_generators/index.md b/files/fr/web/javascript/guide/iterators_and_generators/index.md index 3eb83de29f81b3..0256db3db8b6f0 100644 --- a/files/fr/web/javascript/guide/iterators_and_generators/index.md +++ b/files/fr/web/javascript/guide/iterators_and_generators/index.md @@ -31,7 +31,7 @@ function creerIterateurIntervalle(debut = 0, fin = Infinity, pas = 1) { let nbIterations = 0; const rangeIterator = { - next: function() { + next: function () { let resultat; if (prochainIndex < fin) { resultat = { value: prochainIndex, done: false }; @@ -39,8 +39,8 @@ function creerIterateurIntervalle(debut = 0, fin = Infinity, pas = 1) { nbIterations++; return resultat; } - return { value: nbIterations, done: true } - } + return { value: nbIterations, done: true }; + }, }; return rangeIterator; } @@ -53,8 +53,8 @@ let it = creerIterateurIntervalle(1, 10, 2); let resultat = it.next(); while (!resultat.done) { - console.log(resultat.value); // 1 3 5 7 9 - resultat = it.next(); + console.log(resultat.value); // 1 3 5 7 9 + resultat = it.next(); } console.log("La séquence parcourue contenait ", result.value, " éléments."); @@ -73,11 +73,11 @@ Il est possible de définir ses propres itérables de cette façon : ```js var monItérable = {}; monItérable[Symbol.iterator] = function* () { - yield 1; - yield 2; - yield 3; + yield 1; + yield 2; + yield 3; }; -[...monItérable] // [1, 2, 3] +[...monItérable]; // [1, 2, 3] ``` ### Itérables natifs @@ -89,23 +89,22 @@ monItérable[Symbol.iterator] = function* () { Certaines instructions ou expressions utilisent des itérables, par exemple les boucles {{jsxref("Instructions/for...of","for...of")}} et {{jsxref("Opérateurs/yield*","yield*")}}. ```js -for(let value of ["a", "b", "c"]){ - console.log(value) +for (let value of ["a", "b", "c"]) { + console.log(value); } // "a" // "b" // "c" -[..."abc"] // ["a", "b", "c"] +[..."abc"]; // ["a", "b", "c"] -function* gen(){ - yield* ["a", "b", "c"] +function* gen() { + yield* ["a", "b", "c"]; } -gen().next() // { value:"a", done:false } - -[a, b, c] = new Set(["a", "b", "c"]) -a // "a" +gen().next()[(a, b, c)] = // { value:"a", done:false } + new Set(["a", "b", "c"]); +a; // "a" ``` ## Générateurs @@ -115,10 +114,9 @@ Les itérateurs personnalisés sont un outil utile mais leur création peut s'av Un générateur est un type de fonction spécial qui fonctionne comme une fabrique (_factory_) d'itérateurs. Une fonction devient un générateur lorsqu'elle contient une ou plusieurs expressions `yield` et qu'elle utilise la syntaxe `function*`. ```js -function* idMaker(){ +function* idMaker() { var index = 0; - while(true) - yield index++; + while (true) yield index++; } var gen = idMaker(); @@ -138,33 +136,33 @@ La méthode `next()` accepte également un argument qui pourra être utilisé po Par exemple, on peut avoir un générateur pour la suite de Fibonnaci et utiliser `next(x)` pour redémarrer la série : ```js -function* fibonacci(){ +function* fibonacci() { var fn1 = 0; var fn2 = 1; - while (true){ + while (true) { var current = fn1; fn1 = fn2; fn2 = fn1 + current; var reset = yield current; - if (reset){ - fn1 = 0; - fn2 = 1; + if (reset) { + fn1 = 0; + fn2 = 1; } } } var sequence = fibonacci(); -console.log(sequence.next().value); // 0 -console.log(sequence.next().value); // 1 -console.log(sequence.next().value); // 1 -console.log(sequence.next().value); // 2 -console.log(sequence.next().value); // 3 -console.log(sequence.next().value); // 5 -console.log(sequence.next().value); // 8 +console.log(sequence.next().value); // 0 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 2 +console.log(sequence.next().value); // 3 +console.log(sequence.next().value); // 5 +console.log(sequence.next().value); // 8 console.log(sequence.next(true).value); // 0 -console.log(sequence.next().value); // 1 -console.log(sequence.next().value); // 1 -console.log(sequence.next().value); // 2 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 2 ``` Il est possible de forcer un générateur à lever une exception en utilisant la méthode `throw()` en lui passant la valeur de l'exception en argument. Cette exception sera levée depuis l'état actuel du générateur, comme si le `yield` qui était en attente avait été une instruction `throw valeur`. diff --git a/files/fr/web/javascript/guide/keyed_collections/index.md b/files/fr/web/javascript/guide/keyed_collections/index.md index e2bd6ffcc6eb0d..6a417d0e001c41 100644 --- a/files/fr/web/javascript/guide/keyed_collections/index.md +++ b/files/fr/web/javascript/guide/keyed_collections/index.md @@ -107,7 +107,7 @@ Il est possible de créer un {{jsxref("Array")}} à partir d'un `Set` grâce à Array.from(monSet); [...monSet2]; -monSet2 = new Set([1,2,3,4]); +monSet2 = new Set([1, 2, 3, 4]); ``` ### Comparaison entre `Array` et `Set` diff --git a/files/fr/web/javascript/guide/loops_and_iteration/index.md b/files/fr/web/javascript/guide/loops_and_iteration/index.md index eea69fd16ee43b..3738da6a9a94d5 100644 --- a/files/fr/web/javascript/guide/loops_and_iteration/index.md +++ b/files/fr/web/javascript/guide/loops_and_iteration/index.md @@ -15,7 +15,7 @@ for (let pas = 0; pas < 5; pas++) { // Ceci sera exécuté 5 fois // À chaque éxécution, la variable "pas" augmentera de 1 // Lorsque'elle sera arrivée à 5, le boucle se terminera. - console.log('Faire ' + pas + ' pas vers l\'est'); + console.log("Faire " + pas + " pas vers l'est"); } ``` @@ -56,7 +56,9 @@ La fonction suivante contient une instruction `for` qui compte le nombre d'optio ```html

- + +

diff --git a/files/fr/web/javascript/guide/text_formatting/index.md b/files/fr/web/javascript/guide/text_formatting/index.md index 7cef482aebc182..0c7c69e928c54b 100644 --- a/files/fr/web/javascript/guide/text_formatting/index.md +++ b/files/fr/web/javascript/guide/text_formatting/index.md @@ -16,9 +16,9 @@ Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles : -```js -'machin' -"truc" +```js-nolint +'machin'; +"truc"; ``` Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement. @@ -28,7 +28,7 @@ Des chaînes plus avancées peuvent être créées en utilisant des séquences d Le nombre situé après \x est interprété comme un nombre [hexadécimal](https://fr.wikipedia.org/wiki/Système_hexadécimal) : ```js -'\xA9' // "©" +"\xA9"; // "©" ``` #### Les séquences d'échappement Unicode @@ -36,7 +36,7 @@ Le nombre situé après \x est interprété comme un nombre [hexadécimal](https Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u. ```js -'\u00A9' // "©" +"\u00A9"; // "©" ``` #### L'échappement d'unités de codage Unicode @@ -46,10 +46,10 @@ Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}. ```js -'\u{2F804}' +"\u{2F804}"; // Le même avec des échappements Unicode simples -'\uD87E\uDC04' +"\uD87E\uDC04"; ``` ### Les objets String @@ -57,7 +57,7 @@ Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.co L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères. ```js -var s = new String('foo'); // crée un objet String +var s = new String("foo"); // crée un objet String console.log(s); // affiche : {'0': 'f', '1': 'o', '2': 'o'} typeof s; // retourne 'object' ``` @@ -67,8 +67,8 @@ Vous pouvez appeler chacune des méthodes de l'objet `String` avec une valeur li Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet `String`, parce que les objets `String` peuvent avoir un comportement contre-intuitif : ```js -var s1 = '2 + 2'; // crée une valeur de chaîne de caractères -var s2 = new String('2 + 2'); // crée un objet String +var s1 = "2 + 2"; // crée une valeur de chaîne de caractères +var s2 = new String("2 + 2"); // crée un objet String eval(s1); // renvoie le nombre 4 eval(s2); // renvoie la chaîne "2 + 2" ``` @@ -76,9 +76,9 @@ eval(s2); // renvoie la chaîne "2 + 2" Un objet `String` possède une propriété, `length`, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à `x` la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) : ```js -var machaine = 'Bonjour, Monde !'; +var machaine = "Bonjour, Monde !"; var x = machaine.length; -machaine[0] = 'L'; // cela n'a aucun effet car les chaînes sont immuables +machaine[0] = "L"; // cela n'a aucun effet car les chaînes sont immuables machaine[0]; // cela renvoie "B" ``` @@ -226,8 +226,10 @@ Les littéraux de gabarits sont délimités par des [accents graves](https://fr. Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes : ```js -console.log('chaîne ligne de texte 1\n\ -chaîne ligne de texte 2'); +console.log( + "chaîne ligne de texte 1\n\ +chaîne ligne de texte 2", +); // "chaîne ligne de texte 1 // chaîne ligne de texte 2" ``` @@ -248,7 +250,7 @@ Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser ```js var a = 5; var b = 10; -console.log('Quinze vaut ' + (a + b) + ' et\npas ' + (2 * a + b) + '.'); +console.log("Quinze vaut " + (a + b) + " et\npas " + (2 * a + b) + "."); // "Quinze vaut 15 et // pas 20." ``` @@ -279,8 +281,14 @@ var msParJour = 24 * 60 * 60 * 1000; // 17 juillet 2014 00:00:00 UTC. var _17juillet2014 = new Date(msParJour * (44 * 365 + 11 + 197)); -var options = { year: "2-digit", month: "2-digit", day: "2-digit", - hour: "2-digit", minute: "2-digit", timeZoneName: "short" }; +var options = { + year: "2-digit", + month: "2-digit", + day: "2-digit", + hour: "2-digit", + minute: "2-digit", + timeZoneName: "short", +}; var dateHeureAmericaine = new Intl.DateTimeFormat("en-US", options).format; console.log(dateHeureAmericaine(_17juillet2014)); // 07/16/14, 5:00 PM PDT @@ -291,14 +299,18 @@ console.log(dateHeureAmericaine(_17juillet2014)); // 07/16/14, 5:00 PM PDT L'objet {{jsxref("NumberFormat")}} est utile pour formater les nombres, par exemple, les devises : ```js -var prixDeLEssence = new Intl.NumberFormat("en-US", - { style: "currency", currency: "USD", - minimumFractionDigits: 3 }); +var prixDeLEssence = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + minimumFractionDigits: 3, +}); console.log(prixDeLEssence.format(5.259)); // $5.259 -var decimalesHanRMBEnChine = new Intl.NumberFormat("zh-CN-u-nu-hanidec", - { style: "currency", currency: "CNY" }); +var decimalesHanRMBEnChine = new Intl.NumberFormat("zh-CN-u-nu-hanidec", { + style: "currency", + currency: "CNY", +}); console.log(decimalesHanRMBEnChine.format(1314.25)); // ¥ 一,三一四.二五 ``` @@ -310,22 +322,22 @@ L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de Par exemple, il y a en fait deux ordres de tri en allemand, _annuaire_ et _dictionnaire_. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri : ```js -var noms = ['Hochberg', 'Hönigswald', 'Holzman']; +var noms = ["Hochberg", "Hönigswald", "Holzman"]; -var annuaireAllemand = new Intl.Collator('de-DE-u-co-phonebk'); +var annuaireAllemand = new Intl.Collator("de-DE-u-co-phonebk"); // Comme si tri de ['Hochberg', 'Hoenigswald', 'Holzman']: -console.log(noms.sort(annuaireAllemand.compare).join(', ')); +console.log(noms.sort(annuaireAllemand.compare).join(", ")); // Affiche "Hochberg, Hönigswald, Holzman" ``` -Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri est perceptible (sauf lors du tri de mots ne différant _que_ par des umlauts, comme *schon* avant _schön_). +Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri est perceptible (sauf lors du tri de mots ne différant _que_ par des umlauts, comme _schon_ avant _schön_). ```js -var dictionnaireAllemand = new Intl.Collator('de-DE-u-co-dict'); +var dictionnaireAllemand = new Intl.Collator("de-DE-u-co-dict"); // Comme si tri de ["Hochberg", "Honigswald", "Holzman"]: -console.log(nom.sort(dictionnaireAllemand.compare).join(', ')); +console.log(nom.sort(dictionnaireAllemand.compare).join(", ")); // Affiche "Hochberg, Holzman, Hönigswald" ``` diff --git a/files/fr/web/javascript/guide/typed_arrays/index.md b/files/fr/web/javascript/guide/typed_arrays/index.md index 664e74004a320d..7b39a7673ce782 100644 --- a/files/fr/web/javascript/guide/typed_arrays/index.md +++ b/files/fr/web/javascript/guide/typed_arrays/index.md @@ -26,19 +26,19 @@ Le type [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBu Les tableaux typés qui sont les vues sur ces tampons de mémoire possèdent des noms explicites correspondant aux types numériques habituels tels que `Int8`, `Uint32`, `Float64` et ainsi de suite. Il existe un type de tableau typé spécial, `Uint8ClampedArray`. Ce type permet de ramener (clamp) les valeurs observées entre 0 et 255. Cela peut notamment être utilisé pour [traiter les données d'un canvas](/fr/docs/Web/API/ImageData) par exemple. -| Type | Intervalle de valeurs | Taille exprimée en octets | Description | Type Web IDL | Type équivalent en C | -| ---------------------------------------- | --------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------- | --------------------- | ------------------------------- | -| [`Int8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int8Array) | `-128` à `127` | 1 | Entier signé avec complément à deux sur 8 bits | `byte` | `int8_t` | -| [`Uint8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) | `0` à `255` | 1 | Entier non-signé sur 8 bits | `octet` | `uint8_t` | -| [`Uint8ClampedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) | `0` à `255` | 1 | Entier non-signé sur 8 bit (écrété) | `octet` | `uint8_t` | -| [`Int16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int16Array) | `-32768` à `32767` | 2 | Entier signé avec complément à deux sur 16 bits | `short` | `int16_t` | -| [`Uint16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array) | `0` à `65535` | 2 | Entier non-signé sur 16 bits | `unsigned short` | `uint16_t` | -| [`Int32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int32Array) | `-2147483648` à `2147483647` | 4 | Entier signé avec complément à deux sur 32 bits | `long` | `int32_t` | -| [`Uint32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array) | `0` à `4294967295` | 4 | Entier non-signé sur 32 bits | `unsigned long` | `uint32_t` | -| [`Float32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float32Array) | `-3.4E38` à `3.4E38` et `1.2E-38` est le plus petit nombre positif | 4 | Nombre flottant sur 32 bits IEEE 754 (7 chiffres significatifs, ex. `1.123456`) | `unrestricted float` | `float` | -| [`Float64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float64Array) | `-1.8E308` à `1.8E308` et `5E-324` est le plus petit nombre positif | 8 | Nombre flottant sur 64 bits IEEE 754 (16 chiffres significatifs, ex. `1.123...15`) | `unrestricted double` | `double` | -| [`BigInt64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array) | `-2^63` à `2^63 - 1` | 8 | Entier signé avec complément à deux sur 64 bits | `bigint` | `int64_t (signed long long)` | -| [`BigUint64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array) | `0` à `2^64 - 1` | 8 | Entier non-signé sur 64 bits | `bigint` | `uint64_t (unsigned long long)` | +| Type | Intervalle de valeurs | Taille exprimée en octets | Description | Type Web IDL | Type équivalent en C | +| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------- | ---------------------------------------------------------------------------------- | --------------------- | ------------------------------- | +| [`Int8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int8Array) | `-128` à `127` | 1 | Entier signé avec complément à deux sur 8 bits | `byte` | `int8_t` | +| [`Uint8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) | `0` à `255` | 1 | Entier non-signé sur 8 bits | `octet` | `uint8_t` | +| [`Uint8ClampedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) | `0` à `255` | 1 | Entier non-signé sur 8 bit (écrété) | `octet` | `uint8_t` | +| [`Int16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int16Array) | `-32768` à `32767` | 2 | Entier signé avec complément à deux sur 16 bits | `short` | `int16_t` | +| [`Uint16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array) | `0` à `65535` | 2 | Entier non-signé sur 16 bits | `unsigned short` | `uint16_t` | +| [`Int32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int32Array) | `-2147483648` à `2147483647` | 4 | Entier signé avec complément à deux sur 32 bits | `long` | `int32_t` | +| [`Uint32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array) | `0` à `4294967295` | 4 | Entier non-signé sur 32 bits | `unsigned long` | `uint32_t` | +| [`Float32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float32Array) | `-3.4E38` à `3.4E38` et `1.2E-38` est le plus petit nombre positif | 4 | Nombre flottant sur 32 bits IEEE 754 (7 chiffres significatifs, ex. `1.123456`) | `unrestricted float` | `float` | +| [`Float64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float64Array) | `-1.8E308` à `1.8E308` et `5E-324` est le plus petit nombre positif | 8 | Nombre flottant sur 64 bits IEEE 754 (16 chiffres significatifs, ex. `1.123...15`) | `unrestricted double` | `double` | +| [`BigInt64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array) | `-2^63` à `2^63 - 1` | 8 | Entier signé avec complément à deux sur 64 bits | `bigint` | `int64_t (signed long long)` | +| [`BigUint64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array) | `0` à `2^64 - 1` | 8 | Entier non-signé sur 64 bits | `bigint` | `uint64_t (unsigned long long)` | ### `DataView` diff --git a/files/fr/web/javascript/guide/using_promises/index.md b/files/fr/web/javascript/guide/using_promises/index.md index 104ac8170d6b90..fa496f63e35cf7 100644 --- a/files/fr/web/javascript/guide/using_promises/index.md +++ b/files/fr/web/javascript/guide/using_promises/index.md @@ -11,10 +11,10 @@ Une promesse est un objet ({{jsxref("Promise")}}) qui représente la complétion En résumé, une promesse est un objet qui est renvoyé et auquel on attache des _callbacks_ plutôt que de passer des _callbacks_ à une fonction. Ainsi, au lieu d'avoir une fonction qui prend deux _callbacks_ en arguments : ```js -function faireQqcALAncienne(successCallback, failureCallback){ +function faireQqcALAncienne(successCallback, failureCallback) { console.log("C'est fait"); // réussir une fois sur deux - if (Math.random() > .5) { + if (Math.random() > 0.5) { successCallback("Réussite"); } else { failureCallback("Échec"); @@ -25,7 +25,6 @@ function successCallback(résultat) { console.log("L'opération a réussi avec le message : " + résultat); } - function failureCallback(erreur) { console.error("L'opération a échoué avec le message : " + erreur); } @@ -40,12 +39,12 @@ function faireQqc() { return new Promise((successCallback, failureCallback) => { console.log("C'est fait"); // réussir une fois sur deux - if (Math.random() > .5) { + if (Math.random() > 0.5) { successCallback("Réussite"); } else { failureCallback("Échec"); } - }) + }); } const promise = faireQqc(); @@ -92,40 +91,49 @@ Autrement dit, chaque promesse représente l'état de complétion d'une étape a Auparavant, l'enchaînement de plusieurs opérations asynchrones déclenchait une pyramide dantesque de _callbacks_ : ```js -faireQqc(function(result) { - faireAutreChose(result, function(newResult) { - faireUnTroisiemeTruc(newResult, function(finalResult) { - console.log('Résultat final :' + finalResult); - }, failureCallback); - }, failureCallback); +faireQqc(function (result) { + faireAutreChose( + result, + function (newResult) { + faireUnTroisiemeTruc( + newResult, + function (finalResult) { + console.log("Résultat final :" + finalResult); + }, + failureCallback, + ); + }, + failureCallback, + ); }, failureCallback); ``` Grâce à des fonctions plus modernes et aux promesses, on attache les _callbacks_ aux promesses qui sont renvoyées. On peut ainsi construire une _chaîne de promesses_ : ```js -faireQqc().then(function(result) { - return faireAutreChose(result); -}) -.then(function(newResult) { - return faireUnTroisiemeTruc(newResult); -}) -.then(function(finalResult) { - console.log('Résultat final : ' + finalResult); -}) -.catch(failureCallback); +faireQqc() + .then(function (result) { + return faireAutreChose(result); + }) + .then(function (newResult) { + return faireUnTroisiemeTruc(newResult); + }) + .then(function (finalResult) { + console.log("Résultat final : " + finalResult); + }) + .catch(failureCallback); ``` Les arguments passés à `then` sont optionnels. La forme `catch(failureCallback)` est un alias plus court pour `then(null, failureCallback)`. Ces chaînes de promesses sont parfois construites avec [des fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) : ```js faireQqc() -.then(result => faireAutreChose(result)) -.then(newResult => faireUnTroisiemeTruc(newResult)) -.then(finalResult => { - console.log('Résultat final : ' + finalResult); -}) -.catch(failureCallback); + .then((result) => faireAutreChose(result)) + .then((newResult) => faireUnTroisiemeTruc(newResult)) + .then((finalResult) => { + console.log("Résultat final : " + finalResult); + }) + .catch(failureCallback); ``` > **Attention :** cela implique que les fonctions asynchrones renvoient toutes des promesses, sinon les _callbacks_ ne pourront être chaînés et les erreurs ne seront pas interceptées (les fonctions fléchées ont une valeur de retour implicite si les accolades ne sont pas utilisées : `() => x` est synonyme de `() => { return x; }`). @@ -136,21 +144,21 @@ Il est possible de chaîner de nouvelles actions _après_ un rejet, c'est-à-dir ```js new Promise((resolve, reject) => { - console.log('Initial'); + console.log("Initial"); - resolve(); + resolve(); }) -.then(() => { - throw new Error('Something failed'); + .then(() => { + throw new Error("Something failed"); - console.log('Do this'); -}) -.catch(() => { - console.error('Do that'); -}) -.then(() => { - console.log('Do this whatever happened before'); -}); + console.log("Do this"); + }) + .catch(() => { + console.error("Do that"); + }) + .then(() => { + console.log("Do this whatever happened before"); + }); ``` Cela va produire la sortie suivante : @@ -169,10 +177,10 @@ Dans les exemples précédents, `failureCallback` était présent trois fois dan ```js faireQqc() -.then(result => faireAutreChose(result)) -.then(newResult => faireUnTroisiemeTruc(newResult)) -.then(finalResult => console.log('Résultat final : ' + finalResult)) -.catch(failureCallback); + .then((result) => faireAutreChose(result)) + .then((newResult) => faireUnTroisiemeTruc(newResult)) + .then((finalResult) => console.log("Résultat final : " + finalResult)) + .catch(failureCallback); ``` En fait, dès qu'une exception est levée, la chaîne de promesses utilisera le premier `catch()` ou `onRejected` disponible. Ce fonctionnement est assez proche de ce qu'on peut trouver pour du code synchrone : @@ -182,8 +190,8 @@ try { const result = syncFaireQqc(); const newResult = syncFaireQqcAutre(result); const finalResult = syncFaireUnTroisiemeTruc(newResult); - console.log('Résultat final : ' + finalResult); -} catch(error) { + console.log("Résultat final : " + finalResult); +} catch (error) { failureCallback(error); } ``` @@ -196,8 +204,8 @@ async function toto() { const result = await faireQqc(); const newResult = await faireQqcAutre(result); const finalResult = await faireUnTroisiemeTruc(newResult); - console.log('Résultat final : ' + finalResult); - } catch(error) { + console.log("Résultat final : " + finalResult); + } catch (error) { failureCallback(error); } } @@ -226,11 +234,14 @@ Dans les deux cas, l'évènement (dont le type est {{domxref("PromiseRejectionEv Gérer ces évènements permet d'avoir une ultime méthode pour gérer le rejet des promesses. Cela peut notamment s'avérer utile pour le débogage. Ces évènements sont déclenchés au niveau global et permettent ainsi d'intercepter les erreurs pour chaque contexte (fenêtre ou _worker_) ```js -window.addEventListener("unhandledrejection", event => { - // Examiner la ou les promesse(s) qui posent problème en debug - // Nettoyer ce qui doit l'être quand ça se produit en réel - -}, false); +window.addEventListener( + "unhandledrejection", + (event) => { + // Examiner la ou les promesse(s) qui posent problème en debug + // Nettoyer ce qui doit l'être quand ça se produit en réel + }, + false, +); ``` ## Envelopper les _callbacks_ des API @@ -246,9 +257,11 @@ Si on mélange des _callbacks_ et des promesses, cela sera problématique. Si `s Pour ces fonctions, la meilleure pratique consiste à les _envelopper_ dans des promesses au plus bas niveau possible et de ne plus les appeler directement : ```js -const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); +const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); -wait(10 * 1000).then(() => saySomething("10 seconds")).catch(failureCallback); +wait(10 * 1000) + .then(() => saySomething("10 seconds")) + .catch(failureCallback); ``` Le constructeur `Promise` prend en argument une fonction et nous permet de la convertir manuellement en une promesse. Ici, vu que `setTimeout` n'échoue pas vraiment, on laisse de côté la gestion de l'échec. @@ -262,8 +275,11 @@ Le constructeur `Promise` prend en argument une fonction et nous permet de la co On peut lancer des opérations en parallèles et attendre qu'elles soient toutes finies de cette façon : ```js -Promise.all([func1(), func2(), func3()]) -.then(([resultat1, resultat2, resultat3]) => { /* où on utilise resultat1/2/3 */ }); +Promise.all([func1(), func2(), func3()]).then( + ([resultat1, resultat2, resultat3]) => { + /* où on utilise resultat1/2/3 */ + }, +); ``` Il est possible de construire une composition séquentielle de la façon suivante : @@ -278,7 +294,10 @@ On peut également accomplir cela avec une fonction de composition réutilisable ```js const applyAsync = (acc, val) => acc.then(val); -const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x)); +const composeAsync = + (...funcs) => + (x) => + funcs.reduce(applyAsync, Promise.resolve(x)); ``` La fonction `composeAsync` accepte autant de fonctions que nécessaire comme arguments et renvoie une nouvelle fonction qui prend une valeur initiale pour la passer à travers ces étapes de compositions. Cette façon de faire garantit que les fonctions, qu'elles soient synchrones ou asynchrones, sont exécutées dans le bon ordre : @@ -292,9 +311,9 @@ Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplem ```js let result; -for(const f of [func1, func2, func3]) { +for (const f of [func1, func2, func3]) { result = await f(result); -} +} ``` ## Gestion du temps @@ -309,10 +328,12 @@ console.log(1); // 1, 2 En fait, la fonction passée à `then()` est placée dans une file de micro-tâches qui sont exécutées lorsque cette file est vidée à la fin de la boucle d'évènements JavaScript : ```js -var wait = ms => new Promise(resolve => setTimeout(resolve, ms)); +var wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); wait().then(() => console.log(4)); -Promise.resolve().then(() => console.log(2)).then(() => console.log(3)); +Promise.resolve() + .then(() => console.log(2)) + .then(() => console.log(3)); console.log(1); // 1, 2, 3, 4 ``` diff --git a/files/fr/web/javascript/guide/working_with_objects/index.md b/files/fr/web/javascript/guide/working_with_objects/index.md index 363f716ad56356..424b7d28291a36 100644 --- a/files/fr/web/javascript/guide/working_with_objects/index.md +++ b/files/fr/web/javascript/guide/working_with_objects/index.md @@ -19,7 +19,7 @@ En JavaScript, un objet est une entité à part entière qui possède des propri Un objet JavaScript possède donc plusieurs propriétés qui lui sont associées. Une propriété peut être vue comme une variable attachée à l'objet. Les propriétés d'un objet sont des variables tout ce qu'il y a de plus classiques, exception faite qu'elles sont attachées à des objets. Les propriétés d'un objet représentent ses caractéristiques et on peut y accéder avec une notation utilisant le point « . », de la façon suivante : ```js -nomObjet.nomPropriete +nomObjet.nomPropriete; ``` Comme pour les variables JavaScript en général, le nom de l'objet (qui peut être une variable) et le nom des propriétés sont sensibles à la casse (une lettre minuscule ne sera pas équivalente à une lettre majuscule). On peut définir une propriété en lui affectant une valeur. Ainsi, si on crée un objet `maVoiture` et qu'on lui donne les propriétés `fabricant`, `modèle`, et `année` : @@ -35,9 +35,9 @@ L'exemple précédent peut également s'écrire avec **[la syntaxe littérale po ```js let maVoiture = { - make: 'Ford', - model: 'Mustang', - year: 1969 + make: "Ford", + model: "Mustang", + year: 1969, }; ``` @@ -64,12 +64,12 @@ let str = "maChaîne"; let rand = Math.random(); let obj = new Object(); -monObj.type = "Syntaxe point"; -monObj["date created"] = "Chaîne avec un espace"; -monObj[str] = "Une valeur qui est une chaîne"; -monObj[rand] = "Nombre aléatoire"; -monObj[obj] = "Objet"; -monObj[""] = "Une chaîne vide"; +monObj.type = "Syntaxe point"; +monObj["date created"] = "Chaîne avec un espace"; +monObj[str] = "Une valeur qui est une chaîne"; +monObj[rand] = "Nombre aléatoire"; +monObj[obj] = "Objet"; +monObj[""] = "Une chaîne vide"; console.log(monObj); ``` @@ -93,7 +93,7 @@ function afficherProps(obj, nomObjet) { let resultat = ""; for (let i in obj) { if (obj.hasOwnProperty(i)) { - resultat += `${nomObjet}.${i} = ${obj[i]}\n`; + resultat += `${nomObjet}.${i} = ${obj[i]}\n`; } } return resultat; @@ -103,9 +103,9 @@ function afficherProps(obj, nomObjet) { Si on appelle la fonction avec `afficherProps(maVoiture, "maVoiture")`, cela affichera le contenu suivant dans la console : ```js -maVoiture.fabricant = Ford -maVoiture.modele = Mustang -maVoiture.annee = 1969 +maVoiture.fabricant = Ford; +maVoiture.modele = Mustang; +maVoiture.annee = 1969; ``` ## Lister les propriétés d'un objet @@ -119,13 +119,15 @@ maVoiture.annee = 1969 Avant ECMAScript 5, il n'existait aucune méthode native pour lister l'ensemble des propriétés d'un objet. Cependant, on pouvait utiliser le code suivant pour y parvenir : ```js -function listerToutesLesProprietes(o){ +function listerToutesLesProprietes(o) { let objectToInspect; let resultat = []; - for(objectToInspect = o; - objectToInspect !== null; - objectToInspect = Object.getPrototypeOf(objectToInspect)){ + for ( + objectToInspect = o; + objectToInspect !== null; + objectToInspect = Object.getPrototypeOf(objectToInspect) + ) { resultat = resultat.concat(Object.getOwnPropertyNames(objectToInspect)); } return resultat; @@ -146,11 +148,11 @@ La syntaxe utilisée avec les initialisateurs d'objets est la suivante : ```js let obj = { - propriete_1: valeur_1, // propriete_# peut être un identifiant - 2: valeur_2, // ou un nombre - // ..., - "propriete n": valeur_n - }; // ou une chaîne + propriete_1: valeur_1, // propriete_# peut être un identifiant + 2: valeur_2, // ou un nombre + // ..., + "propriete n": valeur_n, +}; // ou une chaîne ``` où on a `obj` le nom de l'objet qu'on souhaite créer et chaque `propriete_i` un identifiant (que ce soit un nom, un nombre ou une chaîne de caractères) et chaque `valeur_i` une expression dont la valeur sera affectée à la propriété `propriete_i`. S'il n'est pas nécessaire d'utiliser l'objet `obj` par la suite, il n'est pas nécessaire de réaliser l'affectation à une variable (attention alors à l'encadrer dans des parenthèses pour que le littéral objet soit bien interprété comme une instruction et non pas comme un bloc.) @@ -171,8 +173,8 @@ let maHonda = { roue: 4, moteur: { cylindres: 4, - taille: 2.2 - } + taille: 2.2, + }, }; ``` @@ -250,7 +252,7 @@ let voiture2 = new Voiture("Audi", "A3", 2005, morgan); On notera que le dernier argument n'est pas une chaîne de caractères ou une valeur numérique mais bien un objet. Les objets `max` et `morgan` sont passés en arguments pour représenter les propriétaires. Ainsi, si on veut obtenir le nom du propriétaire pour `voiture2`, on peut accéder à la propriété de la façon suivante : ```js -voiture2.proprietaire.nom +voiture2.proprietaire.nom; ``` Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, on peut ajouter une propriété à l'objet `voiture1` avec l'instruction : @@ -268,11 +270,12 @@ Les objets peuvent également être créés en utilisant la méthode [`Object.cr ```js // Propriétés pour animal et encapsulation des méthodes let Animal = { - type: "Invertébrés", // Valeur par défaut value of properties - afficherType : function() { // Une méthode pour afficher le type Animal + type: "Invertébrés", // Valeur par défaut value of properties + afficherType: function () { + // Une méthode pour afficher le type Animal console.log(this.type); - } -} + }, +}; // On crée un nouveau type d'animal, animal1 let animal1 = Object.create(Animal); @@ -377,35 +380,35 @@ Par exemple, supposons qu'on ait deux objets, `responsable` et `stagiaire`. Chaq ```js const responsable = { - nom: "Jean", - age: 27, - poste: "Ingénieur logiciel" + nom: "Jean", + age: 27, + poste: "Ingénieur logiciel", }; const stagiaire = { - nom: "Ben", - age: 21, - poste: "Stagiaire ingénieur logiciel" + nom: "Ben", + age: 21, + poste: "Stagiaire ingénieur logiciel", }; function direBonjour() { - console.log('Bonjour, mon nom est', this.nom) -}; + console.log("Bonjour, mon nom est", this.nom); +} // on ajoute direBonjour aux deux objets responsable.direBonjour = direBonjour; stagiaire.direBonjour = direBonjour; responsable.direBonjour(); // Bonjour, mon nom est John' -stagiaire.direBonjour(); // Bonjour, mon nom est Ben' +stagiaire.direBonjour(); // Bonjour, mon nom est Ben' ``` Ici, `this` fait référence à l'objet courant. On peut également créer une fonction `direMonAge()` qui affiche une phrase indiquant l'age. ```js -function direMonAge(){ +function direMonAge() { console.log("J'ai " + this.age + " ans."); -}; +} responsable.direMonAge = direMonAge; responsable.direMonAge(); // J'ai 27 ans. @@ -430,12 +433,12 @@ let o = { }, set c(x) { this.a = x / 2; - } + }, }; console.log(o.a); // 7 console.log(o.b); // 8 <-- À ce moment, la méthode get b() est invoquée -o.c = 50; // <-- À ce moment, la méthode set c(x) est invoquée +o.c = 50; // <-- À ce moment, la méthode set c(x) est invoquée console.log(o.a); // 25 ``` @@ -453,8 +456,16 @@ Les accesseurs et mutateurs peuvent également être ajoutés à un objet après let o = { a: 0 }; Object.defineProperties(o, { - 'b': { get: function() { return this.a + 1; } }, - 'c': { set: function(x) { this.a = x / 2; } } + b: { + get: function () { + return this.a + 1; + }, + }, + c: { + set: function (x) { + this.a = x / 2; + }, + }, }); o.c = 10; // Exécute le mutateur qui affecte 10 / 2 (5) à la propriété 'a' @@ -469,13 +480,13 @@ Il est possible de retirer des propriétés propres (celles qui ne sont pas hér ```js // On crée un nouvel objet, monObj, avec deux propriétés a et b. -let monObj = new Object; +let monObj = new Object(); monObj.a = 5; monObj.b = 12; // On retire la propriété a, monObj a donc uniquement la propriété b delete monObj.a; -console.log("a" in monObj) // produit "false" +console.log("a" in monObj); // produit "false" ``` Il est aussi possible de supprimer une propriété de l'objet global avec `delete` si aucun mot-clé comme `var`, `let` ou `const` n'avait été utilisé : @@ -492,21 +503,21 @@ En JavaScript, les objets fonctionnent par référence. Deux objets distincts ne ```js // Deux variables avec deux objets distincts // qui ont les mêmes propriétés -let fruit = {nom: "pomme"}; -let fruit2 = {nom: "pomme"}; +let fruit = { nom: "pomme" }; +let fruit2 = { nom: "pomme" }; -fruit == fruit2 // renvoie false -fruit === fruit2 // renvoie false +fruit == fruit2; // renvoie false +fruit === fruit2; // renvoie false ``` ```js // Deux variables référençant un même objet -let fruit = {nom: "pomme"}; -let fruit2 = fruit; // On affecte la même référence +let fruit = { nom: "pomme" }; +let fruit2 = fruit; // On affecte la même référence // dans ce cas fruit et fruit2 pointent vers le même objet -fruit == fruit2 // renvoie true -fruit === fruit2 // renvoie true +fruit == fruit2; // renvoie true +fruit === fruit2; // renvoie true fruit.nom = "raisin"; console.log(fruit2); // affiche {nom: "raisin"} et non {nom: "pomme"} diff --git a/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md index ef3efd971d824c..c6171c5d6e71dd 100644 --- a/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md +++ b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md @@ -31,9 +31,9 @@ Voici ce qui se produit lorsqu'on tente d'accéder à une propriété : // son constructeur et lui créera deux propriétés en propre // a et b : let f = function () { - this.a = 1; - this.b = 2; -} + this.a = 1; + this.b = 2; +}; let o = new f(); // {a: 1, b: 2} // on ajoute des propriétés au prototype de la fonction @@ -89,9 +89,9 @@ Lorsqu'une fonction héritée est exécutée, la valeur de [`this`](/fr/docs/Web ```js var o = { a: 2, - m: function() { + m: function () { return this.a + 1; - } + }, }; console.log(o.m()); // 3 @@ -116,12 +116,12 @@ Regardons un peu plus en détail ce qui se déroule en arrière-plan. En JavaScript, comme mentionné ci-dessus, les fonctions peuvent avoir des propriétés. Toutes les fonctions ont une propriété spéciale intitulée `prototype`. ```js -function faireUnTruc(){} -console.log( faireUnTruc.prototype ); // Object {...} +function faireUnTruc() {} +console.log(faireUnTruc.prototype); // Object {...} // Peu importe comment vous déclarez la fonction. // une fonction en JavaScript aura toujours une propriété // prototype par défaut. -var faireUnTruc= function(){}; +var faireUnTruc = function () {}; console.log(faireUnTruc.prototype); // Object {...} ``` @@ -145,9 +145,9 @@ Comme mentionné avant, `faireUnTruc()` possède une propriété par défaut `pr On peut ajouter des propriétés au prototype de `faireUnTruc()` comme suit : ```js -function faireUnTruc(){} +function faireUnTruc() {} faireUnTruc.prototype.toto = "truc"; -console.log( faireUnTruc.prototype ); +console.log(faireUnTruc.prototype); ``` Produira le résultat suivant : @@ -173,7 +173,7 @@ On peut utiliser l'opérateur `new` afin de créer une instance de `faireUnTruc( Voyons le code qui suit : ```js -function faireUnTruc(){} +function faireUnTruc() {} faireUnTruc.prototype.toto = "truc"; // on ajoute une propriété au prototype var uneInstance = new faireUnTruc(); uneInstance.prop = "une valeur"; // on ajoute une propriété sur l'objet @@ -212,7 +212,7 @@ Si la propriété n'est pas trouvée sur la propriété `__proto__` de la propri Regardons ce qui se produit dans la console avec un peu de code : ```js -function faireUnTruc(){} +function faireUnTruc() {} faireUnTruc.prototype.toto = "truc"; var uneInstance = new faireUnTruc(); uneInstance.prop = "une valeur"; @@ -240,7 +240,7 @@ faireUnTruc.prototype.toto: truc ### Objets créés avec les raccourcis syntaxiques (littéraux) ```js -var o = {a: 1}; +var o = { a: 1 }; // Le nouvel objet possède Object.prototype comme [[Prototype]] // o ne possède pas de propriété 'hasOwnProperty' en propre @@ -249,7 +249,7 @@ var o = {a: 1}; // Object.prototype possède null comme prototype. // o ---> Object.prototype ---> null -var b = ['coucou', 'ça va', '?']; +var b = ["coucou", "ça va", "?"]; // Les tableaux (Array) héritent de Array.prototype // (qui possède les méthodes indexOf, forEach, etc.) @@ -277,9 +277,9 @@ function Graphe() { } Graphe.prototype = { - ajoutSommet: function(v) { + ajoutSommet: function (v) { this.sommets.push(v); - } + }, }; var g = new Graphe(); @@ -292,7 +292,7 @@ var g = new Graphe(); ECMAScript 5 a introduit une nouvelle méthode : {{jsxref("Object.create()")}}. Appeler cette méthode crée un nouvel objet et le prototype de cet objet est le premier argument de cette fonction : ```js -var a = {a: 1}; +var a = { a: 1 }; // a ---> Object.prototype ---> null var b = Object.create(a); @@ -313,7 +313,7 @@ console.log(d.hasOwnProperty); L'opérateur [`delete`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete) permet de supprimer une propriété directement rattachée à un objet. En revanche, il n'empêchera pas l'exploration de la chaîne de prototype : ```js -let a = {toto: 1}; +let a = { toto: 1 }; let b = Object.create(a); console.log(b.toto); // Affiche 1 car c'est une propriété disponible via le prototype @@ -322,7 +322,7 @@ console.log(b.toto); // Affiche 5, désormais cette propriété existe sur l'obj delete b.toto; console.log(b.toto); // Affiche 1 : la propriété n'est plus disponible sur l'objet mais - // on peut toujours la récupérer via le prototype +// on peut toujours la récupérer via le prototype ``` ### Objets créés avec le mot-clé `class` @@ -330,7 +330,7 @@ console.log(b.toto); // Affiche 1 : la propriété n'est plus disponible sur l'o ECMAScript 2015 introduit plusieurs mots-clés destinés à créer du sucre syntaxique pour manipuler des [classes](/fr/docs/Web/JavaScript/Reference/Classes). Ces mots-clés sont {{jsxref("Instructions/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}} et {{jsxref("Opérateurs/super", "super")}}. ```js -'use strict'; +"use strict"; class Polygone { constructor(hauteur, largeur) { @@ -362,16 +362,16 @@ Le temps de recherche des propriétés sera plus élevé si ces propriétés son Lorsqu'on parcourt les propriétés d'un objet, **toutes** les propriétés énumérables situées sur la chaîne de prototype seront parcourues. Pour vérifier si un objet possède une propriété en propre plus que via sa chaîne de prototype, on devra utiliser la méthode [`hasOwnProperty()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty) qui est héritée grâce à `Object.prototype`. Prenons un exemple concret avec le cas du graphe traité dans un exemple précédent : ```js -console.log(g.hasOwnProperty('arêtes')); +console.log(g.hasOwnProperty("arêtes")); // true -console.log(g.hasOwnProperty('nononon')); +console.log(g.hasOwnProperty("nononon")); // false -console.log(g.hasOwnProperty('ajoutSommet')); +console.log(g.hasOwnProperty("ajoutSommet")); // false -console.log(g.__proto__.hasOwnProperty('ajoutSommet')); +console.log(g.__proto__.hasOwnProperty("ajoutSommet")); // true ``` diff --git a/files/fr/web/javascript/language_overview/index.md b/files/fr/web/javascript/language_overview/index.md index d72bbdef9e8c40..a0f07d23277d6a 100644 --- a/files/fr/web/javascript/language_overview/index.md +++ b/files/fr/web/javascript/language_overview/index.md @@ -56,7 +56,7 @@ ECMAScript possède deux types numériques intégrés : **Number** et **BigInt** Les nombres en JavaScript sont « des valeurs [au format IEEE 754 en double précision 64 bits](https://en.wikipedia.org/wiki/Double_precision_floating-point_format) », d'après la spécification. Cela permet de représenter les nombres entre -(2^53 − 1) et 2^53 − 1. Lorsqu'on fait référence (ici ou dans les autres articles) à des entiers, on parle généralement d'une représentation d'un entier avec une valeur de type Number. En effet, les valeurs Number ne sont pas strictement des entiers et il faut donc prendre quelques précautions : ```js -console.log(3 / 2); // 1.5 et pas 1 +console.log(3 / 2); // 1.5 et pas 1 console.log(Math.floor(3 / 2)); // 1 ``` @@ -87,7 +87,7 @@ parseInt("010", 10); //10 Si la base n'est pas indiquée, les résultats peuvent être surprenants dans les anciens navigateurs qui datent de 2013 ou avant où les chaînes commençant par `0` pouvaient ne pas être considérées comme exprimées en notation octale. À moins que vous ne soyez certain du format de votre chaîne de caractères, vous pouvez obtenir des résultats surprenants sur ces anciens navigateurs : ```js -parseInt("010"); // 8 +parseInt("010"); // 8 parseInt("0x10"); // 16 ``` @@ -104,9 +104,9 @@ De la même manière, vous pouvez traiter les nombres à virgule flottante à l' On peut également utiliser l'opérateur unaire `+` pour convertir des valeurs en nombres : ```js -+ "42"; // 42 -+ "010"; // 10 -+ "0x10"; // 16 ++"42"; // 42 ++"010"; // 10 ++"0x10"; // 16 ``` Une valeur spéciale appelée [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN) (qui signifie « _Not a Number_ », soit « pas un nombre ») est renvoyée si la chaîne est non numérique : @@ -125,23 +125,23 @@ Cette valeur peut être détectée grâce à la fonction native [`Number.isNaN() ```js Number.isNaN(NaN); // true -Number.isNaN('bonjour'); // false -Number.isNaN('1'); // false +Number.isNaN("bonjour"); // false +Number.isNaN("1"); // false Number.isNaN(undefined); // false Number.isNaN({}); // false -Number.isNaN([1]) // false -Number.isNaN([1,2]) // false +Number.isNaN([1]); // false +Number.isNaN([1, 2]); // false ``` Mais ne testez pas le `NaN` en utilisant la fonction globale [`isNaN()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN), [qui a un comportement peu intuitif](/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN#confusing_special-case_behavior) : ```js -isNaN('bonjour'); // true -isNaN('1'); // false +isNaN("bonjour"); // true +isNaN("1"); // false isNaN(undefined); // true isNaN({}); // true -isNaN([1]) // false -isNaN([1,2]) // true +isNaN([1]); // false +isNaN([1, 2]); // true ``` JavaScript dispose également de valeur spéciales pour l'infini [`Infinity`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity) et l'infini négatif (`-Infinity`) : @@ -154,7 +154,7 @@ JavaScript dispose également de valeur spéciales pour l'infini [`Infinity`](/f Il est possible de tester les valeurs `Infinity`, `-Infinity` et `NaN` à l'aide de la fonction native [`isFinite()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/isFinite) : ```js -isFinite(1/0); // false +isFinite(1 / 0); // false isFinite(-Infinity); // false isFinite(NaN); // false ``` @@ -193,7 +193,7 @@ JavaScript dispose d'un type booléen, dont les valeurs possibles sont `true` (v Cette conversion peut être faite de manière explicite à l'aide de la fonction `Boolean()` : ```js -Boolean(""); // false +Boolean(""); // false Boolean(234); // true ``` @@ -265,7 +265,7 @@ x = x + 5; Vous pouvez utiliser `++` et `--` respectivement pour incrémenter et pour décrémenter. Ils peuvent être utilisés comme opérateurs préfixes ou suffixes. -L'[opérateur `+`](/fr/docs/Web/JavaScript/Reference/Operators#addition_(.2b)) permet également de concaténer des chaînes : +L'[opérateur `+`]() permet également de concaténer des chaînes : ```js "coucou" + " monde"; // "coucou monde" @@ -284,7 +284,7 @@ Les [comparaisons](/fr/docs/Web/JavaScript/Reference/Operators) en JavaScript se ```js 123 == "123"; // true -1 == true; // true +1 == true; // true ``` Pour éviter les conversions implicites avant les comparaisons, utilisez l'opérateur triple égal : @@ -311,7 +311,7 @@ if (nom == "des chiots") { } else { nom = " !" + nom; } -nom == "des chatons !!" +nom == "des chatons !!"; ``` JavaScript dispose également de boucles `while` et `do-while`. Les premières permettent de former des boucles basiques ; les secondes permettent de construire des boucles qui seront exécutées au moins une fois : @@ -374,17 +374,17 @@ let nom = nomEnCache || (nomEnCache = getNom()); JavaScript propose également un opérateur ternaire pour les assignations conditionnelles en une ligne : ```js -let permis = (age > 18) ? "oui" : "non"; +let permis = age > 18 ? "oui" : "non"; ``` L'instruction `switch` peut être utilisée pour différentes branches de code basées sur un nombre ou une chaîne : ```js switch (action) { - case 'dessiner': + case "dessiner": dessine(); break; - case 'manger': + case "manger": mange(); break; default: @@ -408,7 +408,7 @@ switch (a) { La clause `default` est optionnelle. Vous pouvez placer des expressions à la fois dans la partie `switch` et dans les cas à gérer si vous voulez ; les comparaisons entre les deux se font comme si on avait utilisé l'opérateur `===` : ```js -switch (1 + 3){ +switch (1 + 3) { case 2 + 2: yay(); break; @@ -449,12 +449,12 @@ La syntaxe littérale pour écrire un objet peut être utilisée afin d'initiali ```js let obj = { - name: 'Carotte', - _for: 'Max', // Le mot "for" est un mot réservé, utilisez plutôt "_for". + name: "Carotte", + _for: "Max", // Le mot "for" est un mot réservé, utilisez plutôt "_for". details: { - color: 'orange', - size: 12 - } + color: "orange", + size: 12, + }, }; ``` @@ -462,7 +462,7 @@ L'accès aux attributs peut être enchaîné : ```js obj.details.color; // orange -obj['details']['size']; // 12 +obj["details"]["size"]; // 12 ``` L'exemple suivant crée un prototype d'objet (`Person`) et une instance de ce prototype (`you`). @@ -474,7 +474,7 @@ function Person(name, age) { } // Définir un objet -let you = new Person('You', 24); +let you = new Person("You", 24); // Nous créons une nouvelle personne nommée "You" âgée de 24 ans. ``` @@ -482,7 +482,7 @@ let you = new Person('You', 24); ```js // notation par points -obj.name = 'Simon'; +obj.name = "Simon"; let name = obj.name; ``` @@ -490,11 +490,11 @@ Et… ```js // notation entre crochets -obj['name'] = 'Simon'; -let name = obj['name']; +obj["name"] = "Simon"; +let name = obj["name"]; // on peut utiliser une variable pour définir une clé -let user = prompt('quelle clé ?'); -obj[user] = prompt('quelle valeur ?'); +let user = prompt("quelle clé ?"); +obj[user] = prompt("quelle valeur ?"); ``` Ces deux méthodes sont également sémantiquement équivalentes. La seconde méthode a l'avantage de fournir le nom de l'attribut de l'objet dans une chaîne, ce qui signifie qu'il peut être calculé au moment de l'exécution (mais ce qui peut empêcher certaines optimisations du moteur JavaScript). Elle peut également être utilisée pour définir et lire des propriétés dont les noms sont des [mots réservés](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#keywords) : @@ -536,7 +536,7 @@ Notez que `array.length` ne correspond pas nécessairement au nombre d'élément ```js let a = ["chien", "chat", "poule"]; a[100] = "renard"; -a.length // 101 +a.length; // 101 ``` Rappelez-vous : la longueur du tableau vaut simplement un de plus que l'indice le plus élevé. @@ -544,7 +544,7 @@ Rappelez-vous : la longueur du tableau vaut simplement un de plus que l'indice l Si vous interrogez un élément de tableau non existant, vous obtenez `undefined` : ```js -typeof(a[90]); // undefined +typeof a[90]; // undefined ``` Si vous prenez cela en compte, il est possible de parcourir un tableau à l'aide de la boucle suivante : @@ -568,7 +568,7 @@ Vous pourriez également itérer sur un tableau en utilisant une boucle [`for... Une autre façon d'itérer sur un tableau qui a été ajoutée avec ECMAScript 5 est [`forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) : ```js -['chien', 'chat', 'poule'].forEach(function(currentValue, index, array) { +["chien", "chat", "poule"].forEach(function (currentValue, index, array) { // Faire quelque chose avec currentValue ou array[index] }); ``` @@ -593,7 +593,7 @@ Les tableaux sont accompagnés d'un certain nombre de méthodes. Voir également | `a.unshift(item1[, item2[, ...[, itemN]]])` | Ajoute des éléments au début du tableau. | | `a.slice(start[, end])` | Renvoie un sous-tableau. | | `a.sort([cmpfn])` | Trie le tableau (avec une fonction de comparaison optionnelle). | -| `a.splice(start, delcount[, item1[, ...[, itemN]]])` | Permet de modifier un tableau en supprimant une partie et en la remplaçant avec plus d'éléments. | +| `a.splice(start, delcount[, item1[, ...[, itemN]]])` | Permet de modifier un tableau en supprimant une partie et en la remplaçant avec plus d'éléments. | | `a.reverse()` | Retourne le tableau. | ## Les fonctions @@ -709,7 +709,7 @@ function() { Mais une telle fonction anonyme n'est pas utile en soi, car sans nom, il n'y a aucun moyen d'appeler la fonction. En pratique, les fonctions anonymes sont donc généralement utilisées comme arguments pour d'autres fonctions ou sont rendues appelables en les assignant immédiatement à une variable qui peut être utilisée pour invoquer la fonction : ```js -let moyenne = function() { +let moyenne = function () { let somme = 0; for (let i = 0, j = arguments.length; i < j; i++) { somme += arguments[i]; @@ -723,7 +723,7 @@ Cela rend la fonction anonyme invocable en appelant `moyenne()` avec des argumen Mais les fonctions anonymes peuvent être utiles même si elles ne sont jamais affectées à des variables ou transmises comme arguments à d'autres fonctions : JavaScript fournit un mécanisme permettant de déclarer et d'invoquer simultanément une fonction à l'aide d'une seule expression. Cela s'appelle une [expression de fonction invoquée immédiatement (_IIFE_ pour l'acronyme anglais)](/fr/docs/Glossary/IIFE), et la syntaxe pour l'utiliser avec une fonction anonyme ressemble à ceci : ```js -(function() { +(function () { // … })(); ``` @@ -736,11 +736,12 @@ JavaScript permet d'appeler des fonctions récursivement. C'est particulièremen ```js function countChars(elm) { - if (elm.nodeType == 3) { // TEXT_NODE + if (elm.nodeType == 3) { + // TEXT_NODE return elm.nodeValue.length; } let count = 0; - for (let i = 0, child; child = elm.childNodes[i]; i++) { + for (let i = 0, child; (child = elm.childNodes[i]); i++) { count += countChars(child); } return count; @@ -751,11 +752,12 @@ Cela met en évidence un problème potentiel avec les fonctions anonymes : comme ```js let charsInBody = (function counter(elm) { - if (elm.nodeType == 3) { // TEXT_NODE + if (elm.nodeType == 3) { + // TEXT_NODE return elm.nodeValue.length; } let count = 0; - for (let i = 0, child; child = elm.childNodes[i]; i++) { + for (let i = 0, child; (child = elm.childNodes[i]); i++) { count += counter(child); } return count; @@ -776,16 +778,16 @@ Dans la programmation orientée objet classique, les objets sont des collections function creerPersonne(prenom, nom) { return { prenom: prenom, - nom: nom + nom: nom, }; } function personneNomComplet(personne) { - return personne.prenom + ' ' + personne.nom; + return personne.prenom + " " + personne.nom; } function personneNomCompletInverse(personne) { - return personne.nom + ' ' + personne.prenom; + return personne.nom + " " + personne.prenom; } let s = creerPersonne("Simon", "Willison"); @@ -800,16 +802,16 @@ function creerPersonne(prenom, nom) { return { prenom: prenom, nom: nom, - nomComplet: function() { - return this.prenom + ' ' + this.nom; + nomComplet: function () { + return this.prenom + " " + this.nom; + }, + nomCompletInverse: function () { + return this.nom + " " + this.prenom; }, - nomCompletInverse: function() { - return this.nom + ' ' + this.prenom; - } }; } -let s = creerPersonne("Simon", "Willison") +let s = creerPersonne("Simon", "Willison"); s.nomComplet(); // Simon Willison s.nomCompletInverse(); // Willison Simon ``` @@ -832,12 +834,12 @@ On peut se servir du mot-clé `this` pour améliorer notre fonction de construct function Personne(prenom, nom) { this.prenom = prenom; this.nom = nom; - this.nomComplet = function() { - return this.prenom + ' ' + this.nom; - } - this.nomCompletInverse = function() { - return this.nom + ' ' + this.prenom; - } + this.nomComplet = function () { + return this.prenom + " " + this.nom; + }; + this.nomCompletInverse = function () { + return this.nom + " " + this.prenom; + }; } let s = new Personne("Simon", "Willison"); ``` @@ -850,11 +852,11 @@ Nos objets `Personne` s'améliorent, mais il leur reste certaines aspérités pa ```js function personneNomComplet() { - return this.prenom + ' ' + this.nom; + return this.prenom + " " + this.nom; } function personneNomCompletInverse() { - return this.nom + ' ' + this.prenom; + return this.nom + " " + this.prenom; } function Personne(prenom, nom) { @@ -873,13 +875,13 @@ function Personne(prenom, nom) { this.nom = nom; } -Personne.prototype.nomComplet = function() { - return this.prenom + ', ' + this.nom; -} +Personne.prototype.nomComplet = function () { + return this.prenom + ", " + this.nom; +}; -Personne.prototype.nomCompletInverse = function() { - return this.nom + ', ' + this.prenom; -} +Personne.prototype.nomCompletInverse = function () { + return this.nom + ", " + this.prenom; +}; ``` `Personne.prototype` est un objet partagé par toutes les instances de `Personne`. Il fait partie d'une chaîne de résolution (qui a un nom spécial, la « chaîne de prototypes ») : chaque fois que vous essayez d'accéder à une propriété de `Personne` qui n'est pas définie, JavaScript va vérifier `Personne.prototype` pour voir si cette propriété n'existe pas plutôt à cet endroit. Par conséquent, tout ce qui est assigné à `Personne.prototype` devient disponible à toutes les instances de ce constructeur via l'objet `this`. @@ -891,8 +893,8 @@ let s = new Personne("Simon", "Willison"); s.prenomEnMajuscules(); // TypeError on line 1: s.prenomEnMajuscules is not a function Personne.prototype.prenomEnMajuscules = function prenomEnMajuscules() { - return this.prenom.toUpperCase() -} + return this.prenom.toUpperCase(); +}; s.prenomEnMajuscules(); // "SIMON" ``` @@ -908,14 +910,14 @@ String.prototype.inverse = function inverse() { r += this[i]; } return r; -} +}; s.inverse(); // "nomiS" ``` Notre nouvelle méthode fonctionne même sur les chaînes littérales ! ```js -"Ceci peut maintenant être inversé.".inverse() // ".ésrevni ertê tnanetniam tuep iceC" +"Ceci peut maintenant être inversé.".inverse(); // ".ésrevni ertê tnanetniam tuep iceC" ``` Comme mentionné précédemment, le prototype fait partie d'une chaîne de prototypes. Le début de cette chaîne est `Object.prototype`, dont `toString()` fait partie des méthodes. C'est cette méthode qui est appelée quand vous essayez de représenter un objet sous la forme d'une chaîne. Elle sera utile pour déboguer nos objets `Personne` : @@ -924,9 +926,9 @@ Comme mentionné précédemment, le prototype fait partie d'une chaîne de proto let s = new Personne("Simon", "Willison"); s; // [object Object] -Personne.prototype.toString = function() { - return ''; -} +Personne.prototype.toString = function () { + return ""; +}; s.toString(); // "" ``` @@ -991,9 +993,9 @@ Cela nous amène à l'une des abstractions les plus spectaculaires que JavaScrip ```js function creerAdditionneur(a) { - return function(b) { + return function (b) { return a + b; - } + }; } let ajoute5 = creerAdditionneur(5); let ajoute20 = creerAdditionneur(20); diff --git a/files/fr/web/javascript/memory_management/index.md b/files/fr/web/javascript/memory_management/index.md index 5b6c7cee9bdafe..e9cf21d522d5f5 100644 --- a/files/fr/web/javascript/memory_management/index.md +++ b/files/fr/web/javascript/memory_management/index.md @@ -33,7 +33,7 @@ var s = "azerty"; // alloue de la mémoire pour un objet et les valeurs qu'il contient var o = { a: 1, - b: null + b: null, }; // alloue de la mémoire pour un tableau et les valeurs qu'il contient @@ -46,9 +46,13 @@ function f(a) { } // les expressions de fonction allouent aussi de la mémoire -unElement.addEventListener('click', function(){ - unElement.style.backgroundColor = 'blue'; -}, false); +unElement.addEventListener( + "click", + function () { + unElement.style.backgroundColor = "blue"; + }, + false, +); ``` #### Allocation par appels de fonctions @@ -60,7 +64,7 @@ Certains appels de fonctions entraînent l'allocation mémoire d'un objet. var d = new Date(); // Alloue de la mémoire pour un objet représentant un élément du DOM -var e = document.createElement('div'); +var e = document.createElement("div"); ``` Certaines méthodes allouent de la mémoire pour des nouveaux objets ou de nouvelles valeurs. @@ -108,31 +112,30 @@ L'algorithme le plus simple consiste à faire l'équivalence entre « un objet n ```js var o = { a: { - b: 2 - } + b: 2, + }, }; // 2 objets sont créés. L'un est référencé par l'autre en tant que propriété. // L'autre est référencé car assigné à la variable 'o'. // Aucun des deux ne peut être ramassé par le ramasse-miettes. - var o2 = o; // la variable 'o2' est le deuxième élément qui - // référence l'objet o -o = 1; // désormais, l'objet qui était dans 'o' possède - // une seule référence de o2 vers lui +// référence l'objet o +o = 1; // désormais, l'objet qui était dans 'o' possède +// une seule référence de o2 vers lui var oa = o2.a; // référence la propriété 'a' de l'objet - // cet objet a donc 2 références : une - // par une propriété, l'autre par la variable 'oa' +// cet objet a donc 2 références : une +// par une propriété, l'autre par la variable 'oa' o2 = "yo"; // L'objet 'o' ne possède plus de références vers lui - // Il peut être ramassé. - // Cependant sa propriété 'a' est toujours référencé. - // La mémoire ne peut donc pas être libérée. +// Il peut être ramassé. +// Cependant sa propriété 'a' est toujours référencé. +// La mémoire ne peut donc pas être libérée. oa = null; // la propriété 'a' ne possède plus de références - // vers elle. L'objet peut être ramassé et la mémoire - // libérée. +// vers elle. L'objet peut être ramassé et la mémoire +// libérée. ``` #### Une limitation : les cycles @@ -158,7 +161,7 @@ Les navigateurs Internet Explorer 6 et 7 utilisent cet algorithme pour gérer le ```js var div; -window.onload = function() { +window.onload = function () { div = document.getElementById("monElementDiv"); div.referenceCirculaire = div; div.desDonnees = new Array(10000).join("*"); diff --git a/files/fr/web/javascript/reference/classes/constructor/index.md b/files/fr/web/javascript/reference/classes/constructor/index.md index bd033f2d7cac91..cba2b2afa5d6cb 100644 --- a/files/fr/web/javascript/reference/classes/constructor/index.md +++ b/files/fr/web/javascript/reference/classes/constructor/index.md @@ -34,7 +34,7 @@ class Person { } } -const otto = new Person('Otto'); +const otto = new Person("Otto"); otto.introduce(); ``` @@ -65,11 +65,11 @@ class ValidationError extends Error { try { throw new ValidationError("Numéro de téléphone invalide"); } catch (error) { - if (error instanceof ValidationError) { + if (error instanceof ValidationError) { console.log(error.name); // Il s'agit d'une erreur au lieu de ValidationError ! console.log(error.printCustomerMessage()); } else { - console.log('Erreur inconnue', error); + console.log("Erreur inconnue", error); throw error; } } @@ -82,24 +82,24 @@ Cependant, si vous fournissez votre propre constructeur, et que votre classe dé ```js class ValidationError extends Error { constructor(message) { - super(message); // appelle le constructeur de la classe parent - this.name = 'ValidationError'; - this.code = '42'; + super(message); // appelle le constructeur de la classe parent + this.name = "ValidationError"; + this.code = "42"; } printCustomerMessage() { - return `La validation a échoué :-( (détails : ${this.message}, code : ${this.code})`; + return `La validation a échoué :-( (détails : ${this.message}, code : ${this.code})`; } } try { throw new ValidationError("Numéro de téléphone invalide"); } catch (error) { - if (error instanceof ValidationError) { + if (error instanceof ValidationError) { console.log(error.name); // Maintenant, c'est une ValidationError ! console.log(error.printCustomerMessage()); } else { - console.log('Unknown error', error); + console.log("Unknown error", error); throw error; } } @@ -121,7 +121,7 @@ class Square extends Polygon { super(length, length); // NOTE : Dans les classes dérivées, `super()` doit être appelé avant de pouvoir // utiliser `this`. Si vous ne le faites pas, cela provoquera une ReferenceError. - this.name = 'Carré'; + this.name = "Carré"; } get area() { @@ -129,8 +129,8 @@ class Square extends Polygon { } set area(value) { - this.height = value**0.5; - this.width = value**0.5; + this.height = value ** 0.5; + this.width = value ** 0.5; } } ``` @@ -141,15 +141,15 @@ Ici, le prototype de la classe `Square` est modifié — mais le constructeur de ```js class Polygon { - constructor() { - this.name = "Polygone"; - } + constructor() { + this.name = "Polygone"; + } } class Square extends Polygon { - constructor() { - super(); - } + constructor() { + super(); + } } class Rectangle {} diff --git a/files/fr/web/javascript/reference/classes/extends/index.md b/files/fr/web/javascript/reference/classes/extends/index.md index fbf7d93a05eb64..0aa20118929887 100644 --- a/files/fr/web/javascript/reference/classes/extends/index.md +++ b/files/fr/web/javascript/reference/classes/extends/index.md @@ -37,13 +37,12 @@ class Carré extends Polygone { // Pour les classes dérivées, super() doit être appelé avant de // pouvoir utiliser 'this' sinon cela provoque une exception // ReferenceError - this.nom = 'Carré'; + this.nom = "Carré"; } get aire() { return this.hauteur * this.largeur; } - } ``` @@ -58,8 +57,23 @@ class maDate extends Date { } getFormattedDate() { - var mois = ['Jan','Fév','Mar','Avr','Mai','Juin','Juil','Août','Sep','Oct','Nov','Déc']; - return this.getDate() + "-" + mois[this.getMonth()] + "-" + this.getFullYear(); + var mois = [ + "Jan", + "Fév", + "Mar", + "Avr", + "Mai", + "Juin", + "Juil", + "Août", + "Sep", + "Oct", + "Nov", + "Déc", + ]; + return ( + this.getDate() + "-" + mois[this.getMonth()] + "-" + this.getFullYear() + ); } } ``` diff --git a/files/fr/web/javascript/reference/classes/index.md b/files/fr/web/javascript/reference/classes/index.md index 9a4ba60de45967..31c9e3bf18ec5f 100644 --- a/files/fr/web/javascript/reference/classes/index.md +++ b/files/fr/web/javascript/reference/classes/index.md @@ -151,15 +151,15 @@ Si on écrit le code avec des fonctions traditionnelles plutôt qu'avec des clas L'autodétermination de `this` n'a pas lieu en mode strict, la valeur `this` est passée telle quelle. ```js -function Animal() { } +function Animal() {} -Animal.prototype.crie = function() { +Animal.prototype.crie = function () { return this; -} +}; -Animal.mange = function() { +Animal.mange = function () { return this; -} +}; let obj = new Animal(); let crie = obj.crie; @@ -222,7 +222,7 @@ En utilisant des champs privés, on peut revoir la définition de la façon suiv class Rectangle { #hauteur = 0; #largeur; - constructor(hauteur, largeur){ + constructor(hauteur, largeur) { this.#hauteur = hauteur; this.#largeur = largeur; } @@ -265,12 +265,12 @@ Si on déclare un constructeur dans une classe fille, on doit utiliser `super()` On peut également étendre des classes plus _traditionnelles_ basées sur des constructeurs fonctionnels : ```js -function Animal (nom) { +function Animal(nom) { this.nom = nom; } Animal.prototype.crie = function () { console.log(`${this.nom} fait du bruit.`); -} +}; class Chien extends Animal { crie() { @@ -279,7 +279,7 @@ class Chien extends Animal { } } -let c = new Chien('Ida'); +let c = new Chien("Ida"); c.crie(); // Ida fait du bruit. // Ida aboie. @@ -291,7 +291,7 @@ En revanche, les classes ne permettent pas d'étendre des objets classiques non- const Animal = { crie() { console.log(`${this.nom} fait du bruit.`); - } + }, }; class Chien { @@ -305,7 +305,7 @@ class Chien { } Object.setPrototypeOf(Chien.prototype, Animal); -let d = new Chien('Ida'); +let d = new Chien("Ida"); d.crie(); // Ida fait du bruit // Ida aboie. @@ -321,13 +321,15 @@ Par exemple, si, lorsqu'on utilise des méthodes comme {{jsxref("Array.map","map class MonArray extends Array { // On surcharge species // avec le constructeur Array du parent - static get [Symbol.species]() { return Array; } + static get [Symbol.species]() { + return Array; + } } -let a = new MonArray(1,2,3); -let mapped = a.map(x => x * x); +let a = new MonArray(1, 2, 3); +let mapped = a.map((x) => x * x); console.log(mapped instanceof MonArray); // false -console.log(mapped instanceof Array); // true +console.log(mapped instanceof Array); // true ``` ## Utiliser super pour la classe parente @@ -360,20 +362,22 @@ Les sous-classes abstraites ou _mix-ins_ sont des modèles (_templates_) pour de Une fonction peut prendre une classe parente en entrée et renvoyer une classe fille qui étend cette classe parente. Cela peut permettre d'émuler les _mix-ins_ avec ECMAScript. ```js -let calculetteMixin = Base => class extends Base { - calc() { } -}; - -let aleatoireMixin = Base => class extends Base { - randomiseur() { } -}; +let calculetteMixin = (Base) => + class extends Base { + calc() {} + }; + +let aleatoireMixin = (Base) => + class extends Base { + randomiseur() {} + }; ``` Une classe utilisant ces _mix-ins_ peut alors être écrite de cette façon : ```js -class Toto { } -class Truc extends calculetteMixin(aleatoireMixin(Toto)) { } +class Toto {} +class Truc extends calculetteMixin(aleatoireMixin(Toto)) {} ``` ## Spécifications diff --git a/files/fr/web/javascript/reference/classes/private_class_fields/index.md b/files/fr/web/javascript/reference/classes/private_class_fields/index.md index ecec23ce0a98ea..a826e87a5e5f25 100644 --- a/files/fr/web/javascript/reference/classes/private_class_fields/index.md +++ b/files/fr/web/javascript/reference/classes/private_class_fields/index.md @@ -10,17 +10,17 @@ translation_of: Web/JavaScript/Reference/Classes/Private_class_fields ```js class ClassWithPrivateField { - #privateField + #privateField; } class ClassWithPrivateMethod { #privateMethod() { - return 'hello world' + return "hello world"; } } class ClassWithPrivateStaticField { - static #PRIVATE_STATIC_FIELD + static #PRIVATE_STATIC_FIELD; } ``` @@ -34,15 +34,15 @@ La limitation des variables statiques ne pouvant être appelées que par des mé ```js class ClassWithPrivateStaticField { - static #PRIVATE_STATIC_FIELD + static #PRIVATE_STATIC_FIELD; static publicStaticMethod() { - ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42 - return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD + ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42; + return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD; } } -console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42) +console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42); ``` Les champs statiques privés sont ajoutés au constructeur de la classe au moment de l'évaluation de classe.. @@ -53,23 +53,25 @@ Ceci peut conduire à un comportement inattendu lors de l'utilisation de **`this ```js class BaseClassWithPrivateStaticField { - static #PRIVATE_STATIC_FIELD + static #PRIVATE_STATIC_FIELD; static basePublicStaticMethod() { - this.#PRIVATE_STATIC_FIELD = 42 - return this.#PRIVATE_STATIC_FIELD + this.#PRIVATE_STATIC_FIELD = 42; + return this.#PRIVATE_STATIC_FIELD; } } -class SubClass extends BaseClassWithPrivateStaticField { } +class SubClass extends BaseClassWithPrivateStaticField {} -let error = null +let error = null; try { - SubClass.basePublicStaticMethod() -} catch(e) { error = e} + SubClass.basePublicStaticMethod(); +} catch (e) { + error = e; +} -console.assert(error instanceof TypeError) +console.assert(error instanceof TypeError); ``` ### Champs d'instance privés @@ -80,16 +82,16 @@ L'encapsulation est forcée par le langage. C'est une erreur de syntaxe que de f ```js class ClassWithPrivateField { - #privateField + #privateField; constructor() { - this.#privateField = 42 - this.#randomField = 666 // Erreur de syntaxe + this.#privateField = 42; + this.#randomField = 666; // Erreur de syntaxe } } -const instance = new ClassWithPrivateField() -instance.#privateField === 42 // Erreur de syntaxe +const instance = new ClassWithPrivateField(); +instance.#privateField === 42; // Erreur de syntaxe ``` ### Méthodes Privées @@ -102,17 +104,17 @@ Les méthodes statiques privées peuvent être des fonctions génératrices, asy ```js class ClassWithPrivateStaticMethod { - static #privateStaticMethod() { - return 42 - } + static #privateStaticMethod() { + return 42; + } - static publicStaticMethod1() { - return ClassWithPrivateStaticMethod.#privateStaticMethod(); - } + static publicStaticMethod1() { + return ClassWithPrivateStaticMethod.#privateStaticMethod(); + } - static publicStaticMethod2() { - return this.#privateStaticMethod(); - } + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } } console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42); @@ -123,15 +125,15 @@ Cela peut conduire à un comportement inattendu lors de l'utilisation de **`this ```js class Base { - static #privateStaticMethod() { - return 42; - } - static publicStaticMethod1() { - return Base.#privateStaticMethod(); - } - static publicStaticMethod2() { - return this.#privateStaticMethod(); - } + static #privateStaticMethod() { + return 42; + } + static publicStaticMethod1() { + return Base.#privateStaticMethod(); + } + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } } class Derived extends Base {} @@ -147,16 +149,16 @@ Les méthodes d'instance privées sont des méthodes disponibles dans les instan ```js class ClassWithPrivateMethod { #privateMethod() { - return 'hello world' + return "hello world"; } getPrivateMessage() { - return this.#privateMethod() + return this.#privateMethod(); } } -const instance = new ClassWithPrivateMethod() -console.log(instance.getPrivateMessage()) +const instance = new ClassWithPrivateMethod(); +console.log(instance.getPrivateMessage()); // expected output: "hello world" ``` @@ -164,18 +166,18 @@ Les méthodes d'instance privées peuvent être des fonctions génératrices, as ```js class ClassWithPrivateAccessor { - #message + #message; get #decoratedMessage() { - return `✨${this.#message}✨` + return `✨${this.#message}✨`; } set #decoratedMessage(msg) { - this.#message = msg + this.#message = msg; } constructor() { - this.#decoratedMessage = 'hello world' - console.log(this.#decoratedMessage) + this.#decoratedMessage = "hello world"; + console.log(this.#decoratedMessage); } } diff --git a/files/fr/web/javascript/reference/classes/public_class_fields/index.md b/files/fr/web/javascript/reference/classes/public_class_fields/index.md index fc0836a6be2345..829d414cd15f16 100644 --- a/files/fr/web/javascript/reference/classes/public_class_fields/index.md +++ b/files/fr/web/javascript/reference/classes/public_class_fields/index.md @@ -18,16 +18,16 @@ Les champs publics, tant statiques que d'instance, sont des propriétés qui peu ```js class ClasseAvecChampDInstance { - champDInstance = 'champ d\'instance' + champDInstance = "champ d'instance"; } class ClasseAvecChampStatique { - static champStatique = 'champ statique' + static champStatique = "champ statique"; } class ClasseAvecMethodeDInstancePublique { methodePublique() { - return 'hello world' + return "hello world"; } } ``` @@ -42,10 +42,10 @@ Les champs statiques publics sont déclarés en utilisant le mot-clé `static`. ```js class ClasseAvecChampStatique { - static champStatique = 'champ statique' + static champStatique = "champ statique"; } -console.log(ClasseAvecChampStatique.champStatique) +console.log(ClasseAvecChampStatique.champStatique); // affichage attendu : "champ statique" ``` @@ -53,11 +53,11 @@ Les champs sans initialiseur sont initialisés à `undefined`. ```js class ClasseAvecChampStatique { - static champStatique + static champStatique; } -console.assert(ClasseAvecChampStatique.hasOwnProperty('champStatique')) -console.log(ClasseAvecChampStatique.champStatique) +console.assert(ClasseAvecChampStatique.hasOwnProperty("champStatique")); +console.log(ClasseAvecChampStatique.champStatique); // affichage attendu : "undefined" ``` @@ -65,17 +65,17 @@ Les champs statiques publics ne sont pas réinitialisés dans les sous-classes, ```js class ClasseAvecChampStatique { - static champStatiqueDeBase = 'champ de base' + static champStatiqueDeBase = "champ de base"; } class SousClasseAvecChampStatique extends ClasseAvecChampStatique { - static sousChampStatique = 'champ de la sous-classe' + static sousChampStatique = "champ de la sous-classe"; } -console.log(SousClasseAvecChampStatique.sousChampStatique) +console.log(SousClasseAvecChampStatique.sousChampStatique); // affichage attendu : "champ de la sous-classe" -console.log(SousClasseAvecChampStatique.champStatiqueDeBase) +console.log(SousClasseAvecChampStatique.champStatiqueDeBase); // affichage attendu : "champ de base" ``` @@ -83,20 +83,22 @@ Lors de l'initialisation des champs, `this` fait référence au constructeur de ```js class ClasseAvecChampStatique { - static champStatiqueDeBase = 'champ statique de base' - static autreChampStatiqueDeBase = this.champStatiqueDeBase + static champStatiqueDeBase = "champ statique de base"; + static autreChampStatiqueDeBase = this.champStatiqueDeBase; - static methodeStatiqueDeBase() { return 'affichage de la méthode statique de base' } + static methodeStatiqueDeBase() { + return "affichage de la méthode statique de base"; + } } class SousClasseAvecChampStatique extends ClasseAvecChampStatique { - static sousChampStatique = super.methodeStatiqueDeBase() + static sousChampStatique = super.methodeStatiqueDeBase(); } -console.log(ClasseAvecChampStatique.autreChampStatiqueDeBase) +console.log(ClasseAvecChampStatique.autreChampStatiqueDeBase); // affichage attendu : "champ statique de base" -console.log(SousClasseAvecChampStatique.sousChampStatique) +console.log(SousClasseAvecChampStatique.sousChampStatique); // affichage attendu : "affichage de la méthode statique de base" ``` @@ -108,11 +110,11 @@ Les champs d'instance publics sont ajoutés grâce à {{jsxref("Global_Objects/O ```js class ClasseAvecChampDInstance { - champDInstance = 'champ d\'instance' + champDInstance = "champ d'instance"; } -const instance = new ClasseAvecChampDInstance() -console.log(instance.champDInstance) +const instance = new ClasseAvecChampDInstance(); +console.log(instance.champDInstance); // affichage attendu : "champ d'instance" ``` @@ -120,11 +122,11 @@ Les champs sans initialiseur sont initialisés à `undefined`. ```js class ClasseAvecChampDInstance { - champdDInstance + champdDInstance; } -const instance = new ClasseAvecChampDInstance() -console.assert(instance.hasOwnProperty('champDInstance')) +const instance = new ClasseAvecChampDInstance(); +console.assert(instance.hasOwnProperty("champDInstance")); console.log(instance.champDInstance); // affichage attendu : "undefined" ``` @@ -132,14 +134,14 @@ console.log(instance.champDInstance); À l'instar des propriétés, les noms de champ peuvent être calculés : ```js -const PREFIXE = 'prefixe'; +const PREFIXE = "prefixe"; class ClasseAvecNomDeChampCalcule { - [`${PREFIXE}Champ`] = 'champ préfixé' + [`${PREFIXE}Champ`] = "champ préfixé"; } -const instance = new ClasseAvecNomDeChampCalcule() -console.log(instance.prefixeChamp) +const instance = new ClasseAvecNomDeChampCalcule(); +console.log(instance.prefixeChamp); // affichage attendu : "champ préfixé" ``` @@ -147,22 +149,24 @@ Lors de l'initialisation des champs, `this` fait référence à l'instance en co ```js class ClasseAvecChampDInstance { - champDInstanceDeBase = 'champ de base' - autreChampDInstanceDeBase = this.champDInstanceDeBase - methodeDInstanceDeBase() { return 'affichage de la méthode de base' } + champDInstanceDeBase = "champ de base"; + autreChampDInstanceDeBase = this.champDInstanceDeBase; + methodeDInstanceDeBase() { + return "affichage de la méthode de base"; + } } class SousClasseAvecChampDInstance extends ClasseAvecChampDInstance { - sousChampDInstance = super.methodeDInstanceDeBase() + sousChampDInstance = super.methodeDInstanceDeBase(); } -const base = new ClasseAvecChampDInstance() -const sous = new SousClasseAvecChampDInstance() +const base = new ClasseAvecChampDInstance(); +const sous = new SousClasseAvecChampDInstance(); -console.log(base.autreChampDInstanceDeBase) +console.log(base.autreChampDInstanceDeBase); // affichage attendu : "champ de base" -console.log(sous.sousChampDInstance) +console.log(sous.sousChampDInstance); // affichage attendu : "affichage de la méthode de base" ``` @@ -175,7 +179,7 @@ Le mot-clé **`static`** définit une méthode statique pour une classe. Les mé ```js class ClasseAvecMethodeStatique { static methodeStatique() { - return 'la méthode statique a été appelée.'; + return "la méthode statique a été appelée."; } } @@ -192,12 +196,12 @@ Comme leur nom l'implique, les méthodes d'instance publiques sont des fonctions ```js class ClasseAvecMethodeDInstancePublique { methodePublique() { - return 'hello world' + return "hello world"; } } -const instance = new ClasseAvecMethodeDInstancePublique() -console.log(instance.methodePublique()) +const instance = new ClasseAvecMethodeDInstancePublique(); +console.log(instance.methodePublique()); // affichage attendu : "hello world" ``` @@ -207,9 +211,9 @@ Vous pouvez utiliser des fonctions génératrices, asynchrones et génératrices ```js class ClasseAvecMethodesFantaisie { - *methodeGeneratrice() { } - async methodeAsynchrone() { } - async *methodeGeneratriceAsynchrone() { } + *methodeGeneratrice() {} + async methodeAsynchrone() {} + async *methodeGeneratriceAsynchrone() {} } ``` @@ -217,20 +221,20 @@ A l'intérieur des méthodes d'instance, `this` fait référence à l'instance e ```js class ClasseDeBase { - msg = 'hello world' + msg = "hello world"; methodePubliqueDeBase() { - return this.msg + return this.msg; } } class SousClasse extends ClasseDeBase { sousMethodePublique() { - return super.methodePubliqueDeBase() + return super.methodePubliqueDeBase(); } } -const instance = new SousClasse() -console.log(instance.sousMethodePublique()) +const instance = new SousClasse(); +console.log(instance.sousMethodePublique()); // affichage attendu : "hello world" ``` @@ -238,12 +242,12 @@ Les accesseurs et les mutateurs sont des méthodes spéciales qui sont liées à ```js class ClasseAvecGetSet { - #msg = 'hello world' + #msg = "hello world"; get msg() { - return this.#msg + return this.#msg; } set msg(x) { - this.#msg = `hello ${x}` + this.#msg = `hello ${x}`; } } @@ -251,7 +255,7 @@ const instance = new ClasseAvecGetSet(); console.log(instance.msg); // affichage attendu : "hello world" -instance.msg = 'gâteau'; +instance.msg = "gâteau"; console.log(instance.msg); // affichage attendu : "hello gâteau" ``` diff --git a/files/fr/web/javascript/reference/classes/static/index.md b/files/fr/web/javascript/reference/classes/static/index.md index b4d3983ef2d17b..3058f1cb9e675e 100644 --- a/files/fr/web/javascript/reference/classes/static/index.md +++ b/files/fr/web/javascript/reference/classes/static/index.md @@ -46,8 +46,8 @@ class SuperTriple extends Triple { } } -console.log(Triple.triple()); // 3 -console.log(Triple.triple(6)); // 18 +console.log(Triple.triple()); // 3 +console.log(Triple.triple(6)); // 18 console.log(SuperTriple.triple(4)); // 144 var tp = new Triple(); console.log(SuperTriple.triple(4)); // 144 (pas d'impact de l'affectation du parent) @@ -61,10 +61,10 @@ Afin d'appeler une autre méthode statique dans une méthode statique, on pourra ```js class StaticMethodCall { static staticMethod() { - return 'Méthode statique appelée'; + return "Méthode statique appelée"; } static anotherStaticMethod() { - return this.staticMethod() + ' depuis une autre statique'; + return this.staticMethod() + " depuis une autre statique"; } } StaticMethodCall.staticMethod(); @@ -75,11 +75,11 @@ StaticMethodCall.anotherStaticMethod(); ### Depuis les constructeurs de classes et les autres méthodes -Les méthodes statiques ne sont pas directement accessibles via le mot-clé [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this). Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique `NomDeClasse.MéthodeStatique()` (comme pour les autres appels en dehors de la classe) ou avec la propriété `constructor` : `this.constructor.MéthodeStatique()`. +Les méthodes statiques ne sont pas directement accessibles via le mot-clé [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this). Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique `NomDeClasse.MéthodeStatique()` (comme pour les autres appels en dehors de la classe) ou avec la propriété `constructor` : `this.constructor.MéthodeStatique()`. ```js -class StaticMethodCall{ - constructor(){ +class StaticMethodCall { + constructor() { console.log(StaticMethodCall.staticMethod()); // 'appel de la méthode statique' @@ -87,8 +87,8 @@ class StaticMethodCall{ // 'appel de la méthode statique' } - static staticMethod(){ - return 'appel de la méthode statique.'; + static staticMethod() { + return "appel de la méthode statique."; } } ``` diff --git a/files/fr/web/javascript/reference/classes/static_initialization_blocks/index.md b/files/fr/web/javascript/reference/classes/static_initialization_blocks/index.md index 3de56f7c2ba8ce..024f94d3d0c0d3 100644 --- a/files/fr/web/javascript/reference/classes/static_initialization_blocks/index.md +++ b/files/fr/web/javascript/reference/classes/static_initialization_blocks/index.md @@ -30,10 +30,10 @@ The scope of the variables declared inside the static block is local to the bloc Since `var`, `function`, `const` or `let` declared in a `static {}` initialization block are local to the block, any `var` declarations in the block are not hoisted. ```js -var y = 'Outer y'; +var y = "Outer y"; class A { - static field = 'Inner y'; + static field = "Inner y"; static { var y = this.field; } @@ -61,13 +61,13 @@ The output shows that the blocks and fields are evaluated in execution order. ```js class MyClass { - static field1 = console.log('field1 called'); + static field1 = console.log("field1 called"); static { - console.log('Class static block #1 called'); + console.log("Class static block #1 called"); } - static field2 = console.log('field2 called'); + static field2 = console.log("field2 called"); static { - console.log('Class static block #2 called'); + console.log("Class static block #2 called"); } } @@ -88,7 +88,7 @@ This code shows how to access a public static field. ```js class A { - static field = 'A static field'; + static field = "A static field"; static { var y = this.field; } @@ -100,7 +100,7 @@ This includes static properties, as shown below: ```js class A { - static fieldA = 'A.fieldA'; + static fieldA = "A.fieldA"; } class B extends A { static { @@ -127,7 +127,7 @@ class D { } } -getDPrivateField(new D('private')); +getDPrivateField(new D("private")); // > private ``` diff --git a/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.md b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.md index ccc45d3a171226..fdb114a1362464 100644 --- a/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.md +++ b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.md @@ -88,13 +88,13 @@ Les propriétés suivantes sont dépréciées. Cela n'affecte pas le comportemen Les propriétés qui suivent sont désormais des propriétés des instances de `RegExp` et ne sont plus des propriétés de l'objet `RegExp` : -| Propriété | Description | -| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | -| {{jsxref("RegExp.global", "global")}} | Permet d'utiliser une expression rationnelle pour relever l'ensemble des correspondances ou uniquement la première. | +| Propriété | Description | +| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | +| {{jsxref("RegExp.global", "global")}} | Permet d'utiliser une expression rationnelle pour relever l'ensemble des correspondances ou uniquement la première. | | {{jsxref("RegExp.ignoreCase", "ignoreCase")}} | Définit si la casse doit être ignorée ou non lors de la recherche d'une correspondance. | -| {{jsxref("RegExp.lastIndex", "lastIndex")}} | L'index à partir duquel chercher la prochaine correspondance. | -| {{jsxref("RegExp.multiline", "multiline")}} | Définit si la recherche doit s'effectuer sur une seule ligne ou plusieurs. | -| {{jsxref("RegExp.source", "source")}} | Le texte du motif. | +| {{jsxref("RegExp.lastIndex", "lastIndex")}} | L'index à partir duquel chercher la prochaine correspondance. | +| {{jsxref("RegExp.multiline", "multiline")}} | Définit si la recherche doit s'effectuer sur une seule ligne ou plusieurs. | +| {{jsxref("RegExp.source", "source")}} | Le texte du motif. | ### Méthodes de `RegExp` @@ -164,15 +164,15 @@ Ces fonctionnalités sont obsolètes et ont intégralement été retirées de Ja ### `Function` -| Propriété | Description | -| -------------------------------------------------------------------- | ---------------------------------------------- | +| Propriété | Description | +| ---------------------------------------------------- | ---------------------------------------------- | | {{jsxref("Objets_globaux/Function/arity", "arity")}} | Nombre d'arguments déclarés pour une fonction. | ### `Array` -| Propriété | Description | -| ---------------------------------------- | --------------------------------------------------------------------- | -| {{jsxref("Array.observe()")}} | Observe les modifications apportées à un tableau de façon asynchrone. | +| Propriété | Description | +| ------------------------------- | --------------------------------------------------------------------- | +| {{jsxref("Array.observe()")}} | Observe les modifications apportées à un tableau de façon asynchrone. | | {{jsxref("Array.unobserve()")}} | Retire les observateurs ajoutés à un tableau. | ### `Number` diff --git a/files/fr/web/javascript/reference/errors/already_has_pragma/index.md b/files/fr/web/javascript/reference/errors/already_has_pragma/index.md index d9a1475ebfe68f..64346c7b7077c2 100644 --- a/files/fr/web/javascript/reference/errors/already_has_pragma/index.md +++ b/files/fr/web/javascript/reference/errors/already_has_pragma/index.md @@ -1,5 +1,5 @@ --- -title: 'Warning: -file- is being assigned a //# sourceMappingURL, but already has one' +title: "Warning: -file- is being assigned a //# sourceMappingURL, but already has one" slug: Web/JavaScript/Reference/Errors/Already_has_pragma translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma --- diff --git a/files/fr/web/javascript/reference/errors/array_sort_argument/index.md b/files/fr/web/javascript/reference/errors/array_sort_argument/index.md index 6bc29dc801666a..5d711859b3602e 100644 --- a/files/fr/web/javascript/reference/errors/array_sort_argument/index.md +++ b/files/fr/web/javascript/reference/errors/array_sort_argument/index.md @@ -1,5 +1,5 @@ --- -title: 'TypeError: invalid Array.prototype.sort argument' +title: "TypeError: invalid Array.prototype.sort argument" slug: Web/JavaScript/Reference/Errors/Array_sort_argument translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument --- @@ -26,19 +26,19 @@ L'argument passé à {{jsxref("Array.prototype.sort()")}} devrait être {{jsxref ### Cas invalides ```js example-bad -[1, 3, 2].sort(5); // TypeError +[1, 3, 2].sort(5); // TypeError -var cmp = { asc: (x, y) => x >= y, dsc : (x, y) => x <= y }; -[1, 3, 2].sort(cmp[this.key] || 'asc'); // TypeError +var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y }; +[1, 3, 2].sort(cmp[this.key] || "asc"); // TypeError ``` ### Cas valides ```js example-good -[1, 3, 2].sort(); // [1, 2, 3] +[1, 3, 2].sort(); // [1, 2, 3] -var cmp = { asc: (x, y) => x >= y, dsc : (x, y) => x <= y }; -[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3] +var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y }; +[1, 3, 2].sort(cmp[this.key || "asc"]); // [1, 2, 3] ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/bad_radix/index.md b/files/fr/web/javascript/reference/errors/bad_radix/index.md index 67b1df1fd658c3..1a15d8da4d8c02 100644 --- a/files/fr/web/javascript/reference/errors/bad_radix/index.md +++ b/files/fr/web/javascript/reference/errors/bad_radix/index.md @@ -1,5 +1,5 @@ --- -title: 'RangeError: radix must be an integer' +title: "RangeError: radix must be an integer" slug: Web/JavaScript/Reference/Errors/Bad_radix translation_of: Web/JavaScript/Reference/Errors/Bad_radix --- @@ -48,10 +48,10 @@ Généralement, on emploie cette méthode avec des bases fréquemment utilisées ### Exemples valides ```js example-good -(42).toString(2); // "101010" (binary) -(13).toString(8); // "15" (octal) -(0x42).toString(10); // "66" (decimal) -(100000).toString(16) // "186a0" (hexadecimal) +(42).toString(2); // "101010" (binary) +(13).toString(8); // "15" (octal) +(0x42).toString(10); // "66" (decimal) +(100000).toString(16); // "186a0" (hexadecimal) ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.md b/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.md index db3733a9135851..e64fee9746246a 100644 --- a/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.md +++ b/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.md @@ -31,15 +31,15 @@ var re = /motif/marqueurs; ou encore : ```js -var re = new RegExp('motif', 'marqueurs'); +var re = new RegExp("motif", "marqueurs"); ``` -| Marqueur | Description | -| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `g` | Recherche globale. | -| i | Recherche non-sensible à la casse. | -| m | Recherche sur plusieurs lignes. | -| u | Unicode : le motif est interprété comme une suite de codets Unicode. | +| Marqueur | Description | +| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `g` | Recherche globale. | +| i | Recherche non-sensible à la casse. | +| m | Recherche sur plusieurs lignes. | +| u | Unicode : le motif est interprété comme une suite de codets Unicode. | | y | La recherche effectuée est « adhérente » et recherche une correspondance à la position indiquée dans la chaîne cible (cf. {{jsxref("RegExp.sticky", "sticky")}}). | ## Exemples @@ -66,7 +66,7 @@ Peut-être souhaitiez-vous créer une chaîne de caractères ? Dans ce cas, il f ```js example-good let obj = { - url: '/docs/Web' + url: "/docs/Web", }; ``` diff --git a/files/fr/web/javascript/reference/errors/bad_return/index.md b/files/fr/web/javascript/reference/errors/bad_return/index.md index 06e4f856a539ca..2c7ab3abde78bc 100644 --- a/files/fr/web/javascript/reference/errors/bad_return/index.md +++ b/files/fr/web/javascript/reference/errors/bad_return/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: return not in function' +title: "SyntaxError: return not in function" slug: Web/JavaScript/Reference/Errors/Bad_return translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield --- @@ -40,7 +40,7 @@ var encouragement = function(score) { À première vue, les accolades semblent correctes mais en regardant de plus près, on voit qu'il manque une accolade ouvrante ("{") après la première instruction `if`. La version correcte serait : ```js example-good -var encouragement = function(score) { +var encouragement = function (score) { if (score === 147) { return "Maximum!"; } diff --git a/files/fr/web/javascript/reference/errors/bigint_division_by_zero/index.md b/files/fr/web/javascript/reference/errors/bigint_division_by_zero/index.md index f75588282a0d2f..c0fab5217734c5 100644 --- a/files/fr/web/javascript/reference/errors/bigint_division_by_zero/index.md +++ b/files/fr/web/javascript/reference/errors/bigint_division_by_zero/index.md @@ -1,5 +1,5 @@ --- -title: 'RangeError: BigInt division by zero' +title: "RangeError: BigInt division by zero" slug: Web/JavaScript/Reference/Errors/BigInt_division_by_zero l10n: sourceCommit: ac4ad443e29371b7c807051e8d10cac4d53d00c4 diff --git a/files/fr/web/javascript/reference/errors/bigint_negative_exponent/index.md b/files/fr/web/javascript/reference/errors/bigint_negative_exponent/index.md index c3d5db9cc3de9f..159d754bd83c84 100644 --- a/files/fr/web/javascript/reference/errors/bigint_negative_exponent/index.md +++ b/files/fr/web/javascript/reference/errors/bigint_negative_exponent/index.md @@ -1,5 +1,5 @@ --- -title: 'RangeError: BigInt negative exponent' +title: "RangeError: BigInt negative exponent" slug: Web/JavaScript/Reference/Errors/BigInt_negative_exponent l10n: sourceCommit: ac4ad443e29371b7c807051e8d10cac4d53d00c4 diff --git a/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.md b/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.md index 74f77c0c5d3444..1aa499533215f7 100644 --- a/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.md +++ b/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.md @@ -1,5 +1,5 @@ --- -title: 'TypeError: X.prototype.y called on incompatible type' +title: "TypeError: X.prototype.y called on incompatible type" slug: Web/JavaScript/Reference/Errors/Called_on_incompatible_type translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type --- @@ -33,15 +33,15 @@ Cela peut également se produire quand on fournit une fonction (sous la forme d' ### Exemples invalides ```js example-bad -var monSet = new Set; -['truc', 'bidule'].forEach(monSet.add); +var monSet = new Set(); +["truc", "bidule"].forEach(monSet.add); // monSet.add est une fonction mais // "monSet" n'est pas capturé en tant que this. var maFonction = function () { console.log(this); }; -['truc', 'bidule'].forEach(maFonction.bind); +["truc", "bidule"].forEach(maFonction.bind); // maFonction.bind est une fonction // mais "maFonction" n'est pas capturé en tant // que this. @@ -50,14 +50,14 @@ var maFonction = function () { ### Exemples valides ```js example-good -var monSet = new Set; -['truc', 'bidule'].forEach(monSet.add.bind(monSet)); +var monSet = new Set(); +["truc", "bidule"].forEach(monSet.add.bind(monSet)); // Cela fonctionne car on lie "monSet" avec this. var maFonction = function () { - console.log(this) + console.log(this); }; -['truc', 'bidule'].forEach(x => maFonction.bind(x)); +["truc", "bidule"].forEach((x) => maFonction.bind(x)); // Cela fonctionne car on utilise // la fonction "bind" ce qui permet de // créer une fonction lambda qui propage diff --git a/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md index acc86c321fa5f9..e814d2f7f23d03 100644 --- a/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md +++ b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md @@ -29,13 +29,13 @@ Il y a eu un accès à une variable déclarée avec `let` ou `const` avant que c Dans l'exemple qui suit, la variable `toto` est redéclarée dans le bloc avec un second `let` et elle n'est donc pas initialisée. ```js example-bad -function test(){ - let toto = 33; - if (true) { - let toto = (toto + 55); - // ReferenceError: can't access lexical - // declaration `toto` before initialization - } +function test() { + let toto = 33; + if (true) { + let toto = toto + 55; + // ReferenceError: can't access lexical + // declaration `toto` before initialization + } } test(); ``` @@ -45,11 +45,11 @@ test(); Afin que `toto` puisse être modifiée au sein de l'instruction `if`, on enlèvera la redéclaration dans ce bloc : ```js example-good -function test(){ - let toto = 33; - if (true) { - toto = (toto + 55); - } +function test() { + let toto = 33; + if (true) { + toto = toto + 55; + } } test(); ``` diff --git a/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.md b/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.md index c7a188953b5040..e3747f5450f7ed 100644 --- a/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.md +++ b/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.md @@ -28,7 +28,7 @@ Le problème peut être lié à une valeur qui se trouve à un endroit inattendu ### Exemple invalide ```js example-bad -'use strict'; +"use strict"; var foo = "my string"; // The following line does nothing if not in strict mode. @@ -40,7 +40,7 @@ foo.bar = {}; // TypeError: can't assign to property "bar" on "my string": not a On pourra corriger le problème en convertissant la valeur primitive en sont équivalent objet avec un constructeur (ici {{jsxref("String")}} pour . ```js example-good -'use strict'; +"use strict"; var foo = new String("my string"); foo.bar = {}; diff --git a/files/fr/web/javascript/reference/errors/cant_be_converted_to_bigint_because_it_isnt_an_integer/index.md b/files/fr/web/javascript/reference/errors/cant_be_converted_to_bigint_because_it_isnt_an_integer/index.md index 0414cbe27cd007..2700dea4fe45b4 100644 --- a/files/fr/web/javascript/reference/errors/cant_be_converted_to_bigint_because_it_isnt_an_integer/index.md +++ b/files/fr/web/javascript/reference/errors/cant_be_converted_to_bigint_because_it_isnt_an_integer/index.md @@ -1,5 +1,5 @@ --- -title: 'RangeError: x can''t be converted to BigInt because it isn''t an integer' +title: "RangeError: x can't be converted to BigInt because it isn't an integer" slug: Web/JavaScript/Reference/Errors/Cant_be_converted_to_BigInt_because_it_isnt_an_integer l10n: sourceCommit: ac4ad443e29371b7c807051e8d10cac4d53d00c4 diff --git a/files/fr/web/javascript/reference/errors/cant_convert_bigint_to_number/index.md b/files/fr/web/javascript/reference/errors/cant_convert_bigint_to_number/index.md index f2260966587940..0387ea8fb3b424 100644 --- a/files/fr/web/javascript/reference/errors/cant_convert_bigint_to_number/index.md +++ b/files/fr/web/javascript/reference/errors/cant_convert_bigint_to_number/index.md @@ -1,5 +1,5 @@ --- -title: 'TypeError: can''t convert BigInt to number' +title: "TypeError: can't convert BigInt to number" slug: Web/JavaScript/Reference/Errors/Cant_convert_BigInt_to_number l10n: sourceCommit: ac4ad443e29371b7c807051e8d10cac4d53d00c4 diff --git a/files/fr/web/javascript/reference/errors/cant_convert_x_to_bigint/index.md b/files/fr/web/javascript/reference/errors/cant_convert_x_to_bigint/index.md index 4cfc11f675d9d9..4b093e28349536 100644 --- a/files/fr/web/javascript/reference/errors/cant_convert_x_to_bigint/index.md +++ b/files/fr/web/javascript/reference/errors/cant_convert_x_to_bigint/index.md @@ -1,5 +1,5 @@ --- -title: 'TypeError: can''t convert x to BigInt' +title: "TypeError: can't convert x to BigInt" slug: Web/JavaScript/Reference/Errors/Cant_convert_x_to_BigInt l10n: sourceCommit: ac4ad443e29371b7c807051e8d10cac4d53d00c4 diff --git a/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md index a1b31699fc1793..c3fa03d5e2f444 100644 --- a/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md +++ b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md @@ -27,35 +27,33 @@ La plupart du temps, un objet est extensible, ce qui signifie qu'on peut lui ajo En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), si on essaie d'ajouter une nouvelle propriété sur un objet non-extensible, on obtient une exception `TypeError`. En mode non-strict, l'ajout de la nouvelle propriété est ignoré silencieusement. ```js example-bad -'use strict'; +"use strict"; var obj = {}; Object.preventExtensions(obj); -obj.x = 'toto'; +obj.x = "toto"; // TypeError: can't define property "x": "obj" is not extensible ``` Pour le mode strict ete le mode non-strict, un appel à {{jsxref("Object.defineProperty()")}} déclenchera une exception lorsqu'on utilisera cette méthode pour ajouter une nouvelle propriété à un objet non-extenssible. ```js example-bad -var obj = { }; +var obj = {}; Object.preventExtensions(obj); -Object.defineProperty(obj, - 'x', { value: "toto" } -); +Object.defineProperty(obj, "x", { value: "toto" }); // TypeError: can't define property "x": "obj" is not extensible ``` Pour corriger cet erreur, il faut retirer l'appel à {{jsxref("Object.preventExtensions()")}} pour que l'objet soit extensible, soit ajouter la propriété avant que l'objet devienne non-extensible, soit retirer l'ajout de cette propriété si elle n'est pas nécessaire. ```js example-good -'use strict'; +"use strict"; var obj = {}; -obj.x = 'toto'; // On ajoute la propriété avant de - // bloquer l'ajout d'autres propriétés +obj.x = "toto"; // On ajoute la propriété avant de +// bloquer l'ajout d'autres propriétés Object.preventExtensions(obj); ``` diff --git a/files/fr/web/javascript/reference/errors/cant_delete/index.md b/files/fr/web/javascript/reference/errors/cant_delete/index.md index 3d7508fa4508e5..d693818e8bb190 100644 --- a/files/fr/web/javascript/reference/errors/cant_delete/index.md +++ b/files/fr/web/javascript/reference/errors/cant_delete/index.md @@ -30,24 +30,24 @@ Les propriétés non-configurables ne sont pas très fréquentes mais il est pos ```js example-bad "use strict"; -var obj = Object.freeze({name: "Elsa", score: 157}); -delete obj.score; // TypeError +var obj = Object.freeze({ name: "Elsa", score: 157 }); +delete obj.score; // TypeError -"use strict"; +("use strict"); var obj = {}; -Object.defineProperty(obj, "toto", {value: 2, configurable: false}); -delete obj.toto; // TypeError +Object.defineProperty(obj, "toto", { value: 2, configurable: false }); +delete obj.toto; // TypeError -"use strict"; +("use strict"); var frozenArray = Object.freeze([0, 1, 2]); -frozenArray.pop(); // TypeError +frozenArray.pop(); // TypeError ``` Certaines propriétés natives de JavaScript sont non-configurables. Peut-être que le code tente de supprimer une constante mathématique : ```js example-bad "use strict"; -delete Math.PI; // TypeError +delete Math.PI; // TypeError ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/cant_redefine_property/index.md b/files/fr/web/javascript/reference/errors/cant_redefine_property/index.md index 8649272c9d7e1a..3b3d453a68748f 100644 --- a/files/fr/web/javascript/reference/errors/cant_redefine_property/index.md +++ b/files/fr/web/javascript/reference/errors/cant_redefine_property/index.md @@ -30,9 +30,9 @@ La méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-con ```js example-bad var obj = Object.create({}); -Object.defineProperty(obj, "toto", {value: "machin"}); +Object.defineProperty(obj, "toto", { value: "machin" }); -Object.defineProperty(obj, "toto", {value: "bidule"}); +Object.defineProperty(obj, "toto", { value: "bidule" }); // TypeError: can't redefine non-configurable property "toto" ``` @@ -40,8 +40,8 @@ Si on veut pouvoir redéfinir la propriété "toto" dans la suite du code, il fa ```js example-good var obj = Object.create({}); -Object.defineProperty(obj, "toto", {value: "machin", configurable: true}); -Object.defineProperty(obj, "toto", {value: "bidule", configurable: true}); +Object.defineProperty(obj, "toto", { value: "machin", configurable: true }); +Object.defineProperty(obj, "toto", { value: "bidule", configurable: true }); ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/cant_use_nullish_coalescing_unparenthesized/index.md b/files/fr/web/javascript/reference/errors/cant_use_nullish_coalescing_unparenthesized/index.md index 138eaebd650eef..3a698f110d21a6 100644 --- a/files/fr/web/javascript/reference/errors/cant_use_nullish_coalescing_unparenthesized/index.md +++ b/files/fr/web/javascript/reference/errors/cant_use_nullish_coalescing_unparenthesized/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions' +title: "SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions" slug: Web/JavaScript/Reference/Errors/Cant_use_nullish_coalescing_unparenthesized l10n: sourceCommit: ac4ad443e29371b7c807051e8d10cac4d53d00c4 @@ -42,8 +42,8 @@ a && b ?? c À la place, on utilisera des parenthèses pour rendre explicite l'ordre des opérations voulu : ```js example-good -(a ?? b) || c -a ?? (b && c) +(a ?? b) || c; +a ?? (b && c); ``` ## Exemples diff --git a/files/fr/web/javascript/reference/errors/cyclic_object_value/index.md b/files/fr/web/javascript/reference/errors/cyclic_object_value/index.md index 1a404f1bd36743..6fa071dae22531 100644 --- a/files/fr/web/javascript/reference/errors/cyclic_object_value/index.md +++ b/files/fr/web/javascript/reference/errors/cyclic_object_value/index.md @@ -1,5 +1,5 @@ --- -title: 'TypeError: cyclic object value' +title: "TypeError: cyclic object value" slug: Web/JavaScript/Reference/Errors/Cyclic_object_value translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value --- diff --git a/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.md b/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.md index 77c85da3b931c2..6765b597ecf0d7 100644 --- a/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.md +++ b/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.md @@ -35,7 +35,7 @@ Cette erreur ne se produit qu'en [mode strict](/fr/docs/Web/JavaScript/Reference Essayer de supprimer une variable normale avec `delete` ne fonctionne pas, voire lève une exception en mode strict : ```js example-bad -'use strict'; +"use strict"; var x; @@ -50,7 +50,7 @@ delete x; Pour libérer le contenu d'une variable, on peut la passer à {{jsxref("null")}} : ```js example-good -'use strict'; +"use strict"; var x; // ... diff --git a/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md index bc54c7d5dc7333..cea34b6e91011d 100644 --- a/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md +++ b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md @@ -1,5 +1,5 @@ --- -title: 'ReferenceError: deprecated caller or arguments usage' +title: "ReferenceError: deprecated caller or arguments usage" slug: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage --- @@ -34,9 +34,9 @@ Un avertissement uniquement affiché en mode strict qui prend la forme d'une {{j function myFunc() { if (myFunc.caller == null) { - return 'La fonction a été appelée depuis la portée globale !'; - } else { - return 'L\'appelant est ' + myFunc.caller; + return "La fonction a été appelée depuis la portée globale !"; + } else { + return "L'appelant est " + myFunc.caller; } } @@ -52,17 +52,21 @@ myFunc(); ```js example-bad "use strict"; -function f(n) { g(n - 1); } +function f(n) { + g(n - 1); +} function g(n) { - console.log('before: ' + g.arguments[0]); - if (n > 0) { f(n); } - console.log('after: ' + g.arguments[0]); + console.log("before: " + g.arguments[0]); + if (n > 0) { + f(n); + } + console.log("after: " + g.arguments[0]); } f(2); -console.log('returned: ' + g.arguments); +console.log("returned: " + g.arguments); // Warning: ReferenceError: deprecated arguments usage ``` diff --git a/files/fr/web/javascript/reference/errors/deprecated_octal/index.md b/files/fr/web/javascript/reference/errors/deprecated_octal/index.md index 9a028ce60827aa..07b1be8eef4f5e 100644 --- a/files/fr/web/javascript/reference/errors/deprecated_octal/index.md +++ b/files/fr/web/javascript/reference/errors/deprecated_octal/index.md @@ -58,7 +58,7 @@ Pour former un littéral en base octal, on pourra utiliser un zéro suivi de la Pour former une séquence d'échappement en base octale, on écrira une séquence d'échappement en base hexadécimale : ```js example-good -'\xA9'; +"\xA9"; ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/equal_as_assign/index.md b/files/fr/web/javascript/reference/errors/equal_as_assign/index.md index 8518b6325e62c6..b9719a1b2bf15c 100644 --- a/files/fr/web/javascript/reference/errors/equal_as_assign/index.md +++ b/files/fr/web/javascript/reference/errors/equal_as_assign/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: test for equality (==) mistyped as assignment (=)?' +title: "SyntaxError: test for equality (==) mistyped as assignment (=)?" slug: Web/JavaScript/Reference/Errors/Equal_as_assign translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign --- @@ -26,7 +26,7 @@ Le code utilise une affectation (`=`) là où on attendrait un test d'égalité Il est conseillé de ne pas utiliser d'affectations simples dans des expressions conditionnelles (comme le test effectué avec [`if...else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else)) car on peut confondre les deux à la lecture du code. Ainsi, on n'utilisera pas la forme suivante : -```js example-bad +```js-nolint example-bad if (x = y) { // do the right thing } diff --git a/files/fr/web/javascript/reference/errors/getter_only/index.md b/files/fr/web/javascript/reference/errors/getter_only/index.md index dd5370d5504e20..982266141184b7 100644 --- a/files/fr/web/javascript/reference/errors/getter_only/index.md +++ b/files/fr/web/javascript/reference/errors/getter_only/index.md @@ -1,5 +1,5 @@ --- -title: 'TypeError: setting a property that has only a getter' +title: "TypeError: setting a property that has only a getter" slug: Web/JavaScript/Reference/Errors/Getter_only translation_of: Web/JavaScript/Reference/Errors/Getter_only --- @@ -31,11 +31,11 @@ Dans l'exemple qui suit, on voit comment créer un accesseur sur une propriété function Archiver() { var temperature = null; - Object.defineProperty(this, 'temperature', { - get: function() { - console.log('get!'); + Object.defineProperty(this, "temperature", { + get: function () { + console.log("get!"); return temperature; - } + }, }); } @@ -55,18 +55,20 @@ function Archiver() { var temperature = null; var archive = []; - Object.defineProperty(this, 'temperature', { - get: function() { - console.log('get!'); + Object.defineProperty(this, "temperature", { + get: function () { + console.log("get!"); return temperature; }, - set: function(value) { + set: function (value) { temperature = value; archive.push({ val: temperature }); - } + }, }); - this.getArchive = function() { return archive; }; + this.getArchive = function () { + return archive; + }; } var arc = new Archiver(); diff --git a/files/fr/web/javascript/reference/errors/hash_outside_class/index.md b/files/fr/web/javascript/reference/errors/hash_outside_class/index.md index 2deee01b8ff10c..6f4c77f73ea56b 100644 --- a/files/fr/web/javascript/reference/errors/hash_outside_class/index.md +++ b/files/fr/web/javascript/reference/errors/hash_outside_class/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: Unexpected ''#'' used outside of class body' +title: "SyntaxError: Unexpected '#' used outside of class body" slug: Web/JavaScript/Reference/Errors/Hash_outside_class translation_of: Web/JavaScript/Reference/Errors/Hash_outside_class --- @@ -35,30 +35,29 @@ document.querySelector(#un-élément) Pourra être corrigé avec : ```js example-good -document.querySelector("#un-élément") +document.querySelector("#un-élément"); ``` ### En dehors d'une classe ```js example-bad class ClasseAvecChampPrivé { - #champPrivé + #champPrivé; - constructor() { - } + constructor() {} } -this.#champPrivé = 42 +this.#champPrivé = 42; ``` Cela pourra être corrigé en déplaçant le champ privé à l'intérieur de la classe : ```js example-good class ClasseAvecChampPrivé { - #champPrivé + #champPrivé; constructor() { - this.#champPrivé = 42 + this.#champPrivé = 42; } } ``` diff --git a/files/fr/web/javascript/reference/errors/identifier_after_number/index.md b/files/fr/web/javascript/reference/errors/identifier_after_number/index.md index 9e669276c0a7fe..9d56115e64cacf 100644 --- a/files/fr/web/javascript/reference/errors/identifier_after_number/index.md +++ b/files/fr/web/javascript/reference/errors/identifier_after_number/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: identifier starts immediately after numeric literal' +title: "SyntaxError: identifier starts immediately after numeric literal" slug: Web/JavaScript/Reference/Errors/Identifier_after_number translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number --- @@ -44,7 +44,7 @@ alert(1.toto); Pour éviter ce problème, il faudra renommer les variables afin d'éviter d'utiliser un chiffre au début : ```js example-good -var vie1 = 'toto'; +var vie1 = "toto"; var toto = vie1; ``` diff --git a/files/fr/web/javascript/reference/errors/illegal_character/index.md b/files/fr/web/javascript/reference/errors/illegal_character/index.md index a8bbf86b2537ff..89a0c80acd2296 100644 --- a/files/fr/web/javascript/reference/errors/illegal_character/index.md +++ b/files/fr/web/javascript/reference/errors/illegal_character/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: illegal character' +title: "SyntaxError: illegal character" slug: Web/JavaScript/Reference/Errors/Illegal_character translation_of: Web/JavaScript/Reference/Errors/Illegal_character --- @@ -20,7 +20,7 @@ SyntaxError: Invalid or unexpected token (Chrome) ## Quel est le problème ? -Dans le code, il y a un élément de la syntaxe qui n'est pas à la bonne place. Pour détecter les erreurs de ce type, vous pouvez utiliser un éditeur de texte qui prend en charge la coloration syntaxique et qui met en évidence les caractères problématiques (par exemple si on a utilisé un tiret (` – `) au lieu d'un moins ( - ) ou des guillemets anglais (` “ `) à la place de doubles quotes ( " ). +Dans le code, il y a un élément de la syntaxe qui n'est pas à la bonne place. Pour détecter les erreurs de ce type, vous pouvez utiliser un éditeur de texte qui prend en charge la coloration syntaxique et qui met en évidence les caractères problématiques (par exemple si on a utilisé un tiret (`–`) au lieu d'un moins ( - ) ou des guillemets anglais (`“`) à la place de doubles quotes ( " ). ## Exemples @@ -64,7 +64,7 @@ var couleurs = ['#000', #333', '#666']; Dans ce cas, il suffit de rajouter la quote pour `'#333'`. ```js example-good -var couleurs = ['#000', '#333', '#666']; +var couleurs = ["#000", "#333", "#666"]; ``` ### Caractères cachés @@ -72,7 +72,7 @@ var couleurs = ['#000', '#333', '#666']; Lorsque vous copiez/collez du code depuis des sources externes, celles-ci peuvent contenir des caractères invalides difficiles à discerner. ```js example-bad -var toto = 'truc'; +var toto = "truc"; // SyntaxError: illegal character ``` diff --git a/files/fr/web/javascript/reference/errors/in_operator_no_object/index.md b/files/fr/web/javascript/reference/errors/in_operator_no_object/index.md index 1a3c73b7fed54d..d3d1ca4d847e16 100644 --- a/files/fr/web/javascript/reference/errors/in_operator_no_object/index.md +++ b/files/fr/web/javascript/reference/errors/in_operator_no_object/index.md @@ -66,7 +66,7 @@ var toto = { machin: "bidule" }; Attention lorsqu'on utilise l'opérateur `in` quand on recherche une valeur dans un objet {{jsxref("Array")}}. L'opérateur `in` vérifie la présence de l'index mais pas la valeur présente à cet index. ```js -var arbres = ['cèdre', 'bouleau', 'pin', 'sapin', 'érable']; +var arbres = ["cèdre", "bouleau", "pin", "sapin", "érable"]; 3 in arbres; // true "pin" in arbres; // false ``` diff --git a/files/fr/web/javascript/reference/errors/invalid_array_length/index.md b/files/fr/web/javascript/reference/errors/invalid_array_length/index.md index a3cd94f67c0a6f..22ac2d04c1da59 100644 --- a/files/fr/web/javascript/reference/errors/invalid_array_length/index.md +++ b/files/fr/web/javascript/reference/errors/invalid_array_length/index.md @@ -1,5 +1,5 @@ --- -title: 'RangeError: invalid array length' +title: "RangeError: invalid array length" slug: Web/JavaScript/Reference/Errors/Invalid_array_length translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length --- @@ -37,25 +37,24 @@ Sinon, vous pouvez réduire la longueur utilisée afin que celle-ci soit dans l' ### Exemples invalides ```js example-bad -new Array(Math.pow(2, 40)) -new Array(-1) -new ArrayBuffer(Math.pow(2, 32)) -new ArrayBuffer(-1) +new Array(Math.pow(2, 40)); +new Array(-1); +new ArrayBuffer(Math.pow(2, 32)); +new ArrayBuffer(-1); let a = []; -a.length = a.length - 1; // set -1 to the length property +a.length = a.length - 1; // set -1 to the length property let b = new Array(Math.pow(2, 32) - 1); -b.length = b.length + 1; // set 2^32 to the length property +b.length = b.length + 1; // set 2^32 to the length property ``` ### Exemples valides ```js example-good -[ Math.pow(2, 40) ] // [ 1099511627776 ] -[ -1 ] // [ -1 ] -new ArrayBuffer(Math.pow(2, 32) - 1) -new ArrayBuffer(0) +[Math.pow(2, 40)][-1]; // [ 1099511627776 ] // [ -1 ] +new ArrayBuffer(Math.pow(2, 32) - 1); +new ArrayBuffer(0); let a = []; a.length = Math.max(0, a.length - 1); diff --git a/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md b/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md index b75f6e5c44dd48..51cfa084f59f43 100644 --- a/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md +++ b/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md @@ -1,5 +1,5 @@ --- -title: 'ReferenceError: invalid assignment left-hand side' +title: "ReferenceError: invalid assignment left-hand side" slug: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side --- @@ -38,12 +38,10 @@ Dans l'instruction `if`, plutôt qu'une affectation, on voudra plutôt utiliser ```js example-good if (Math.PI == 3 || Math.PI == 4) { - console.log('no way!'); + console.log("no way!"); } -var str = 'Hello, ' -+ 'from the ' -+ 'other side!'; +var str = "Hello, " + "from the " + "other side!"; ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/invalid_bigint_syntax/index.md b/files/fr/web/javascript/reference/errors/invalid_bigint_syntax/index.md index 0073b300ac9d31..a50b89bf131ac4 100644 --- a/files/fr/web/javascript/reference/errors/invalid_bigint_syntax/index.md +++ b/files/fr/web/javascript/reference/errors/invalid_bigint_syntax/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: invalid BigInt syntax' +title: "SyntaxError: invalid BigInt syntax" slug: Web/JavaScript/Reference/Errors/Invalid_BigInt_syntax l10n: sourceCommit: ac4ad443e29371b7c807051e8d10cac4d53d00c4 diff --git a/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.md b/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.md index cb17ea4502524d..0a6ad21e171653 100644 --- a/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.md +++ b/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.md @@ -78,14 +78,14 @@ function setupBigScreenEnvironment() { La déclaration `const` crée une référence en lecture seule vers une valeur. Elle ne signifie pas que la valeur en question est immuable mais uniquement que l'identifiant de la référence ne peut pas recevoir de nouvelle valeur. Ainsi, si le contenu est un objet, celui-ci pourra toujours être modifié : ```js example-bad -const obj = {toto: 'truc'}; -obj = {toto: 'bidule'}; // TypeError: invalid assignment to const `obj' +const obj = { toto: "truc" }; +obj = { toto: "bidule" }; // TypeError: invalid assignment to const `obj' ``` En revanche, on peut modifier les propriétés : ```js example-good -obj.toto = 'bidule'; +obj.toto = "bidule"; obj; // Object { toto: "bidule" } ``` diff --git a/files/fr/web/javascript/reference/errors/invalid_date/index.md b/files/fr/web/javascript/reference/errors/invalid_date/index.md index ab2f7d3399f29a..dd67cab80d6772 100644 --- a/files/fr/web/javascript/reference/errors/invalid_date/index.md +++ b/files/fr/web/javascript/reference/errors/invalid_date/index.md @@ -1,5 +1,5 @@ --- -title: 'RangeError: invalid date' +title: "RangeError: invalid date" slug: Web/JavaScript/Reference/Errors/Invalid_date translation_of: Web/JavaScript/Reference/Errors/Invalid_date --- @@ -30,15 +30,15 @@ Une chaîne de caractères indiquant une date invalide a été fournie comme arg Les chaînes de caractères qui ne peuvent pas être converties en date ou les dates qui contiennent des éléments illégaux pour le format ISO renvoient généralement {{jsxref("NaN")}}. Cependant, selon l'implémentation, les chaînes de caractères qui ne respectent pas le format ISO pour les dates peuvent déclencher une exception `RangeError: invalid date`. Les instructions suivantes déclencheront cette erreur dans Firefox : ```js example-bad -new Date('toto-truc 2014'); -new Date('2014-25-23').toISOString(); -new Date('toto-truc 2014').toString(); +new Date("toto-truc 2014"); +new Date("2014-25-23").toISOString(); +new Date("toto-truc 2014").toString(); ``` En revanche, cette instruction renverra {{jsxref("NaN")}} dans Firefox : ```js example-bad -Date.parse('toto-truc 2014'); // NaN +Date.parse("toto-truc 2014"); // NaN ``` Pour plus de détails, consulter la documentation sur {{jsxref("Date.parse()")}}. @@ -46,7 +46,7 @@ Pour plus de détails, consulter la documentation sur {{jsxref("Date.parse()")}} ### Exemples valides ```js example-good -new Date('05 October 2011 14:48 UTC'); +new Date("05 October 2011 14:48 UTC"); new Date(1317826080); // timestamp Unix pour le 5 octobre 2011 14:48:00 UTC ``` diff --git a/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.md b/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.md index 221fad2785efe2..f8c8b0f7f52024 100644 --- a/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.md +++ b/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: for-in loop head declarations may not have initializers' +title: "SyntaxError: for-in loop head declarations may not have initializers" slug: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer --- @@ -45,7 +45,7 @@ On peut retirer l'initialisateur de l'en-tête de la boucle : ```js example-good "use strict"; -var obj = {a: 1, b: 2, c: 3 }; +var obj = { a: 1, b: 2, c: 3 }; for (var i in obj) { console.log(obj[i]); @@ -57,7 +57,7 @@ for (var i in obj) { [Il ne faut pas utiliser de boucle `for...in` pour parcourir un tableau (`Array`)](/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau). Peut-être souhaitiez-vous utiliser une boucle `for` pour parcourir le tableau ? Cette boucle `for` permet également d'utiliser un initialisateur : ```js example-good -var arr = [ "a", "b", "c" ] +var arr = ["a", "b", "c"]; for (var i = 2; i < arr.length; i++) { console.log(arr[i]); diff --git a/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.md b/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.md index 72401d4147d74d..0180089e89ca99 100644 --- a/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.md +++ b/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.md @@ -1,5 +1,5 @@ --- -title: 'TypeError: invalid ''instanceof'' operand ''x''' +title: "TypeError: invalid 'instanceof' operand 'x'" slug: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand --- @@ -27,28 +27,28 @@ L'opérateur [`instanceof`](/fr/docs/Web/JavaScript/Reference/Opérateurs/instan ```js example-bad "test" instanceof ""; // TypeError: invalid 'instanceof' operand "" -42 instanceof 0; // TypeError: invalid 'instanceof' operand 0 +42 instanceof 0; // TypeError: invalid 'instanceof' operand 0 function Toto() {} -var f = Toto(); // Toto() est appelé et renvoie undefined +var f = Toto(); // Toto() est appelé et renvoie undefined var x = new Toto(); -x instanceof f; // TypeError: invalid 'instanceof' operand f -x instanceof x; // TypeError: x is not a function +x instanceof f; // TypeError: invalid 'instanceof' operand f +x instanceof x; // TypeError: x is not a function ``` Pour corriger ces erreurs, il faut remplacer l'opérateur `instanceof` avec l'opérateur [`typeof`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof) ou s'assurer que l'opérande droit est la fonction et non le résultat de son évaluation. ```js example-good -typeof "test" == "string"; // true -typeof 42 == "number" // true +typeof "test" == "string"; // true +typeof 42 == "number"; // true function Toto() {} -var f = Toto; // On n'appelle pas Toto. +var f = Toto; // On n'appelle pas Toto. var x = new Toto(); -x instanceof f; // true -x instanceof Toto; // true +x instanceof f; // true +x instanceof Toto; // true ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/is_not_iterable/index.md b/files/fr/web/javascript/reference/errors/is_not_iterable/index.md index 951028c8dc6228..cfa273c1b98536 100644 --- a/files/fr/web/javascript/reference/errors/is_not_iterable/index.md +++ b/files/fr/web/javascript/reference/errors/is_not_iterable/index.md @@ -1,5 +1,5 @@ --- -title: 'TypeError: ''x'' is not iterable' +title: "TypeError: 'x' is not iterable" slug: Web/JavaScript/Reference/Errors/is_not_iterable translation_of: Web/JavaScript/Reference/Errors/is_not_iterable --- @@ -28,43 +28,42 @@ La valeur passée comme opérande droit de [`for…of`](/fr/docs/Web/JavaScript/ En JavaScript, les objets ne sont pas itérables car ils n'implémentent pas le [protocole itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»). On ne peut donc pas utiliser `for...of` afin d'en parcourir les propriétés. ```js example-bad -var obj = { 'France': 'Paris', 'England': 'London' }; -for (let p of obj) { // TypeError: obj is not iterable - // … +var obj = { France: "Paris", England: "London" }; +for (let p of obj) { + // TypeError: obj is not iterable + // … } ``` Si on souhaite utiliser un itérateur pour parcourir les propriétés (leurs noms ou leurs valeurs), on pourra utiliser les méthodes {{jsxref("Object.keys")}} ou {{jsxref("Object.entries")}} qui fournissent des itérateurs : ```js example-good -var obj = { 'France': 'Paris', 'England': 'London' }; +var obj = { France: "Paris", England: "London" }; // On parcourt les noms des propriétés for (let country of Object.keys(obj)) { - var capital = obj[country]; - console.log(country, capital); + var capital = obj[country]; + console.log(country, capital); } for (const [country, capital] of Object.entries(obj)) - console.log(country, capital); + console.log(country, capital); ``` On pourrait également utiliser un objet {{jsxref("Map")}} : ```js example-good -var map = new Map; -map.set('France', 'Paris'); -map.set('England', 'London'); +var map = new Map(); +map.set("France", "Paris"); +map.set("England", "London"); // On parcourt les noms des propriétés for (let country of map.keys()) { - let capital = map[country]; - console.log(country, capital); + let capital = map[country]; + console.log(country, capital); } -for (let capital of map.values()) - console.log(capital); +for (let capital of map.values()) console.log(capital); -for (const [country, capital] of map.entries()) - console.log(country, capital); +for (const [country, capital] of map.entries()) console.log(country, capital); ``` ### Itérer grâce à un générateur @@ -78,19 +77,18 @@ function* generate(a, b) { } for (let x of generate) // TypeError: generate is not iterable - console.log(x); + console.log(x); ``` Lorsqu'elles ne sont pas appelées, l'objet {{jsxref("Function")}} correspondant au générateur peut être appelé mais il n'est pass itérable. Il ne faut donc pas oublier d'invoquer le générateur afin de parcourir les valeurs de l'itérateur qu'il produit. ```js example-good function* generate(a, b) { - yield a; - yield b; + yield a; + yield b; } -for (let x of generate(1,2)) - console.log(x); +for (let x of generate(1, 2)) console.log(x); ``` ### Parcourir un itérable spécifique @@ -99,25 +97,25 @@ Les itérables spécifiques (_custom iterables_) peuvent être créés en implé ```js example-bad const monIterableVide = { - [Symbol.iterator]() { - return [] // [] est un iterable mais pas un itérateur - // car il n'a pas de méthode next - } -} + [Symbol.iterator]() { + return []; // [] est un iterable mais pas un itérateur + // car il n'a pas de méthode next + }, +}; -Array.from(monIterableVide); // TypeError: monIterableVide is not iterable +Array.from(monIterableVide); // TypeError: monIterableVide is not iterable ``` Voici une implémentation correcte : ```js example-good const monIterableVide = { - [Symbol.iterator]() { - return [][Symbol.iterator]() - } -} + [Symbol.iterator]() { + return [][Symbol.iterator](); + }, +}; -Array.from(monIterableVide); // [] +Array.from(monIterableVide); // [] ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/json_bad_parse/index.md b/files/fr/web/javascript/reference/errors/json_bad_parse/index.md index 9774734cceff94..1368f599ac4db6 100644 --- a/files/fr/web/javascript/reference/errors/json_bad_parse/index.md +++ b/files/fr/web/javascript/reference/errors/json_bad_parse/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: JSON.parse: bad parsing' +title: "SyntaxError: JSON.parse: bad parsing" slug: Web/JavaScript/Reference/Errors/JSON_bad_parse translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse --- @@ -58,7 +58,7 @@ Lorsque la méthode {{jsxref("JSON.parse()")}} analyse (_parse_) une chaîne de Les deux lignes qui suivent déclencheront une exception `SyntaxError` : ```js example-bad -JSON.parse('[1, 2, 3, 4, ]'); +JSON.parse("[1, 2, 3, 4, ]"); JSON.parse('{"foo" : 1, }'); // SyntaxError JSON.parse: unexpected character // at line 1 column 14 of the JSON data @@ -67,7 +67,7 @@ JSON.parse('{"foo" : 1, }'); Pour que la méthode puisse analyser le JSON correctement, on évitera les virgules en fin de tableau : ```js example-good -JSON.parse('[1, 2, 3, 4 ]'); +JSON.parse("[1, 2, 3, 4 ]"); JSON.parse('{"foo" : 1 }'); ``` diff --git a/files/fr/web/javascript/reference/errors/malformed_uri/index.md b/files/fr/web/javascript/reference/errors/malformed_uri/index.md index 4dcdd4cb1cb38d..eb4d50d3a2607d 100644 --- a/files/fr/web/javascript/reference/errors/malformed_uri/index.md +++ b/files/fr/web/javascript/reference/errors/malformed_uri/index.md @@ -1,5 +1,5 @@ --- -title: 'URIError: malformed URI sequence' +title: "URIError: malformed URI sequence" slug: Web/JavaScript/Reference/Errors/Malformed_URI translation_of: Web/JavaScript/Reference/Errors/Malformed_URI --- @@ -29,17 +29,17 @@ Il y a eu une erreur lors de l'encodage ou du décodage de l'URI. Un argument fo L'encodage permet de remplacer certains caractères par une, deux, trois voire quatre séquences d'échappement qui représente l'encodage UTF-8 du caractère. Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère _surrogate_ qui ne fait pas partie d'une paire de codets : ```js example-bad -encodeURI('\uD800'); +encodeURI("\uD800"); // "URIError: malformed URI sequence" -encodeURI('\uDFFF'); +encodeURI("\uDFFF"); // "URIError: malformed URI sequence" ``` En revanche, si on dispose de la paire de codets : ```js example-good -encodeURI('\uD800\uDFFF'); +encodeURI("\uD800\uDFFF"); // "%F0%90%8F%BF" ``` @@ -48,14 +48,14 @@ encodeURI('\uD800\uDFFF'); Le décodage permet de remplacer chaque séquence d'échappement dans le composant encodé par le caractère qu'elle représente. S'il n'existe aucun caractère correspondant, une exception sera déclenchée : ```js example-bad -decodeURIComponent('%E0%A4%A'); +decodeURIComponent("%E0%A4%A"); // "URIError: malformed URI sequence" ``` Avec la valeur d'entrée correcte, on a généralement quelque chose qui ressemble à : ```js example-good -decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B'); +decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"); // "JavaScript_шеллы" ``` diff --git a/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.md b/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.md index 274fa511f67150..2236b5c1040a5f 100644 --- a/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.md +++ b/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: missing ] after element list' +title: "SyntaxError: missing ] after element list" slug: Web/JavaScript/Reference/Errors/Missing_bracket_after_list translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list --- @@ -41,13 +41,9 @@ Les versions correctes seraient : ```js example-good var liste = [1, 2]; -var instruments = [ - "Ukulele", - "Guitare", - "Piano" -]; +var instruments = ["Ukulele", "Guitare", "Piano"]; -var data = [{toto: "truc"}, {titi: "bidule"}]; +var data = [{ toto: "truc" }, { titi: "bidule" }]; ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.md b/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.md index 60957e1da3257d..ab5babb9c8d104 100644 --- a/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.md +++ b/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: missing : after property id' +title: "SyntaxError: missing : after property id" slug: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id --- @@ -22,7 +22,7 @@ SyntaxError: missing : after property id (Firefox) Lorsqu'on crée un objet en utilisant un [initialisateur d'objet](/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet), il faut utiliser un deux-points ( : ) afin de séparer les clés des valeurs pour les propriétés de l'objet. ```js -var obj = { cleDeLaPropriete: 'valeur' }; +var obj = { cleDeLaPropriete: "valeur" }; ``` ## Exemples @@ -39,12 +39,12 @@ var obj = { cleDeLaPropriete = 'valeur' }; Pour corriger ce problème, on peut utiliser un deux-points ou bien affecter la nouvelle propriété après avoir créé l'objet : ```js example-good -var obj = { cleDeLaPropriete: 'valeur' }; +var obj = { cleDeLaPropriete: "valeur" }; // ou encore : -var obj = { }; -obj['cleDeLaPropriete'] = 'valeur'; +var obj = {}; +obj["cleDeLaPropriete"] = "valeur"; ``` ### Propriétés vides @@ -74,7 +74,7 @@ var obj = { 'tr'+'uc': 'toto' }; Pour corriger l'erreur, il faudra placer l'expression entre crochets : ```js example-good -var obj = { ['tr'+'uc']: 'toto' }; +var obj = { ["tr" + "uc"]: "toto" }; ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.md b/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.md index 05f5aec6de14bb..88985c0e92e924 100644 --- a/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.md +++ b/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: missing } after function body' +title: "SyntaxError: missing } after function body" slug: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body --- @@ -39,7 +39,7 @@ var charge = function() { La forme correcte est : ```js example-good -var charge = function() { +var charge = function () { if (soleil) { utiliserPanneauSolaire(); } else { @@ -57,7 +57,7 @@ Une erreur de ce type peut être moins visible lorsqu'on utilise les fonctions q Généralement, mettre en forme et vérifier l'indentation permet de repérer ces erreurs. ```js example-good -(function() { +(function () { if (true) { return false; } diff --git a/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.md b/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.md index cdf607004b72c3..158090abca1a34 100644 --- a/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.md +++ b/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: missing } after property list' +title: "SyntaxError: missing } after property list" slug: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list --- @@ -41,7 +41,7 @@ La version correcte correspondante est : var obj = { a: 1, b: { maProp: 2 }, - c: 3 + c: 3, }; ``` diff --git a/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.md b/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.md index b6c0788babf871..f4ee361bae1939 100644 --- a/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.md +++ b/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: missing formal parameter' +title: "SyntaxError: missing formal parameter" slug: Web/JavaScript/Reference/Errors/Missing_formal_parameter translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter --- @@ -48,15 +48,15 @@ Il faut utiliser des identifiants lors de la déclaration des fonctions : ```js example-good function carre(nombre) { return nombre * nombre; -}; +} function salutation(salut) { return salut; -}; +} function log(arg) { - console.log(arg) -}; + console.log(arg); +} ``` Ensuite, on pourra appeler ces fonctions avec les arguments voulus : @@ -64,7 +64,7 @@ Ensuite, on pourra appeler ces fonctions avec les arguments voulus : ```js carre(2); // 4 salutation("Coucou"); // "Coucou" -log({obj: "value"}); // Object { obj: "value" } +log({ obj: "value" }); // Object { obj: "value" } ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.md b/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.md index 19cdbdaa15b144..a59f2ab1f26097 100644 --- a/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.md +++ b/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: missing = in const declaration' +title: "SyntaxError: missing = in const declaration" slug: Web/JavaScript/Reference/Errors/Missing_initializer_in_const translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const --- diff --git a/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.md b/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.md index f0d8d1cb20674d..3d65eb2eaed756 100644 --- a/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.md +++ b/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: missing name after . operator' +title: "SyntaxError: missing name after . operator" slug: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator --- diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md index b0576752a4721b..98a59595e54393 100644 --- a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md +++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: missing ) after argument list' +title: "SyntaxError: missing ) after argument list" slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list --- @@ -47,7 +47,7 @@ console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"); Dans cet exemple, le moteur JavaScript considère qu'on souhaitait avoir `);` dans la chaîne de caractères et l'ignore. Aussi, le moteur considère que l'appelle à `console.log` n'est pas terminé et qu'il manque une parenthèse fermante. Pour corriger ce problème, on peut rajouter une quote `'` après la chaîne de caractères `"Script"` : ```js example-good -console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"'); +console.log('"Java" + "Script" = "' + "Java" + 'Script"'); // '"Java" + "Script" = "JavaScript"' ``` diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md index 52509a196bad44..5cd0a71fe06961 100644 --- a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md +++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: missing ) after condition' +title: "SyntaxError: missing ) after condition" slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition --- @@ -61,7 +61,7 @@ Pour corriger cette erreur, on utilisera [un opérateur de comparaison](/fr/docs ```js example-good if (done === true) { - console.log("Et voilà !"); + console.log("Et voilà !"); } ``` diff --git a/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.md b/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.md index 652d043ef2e0ef..d785b1edf7488e 100644 --- a/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.md +++ b/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: missing ; before statement' +title: "SyntaxError: missing ; before statement" slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement --- @@ -38,7 +38,7 @@ Pour éviter cela, on pourra utiliser des doubles quotes ou échapper l'apostrop ```js example-good var toto = "Ouvrir l'œil"; -var toto = 'Ouvrir l\'œil'; +var toto = "Ouvrir l'œil"; ``` ### Déclarer des propriétés avec `var` @@ -76,9 +76,9 @@ def print(info){ À la place de `def`, on utilisera le mot-clé `function` : ```js example-good -function print(info){ +function print(info) { console.log(info); -}; +} ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/more_arguments_needed/index.md b/files/fr/web/javascript/reference/errors/more_arguments_needed/index.md index ef999b9ffaa41e..2617e3174c62a6 100644 --- a/files/fr/web/javascript/reference/errors/more_arguments_needed/index.md +++ b/files/fr/web/javascript/reference/errors/more_arguments_needed/index.md @@ -1,5 +1,5 @@ --- -title: 'TypeError: More arguments needed' +title: "TypeError: More arguments needed" slug: Web/JavaScript/Reference/Errors/More_arguments_needed translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed --- diff --git a/files/fr/web/javascript/reference/errors/negative_repetition_count/index.md b/files/fr/web/javascript/reference/errors/negative_repetition_count/index.md index 2a5261d0d7297b..5834d2bae1c8f3 100644 --- a/files/fr/web/javascript/reference/errors/negative_repetition_count/index.md +++ b/files/fr/web/javascript/reference/errors/negative_repetition_count/index.md @@ -1,5 +1,5 @@ --- -title: 'RangeError: repeat count must be non-negative' +title: "RangeError: repeat count must be non-negative" slug: Web/JavaScript/Reference/Errors/Negative_repetition_count translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count --- @@ -27,16 +27,16 @@ La méthode {{jsxref("String.prototype.repeat()")}} a été utilisée avec un ar ### Exemples invalides ```js example-bad -'abc'.repeat(-1); // RangeError +"abc".repeat(-1); // RangeError ``` ### Exemples valides ```js example-good -'abc'.repeat(0); // '' -'abc'.repeat(1); // 'abc' -'abc'.repeat(2); // 'abcabc' -'abc'.repeat(3.5); // 'abcabcabc' (converti en entier) +"abc".repeat(0); // '' +"abc".repeat(1); // 'abc' +"abc".repeat(2); // 'abcabc' +"abc".repeat(3.5); // 'abcabcabc' (converti en entier) ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/no_non-null_object/index.md b/files/fr/web/javascript/reference/errors/no_non-null_object/index.md index 92be3e82a5114d..7b78354d2dac80 100644 --- a/files/fr/web/javascript/reference/errors/no_non-null_object/index.md +++ b/files/fr/web/javascript/reference/errors/no_non-null_object/index.md @@ -30,17 +30,17 @@ Un objet devrait être trouvé et n'est pas fourni. La valeur {{jsxref("null")}} Lorsqu'on utilise des méthodes telles que {{jsxref("Object.create()")}}, {{jsxref("Object.defineProperty()")}} ou {{jsxref("Object.defineProperties()")}}, le paramètre optionnel de description des propriétés doit être un descripteur sous la forme d'un objet. Si la valeur fournie n'est pas un objet (mais par exemple un nombre), l'appel à la méthode déclenchera une erreur : ```js example-bad -Object.defineProperty({}, 'cle', 1); +Object.defineProperty({}, "cle", 1); // TypeError: 1 is not a non-null object -Object.defineProperty({}, 'cle', null); +Object.defineProperty({}, "cle", null); // TypeError: null is not a non-null object ``` Un descripteur de propriété valide aura la structure suivante : ```js example-good -Object.defineProperty({}, 'cle', { value: 'toto', writable: false }); +Object.defineProperty({}, "cle", { value: "toto", writable: false }); ``` ### Les clés de `WeakMap` et `WeakSet` sont des objets @@ -49,14 +49,14 @@ Les objets {{jsxref("WeakMap")}} et {{jsxref("WeakSet")}} utilisent des objets c ```js example-bad var ws = new WeakSet(); -ws.add('toto'); +ws.add("toto"); // TypeError: "toto" is not a non-null object ``` À la place, on utilisera des objets : ```js example-good -ws.add({toto: 'truc'}); +ws.add({ toto: "truc" }); ws.add(window); ``` diff --git a/files/fr/web/javascript/reference/errors/no_variable_name/index.md b/files/fr/web/javascript/reference/errors/no_variable_name/index.md index aff46cc92e8f9d..e1a8735540e056 100644 --- a/files/fr/web/javascript/reference/errors/no_variable_name/index.md +++ b/files/fr/web/javascript/reference/errors/no_variable_name/index.md @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: missing variable name' +title: "SyntaxError: missing variable name" slug: Web/JavaScript/Reference/Errors/No_variable_name translation_of: Web/JavaScript/Reference/Errors/No_variable_name --- @@ -61,11 +61,12 @@ var deux = document.getElementById('deux'), Voici une version corrigée : ```js example-good -var x, y = "toto"; +var x, + y = "toto"; var x = "toto"; -var un = document.getElementById('un'); -var deux = document.getElementById('deux'); +var un = document.getElementById("un"); +var deux = document.getElementById("deux"); ``` ### Tableaux @@ -80,7 +81,7 @@ var arr = 1,2,3,4,5; Voici la forme équivalente correcte : ```js example-good -var arr = [1,2,3,4,5]; +var arr = [1, 2, 3, 4, 5]; ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md index 0a4d61804b7153..c08909e4239cce 100644 --- a/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md +++ b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md @@ -1,5 +1,5 @@ --- -title: 'TypeError: can''t delete non-configurable array element' +title: "TypeError: can't delete non-configurable array element" slug: Web/JavaScript/Reference/Errors/Non_configurable_array_element translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element --- @@ -33,8 +33,8 @@ Par défaut, la méthode {{jsxref("Object.defineProperty()")}} crée des propri ```js example-bad var arr = []; -Object.defineProperty(arr, 0, {value: 0}); -Object.defineProperty(arr, 1, {value: "1"}); +Object.defineProperty(arr, 0, { value: 0 }); +Object.defineProperty(arr, 1, { value: "1" }); arr.length = 1; // TypeError: can't delete non-configurable array element @@ -44,8 +44,8 @@ Si on veut tronquer le tableau, il faut que les éléments excédants soient con ```js example-good var arr = []; -Object.defineProperty(arr, 0, {value: 0, configurable: true}); -Object.defineProperty(arr, 1, {value: "1", configurable: true}); +Object.defineProperty(arr, 0, { value: 0, configurable: true }); +Object.defineProperty(arr, 1, { value: "1", configurable: true }); arr.length = 1; ``` @@ -55,7 +55,7 @@ arr.length = 1; La méthode {{jsxref("Object.seal()")}} permet de marquer l'ensemble des propriétés (ici les éléments du tableau) comme non-configurables : ```js example-bad -var arr = [1,2,3]; +var arr = [1, 2, 3]; Object.seal(arr); arr.length = 1; @@ -65,7 +65,7 @@ arr.length = 1; Pour corriger l'erreur, il faut retirer l'appel à {{jsxref("Object.seal()")}} ou réaliser une copie du tableau. Dans ce dernier cas, on notera que tronquer la copie du tableau ne modifie pas la longueur du tableau original. ```js example-good -var arr = [1,2,3]; +var arr = [1, 2, 3]; Object.seal(arr); // On copie le tableau initial pour tronquer cette copie diff --git a/files/fr/web/javascript/reference/errors/not_a_constructor/index.md b/files/fr/web/javascript/reference/errors/not_a_constructor/index.md index 11409729098009..479902101d905c 100644 --- a/files/fr/web/javascript/reference/errors/not_a_constructor/index.md +++ b/files/fr/web/javascript/reference/errors/not_a_constructor/index.md @@ -48,8 +48,8 @@ new Math(); new Symbol(); // TypeError: Symbol is not a constructor -function* f() {}; -var obj = new f; +function* f() {} +var obj = new f(); // TypeError: f is not a constructor ``` @@ -84,7 +84,9 @@ return new Promise.resolve(true); ```js // Cette formulation fonctionne mais // est inutilement longue -return new Promise((resolve, reject) => { resolve(true); }); +return new Promise((resolve, reject) => { + resolve(true); +}); // On pourra autrement utiliser les // méthodes statiques diff --git a/files/fr/web/javascript/reference/errors/not_a_function/index.md b/files/fr/web/javascript/reference/errors/not_a_function/index.md index e26e763d876c18..94034cd8aa148d 100644 --- a/files/fr/web/javascript/reference/errors/not_a_function/index.md +++ b/files/fr/web/javascript/reference/errors/not_a_function/index.md @@ -57,7 +57,7 @@ Certaines méthodes ne fonctionnent que pour certains types d'objet et utilisent ```js example-bad var obj = { a: 13, b: 37, c: 42 }; -obj.map(function(num) { +obj.map(function (num) { return num * 2; }); @@ -69,7 +69,7 @@ Il faudra utiliser un tableau à la place : ```js example-good var nombres = [1, 4, 9]; -nombres.map(function(num) { +nombres.map(function (num) { return num * 2; }); @@ -82,17 +82,16 @@ Lorsqu'on écrit une classe, on peut malheureusement utiliser le même nom pour ```js example-bad var Chien = function () { - this.age = 11; - this.couleur = "noir"; - this.nom = "Ralph"; - return this; -} - -Chien.prototype.nom = function(nom) { - this.nom = nom; - return this; -} + this.age = 11; + this.couleur = "noir"; + this.nom = "Ralph"; + return this; +}; +Chien.prototype.nom = function (nom) { + this.nom = nom; + return this; +}; var monNouveauChien = new Chien(); monNouveauChien.nom("Cassidy"); // Uncaught TypeError: monNouveauChien.nom is not a function @@ -102,17 +101,16 @@ Pour résoudre le problème, on utilisera deux noms distincts pour la propriét ```js example-good var Chien = function () { - this.age = 11; - this.couleur = "noir"; - this.nomChien = "Ralph"; - return this; -} - -Chien.prototype.nom = function(nom) { - this.nomChien = nom; - return this; -} + this.age = 11; + this.couleur = "noir"; + this.nomChien = "Ralph"; + return this; +}; +Chien.prototype.nom = function (nom) { + this.nomChien = nom; + return this; +}; var monNouveauChien = new Chien(); monNouveauChien.nom("Cassidy"); // Chien { age: 11, couleur: "noir", nomChien: "Cassidy" } @@ -124,7 +122,7 @@ En notation mathématique, on peut écrire 2(3+5) pour indiquer qu'on souhaite m ```js example-bad var seize = 2(3 + 5); -console.log('2 x (3 + 5) vaut ' + String(seize)); +console.log("2 x (3 + 5) vaut " + String(seize)); // Uncaught TypeError: 2 is not a function ``` @@ -132,7 +130,7 @@ Pour corriger, il suffit d'ajouter l'opérateur `*` : ```js example-good var seize = 2 * (3 + 5); -console.log('2 x (3 + 5) is ' + String(seize)); +console.log("2 x (3 + 5) is " + String(seize)); //2 x (3 + 5) is 16 ``` @@ -141,8 +139,8 @@ console.log('2 x (3 + 5) is ' + String(seize)); Assurez-vous d'importer le module correctement. Si par exemple, on dispose d'une bibliothèque `helpers.js` avec le code suivant : ```js -let helpers = function () { }; -helpers.log = function(msg) { +let helpers = function () {}; +helpers.log = function (msg) { console.log(msg); }; @@ -152,7 +150,7 @@ export default helpers; Pour l'importer côté application, on écrira : ```js -import helpers from './helpers' +import helpers from "./helpers"; ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/not_a_valid_code_point/index.md b/files/fr/web/javascript/reference/errors/not_a_valid_code_point/index.md index cf968a052a8278..2684574af6b1aa 100644 --- a/files/fr/web/javascript/reference/errors/not_a_valid_code_point/index.md +++ b/files/fr/web/javascript/reference/errors/not_a_valid_code_point/index.md @@ -31,23 +31,23 @@ Les valeurs {{jsxref("NaN")}}, les entiers négatifs (`-1`), les flottants (`3.1 ### Exemples invalides ```js example-bad -String.fromCodePoint('_'); // RangeError +String.fromCodePoint("_"); // RangeError String.fromCodePoint(Infinity); // RangeError -String.fromCodePoint(-1); // RangeError -String.fromCodePoint(3.14); // RangeError -String.fromCodePoint(3e-2); // RangeError -String.fromCodePoint(NaN); // RangeError +String.fromCodePoint(-1); // RangeError +String.fromCodePoint(3.14); // RangeError +String.fromCodePoint(3e-2); // RangeError +String.fromCodePoint(NaN); // RangeError ``` ### Exemples valides ```js example-good -String.fromCodePoint(42); // "*" -String.fromCodePoint(65, 90); // "AZ" -String.fromCodePoint(0x404); // "\u0404" -String.fromCodePoint(0x2F804); // "\uD87E\uDC04" -String.fromCodePoint(194564); // "\uD87E\uDC04" -String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07" +String.fromCodePoint(42); // "*" +String.fromCodePoint(65, 90); // "AZ" +String.fromCodePoint(0x404); // "\u0404" +String.fromCodePoint(0x2f804); // "\uD87E\uDC04" +String.fromCodePoint(194564); // "\uD87E\uDC04" +String.fromCodePoint(0x1d306, 0x61, 0x1d307); // "\uD834\uDF06a\uD834\uDF07" ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/not_defined/index.md b/files/fr/web/javascript/reference/errors/not_defined/index.md index 6f0a25893360f7..1f643cb860099a 100644 --- a/files/fr/web/javascript/reference/errors/not_defined/index.md +++ b/files/fr/web/javascript/reference/errors/not_defined/index.md @@ -42,9 +42,9 @@ toto.substring(1); // "ruc" Une variable doit être disponible dans le contexte d'exécution où elle est utilisée. Les variables définies au sein d'une fonction ne peuvent pas être utilisées en dehors de cette fonction car la variable appartient à la _portée_ de la fonction. ```js example-bad -function numbers () { +function numbers() { var num1 = 2, - num2 = 3; + num2 = 3; return num1 + num2; } @@ -55,9 +55,9 @@ Toutefois, une fonction peut accéder aux variables et aux fonctions définies d ```js example-good var num1 = 2, - num2 = 3; + num2 = 3; -function numbers () { +function numbers() { return num1 + num2; } diff --git a/files/fr/web/javascript/reference/errors/precision_range/index.md b/files/fr/web/javascript/reference/errors/precision_range/index.md index 2aba628111889d..6c1c0d088eebb7 100644 --- a/files/fr/web/javascript/reference/errors/precision_range/index.md +++ b/files/fr/web/javascript/reference/errors/precision_range/index.md @@ -1,5 +1,5 @@ --- -title: 'RangeError: precision is out of range' +title: "RangeError: precision is out of range" slug: Web/JavaScript/Reference/Errors/Precision_range translation_of: Web/JavaScript/Reference/Errors/Precision_range --- @@ -31,39 +31,39 @@ Un argument dont la précision est en dehors de l'intervalle valide, prévu par Généralement, ces méthodes acceptent des arguments de précision compris entre 0 et 20 (voire 21). Cependant, la spécification ECMAScript permet de gérer des valeurs en dehors de cet intervalle. -| Méthode | Firefox (SpiderMonkey) | Chrome, Opera (V8) | -| ------------------------------------------------------------ | ---------------------- | ------------------ | +| Méthode | Firefox (SpiderMonkey) | Chrome, Opera (V8) | +| ---------------------------------------------- | ---------------------- | ------------------ | | {{jsxref("Number.prototype.toExponential()")}} | 0 to 100 | 0 to 20 | -| {{jsxref("Number.prototype.toFixed()")}} | -20 to 100 | 0 to 20 | -| {{jsxref("Number.prototype.toPrecision()")}} | 1 to 100 | 1 to 21 | +| {{jsxref("Number.prototype.toFixed()")}} | -20 to 100 | 0 to 20 | +| {{jsxref("Number.prototype.toPrecision()")}} | 1 to 100 | 1 to 21 | ## Exemples ### Exemples invalides ```js example-bad -77.1234.toExponential(-1); // RangeError -77.1234.toExponential(101); // RangeError +(77.1234).toExponential(-1); // RangeError +(77.1234).toExponential(101); // RangeError -2.34.toFixed(-100); // RangeError -2.34.toFixed(1001); // RangeError +(2.34).toFixed(-100); // RangeError +(2.34).toFixed(1001); // RangeError -1234.5.toPrecision(-1); // RangeError -1234.5.toPrecision(101); // RangeError +(1234.5).toPrecision(-1); // RangeError +(1234.5).toPrecision(101); // RangeError ``` ### Exemples valides ```js example-good -77.1234.toExponential(4); // 7.7123e+1 -77.1234.toExponential(2); // 7.71e+1 +(77.1234).toExponential(4); // 7.7123e+1 +(77.1234).toExponential(2); // 7.71e+1 -2.34.toFixed(1); // 2.3 -2.35.toFixed(1); // 2.4 (note that it rounds up in this case) +(2.34).toFixed(1); // 2.3 +(2.35).toFixed(1); // 2.4 (note that it rounds up in this case) -5.123456.toPrecision(5); // 5.1235 -5.123456.toPrecision(2); // 5.1 -5.123456.toPrecision(1); // 5 +(5.123456).toPrecision(5); // 5.1235 +(5.123456).toPrecision(2); // 5.1 +(5.123456).toPrecision(1); // 5 ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/property_access_denied/index.md b/files/fr/web/javascript/reference/errors/property_access_denied/index.md index a8134bbbc71fa4..6dc859fb644494 100644 --- a/files/fr/web/javascript/reference/errors/property_access_denied/index.md +++ b/files/fr/web/javascript/reference/errors/property_access_denied/index.md @@ -23,15 +23,17 @@ Il y a eu une tentative d'accès non-autorisée à un objet sur lequel vous n'av ## Exemples ```html - + - + diff --git a/files/fr/web/javascript/reference/errors/read-only/index.md b/files/fr/web/javascript/reference/errors/read-only/index.md index feafe9dbc36fe3..29f50f9c03f568 100644 --- a/files/fr/web/javascript/reference/errors/read-only/index.md +++ b/files/fr/web/javascript/reference/errors/read-only/index.md @@ -34,23 +34,23 @@ Les propriétés en lecture seule ne sont pas fréquemment utilisées mais on pe ```js example-bad "use strict"; -var obj = Object.freeze({name: "Elsa", score: 157}); -obj.score = 0; // TypeError +var obj = Object.freeze({ name: "Elsa", score: 157 }); +obj.score = 0; // TypeError -"use strict"; -Object.defineProperty(this, "NB_POUMONS", {value: 2, writable: false}); -NB_POUMONS = 3; // TypeError +("use strict"); +Object.defineProperty(this, "NB_POUMONS", { value: 2, writable: false }); +NB_POUMONS = 3; // TypeError -"use strict"; +("use strict"); var frozenArray = Object.freeze([0, 1, 2]); -frozenArray[0]++; // TypeError +frozenArray[0]++; // TypeError ``` Quelques propriétés natives JavaScript sont également en lecture seule. Par exemple, on obtient cette erreur lorsqu'on souhaite redéfinir une constante mathématique. ```js example-bad "use strict"; -Math.PI = 4; // TypeError +Math.PI = 4; // TypeError ``` La variable globale `undefined` est également en lecture seule. On ne peut donc pas faire disparaître la fameuse erreur "_undefined is not a function_" avec ce code : @@ -65,13 +65,13 @@ undefined = function () {}; ```js example-good "use strict"; -var obj = Object.freeze({name: "Score", points: 157}); -obj = {name: obj.name, points: 0}; +var obj = Object.freeze({ name: "Score", points: 157 }); +obj = { name: obj.name, points: 0 }; // En changeant d'objet, ça fonctionne -"use strict"; -var NB_POUMONS = 2; // `var` fonctionne -NB_POUMONS = 3; // ok +("use strict"); +var NB_POUMONS = 2; // `var` fonctionne +NB_POUMONS = 3; // ok ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md index 6c3f221ff8f039..831ea8483c9d6f 100644 --- a/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md +++ b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md @@ -1,5 +1,5 @@ --- -title: 'TypeError: Reduce of empty array with no initial value' +title: "TypeError: Reduce of empty array with no initial value" slug: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value --- @@ -33,15 +33,19 @@ Ce problème se produit lorsqu'on combine une méthode de filtrage ({{jsxref("Ar ```js example-bad var ints = [0, -1, -2, -3, -4, -5]; -ints.filter(x => x > 0) // cet appel retire tous les éléments - .reduce((x, y) => x + y) // aucun ne peut alors être utilisé comme valeur initiale +ints + .filter((x) => x > 0) // cet appel retire tous les éléments + .reduce((x, y) => x + y); // aucun ne peut alors être utilisé comme valeur initiale ``` Cela peut également se produire si on utilise un sélecteur avec une coquille ou que la liste contient un nombre d'élément inattendu: ```js example-bad var names = document.getElementsByClassName("names"); -var name_list = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); +var name_list = Array.prototype.reduce.call( + names, + (acc, name) => acc + ", " + name, +); ``` ### Exemples valides @@ -52,8 +56,9 @@ On peut fournir une valeur initiale qui soit l'élément neutre de la réduction ```js example-good var ints = [0, -1, -2, -3, -4, -5]; -ints.filter(x => x > 0) // removes all elements - .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition +ints + .filter((x) => x > 0) // removes all elements + .reduce((x, y) => x + y, 0); // the initial value is the neutral element of the addition ``` On peut également gérer le cas où le tableau est vide, avant d'appeler `reduce` ou dans le _callback_ après avoir ajouté une valeur initiale. @@ -63,14 +68,22 @@ var names = document.getElementsByClassName("names"); var nameList1 = ""; if (names1.length >= 1) - nameList1 = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); + nameList1 = Array.prototype.reduce.call( + names, + (acc, name) => acc + ", " + name, + ); // nameList1 == "" lorsque names est vide -var nameList2 = Array.prototype.reduce.call(names, (acc, name) => { - if (acc == "") // la valeur initiale - return name; - return acc + ", " + name; -}, ""); +var nameList2 = Array.prototype.reduce.call( + names, + (acc, name) => { + if (acc == "") + // la valeur initiale + return name; + return acc + ", " + name; + }, + "", +); // nameList2 == "" lorsque names est vide ``` diff --git a/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.md b/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.md index 74aa7541d7f388..3c05b125b9b7f2 100644 --- a/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.md +++ b/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.md @@ -1,5 +1,5 @@ --- -title: 'RangeError: repeat count must be less than infinity' +title: "RangeError: repeat count must be less than infinity" slug: Web/JavaScript/Reference/Errors/Resulting_string_too_large translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large --- @@ -29,17 +29,17 @@ La chaîne de caractères crée par cette méthode ne doit pas dépasser la tail ### Exemples invalides ```js example-bad -'abc'.repeat(Infinity); // RangeError -'a'.repeat(2**28); // RangeError +"abc".repeat(Infinity); // RangeError +"a".repeat(2 ** 28); // RangeError ``` ### Exemples valides ```js example-good -'abc'.repeat(0); // '' -'abc'.repeat(1); // 'abc' -'abc'.repeat(2); // 'abcabc' -'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) +"abc".repeat(0); // '' +"abc".repeat(1); // 'abc' +"abc".repeat(2); // 'abcabc' +"abc".repeat(3.5); // 'abcabcabc' (count will be converted to integer) ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/stmt_after_return/index.md b/files/fr/web/javascript/reference/errors/stmt_after_return/index.md index 4deafa13b6ca36..28a1d11340c1cc 100644 --- a/files/fr/web/javascript/reference/errors/stmt_after_return/index.md +++ b/files/fr/web/javascript/reference/errors/stmt_after_return/index.md @@ -1,5 +1,5 @@ --- -title: 'Warning: unreachable code after return statement' +title: "Warning: unreachable code after return statement" slug: Web/JavaScript/Reference/Errors/Stmt_after_return translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return --- @@ -42,13 +42,13 @@ Les avertissements ne seront pas affichés pour les `return` sans point-virgule function f() { var x = 3; x += 4; - return x; // return permet de finir la fonction sur le champ - x -= 3; // Cette ligne ne sera jamais lue donc exécutée + return x; // return permet de finir la fonction sur le champ + x -= 3; // Cette ligne ne sera jamais lue donc exécutée } function f() { - return // Cette instruction est traitée `return;` - 3 + 4; // La fonction termine et cette ligne n'est jamais traitée + return; // Cette instruction est traitée `return;` + 3 + 4; // La fonction termine et cette ligne n'est jamais traitée } ``` @@ -59,13 +59,13 @@ function f() { var x = 3; x += 4; x -= 3; - return x; // OK : return est après - // toutes les autres instructions + return x; // OK : return est après + // toutes les autres instructions } function f() { - return 3 + 4 // OK : un return sans point-virgule - // avec une expression sur la même ligne + return 3 + 4; // OK : un return sans point-virgule + // avec une expression sur la même ligne } ``` diff --git a/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.md b/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.md index 901f43ead02a07..fd1f1b845b800a 100644 --- a/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.md +++ b/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.md @@ -73,7 +73,7 @@ var somme = function somme([a, b]) { On peut convertir le fragment de code précédent avec l'expression suivante : ```js example-good -var somme = (function() { +var somme = (function () { "use strict"; return function somme([a, b]) { return a + b; diff --git a/files/fr/web/javascript/reference/errors/too_much_recursion/index.md b/files/fr/web/javascript/reference/errors/too_much_recursion/index.md index 7a30970f7a7452..c864c85a98716f 100644 --- a/files/fr/web/javascript/reference/errors/too_much_recursion/index.md +++ b/files/fr/web/javascript/reference/errors/too_much_recursion/index.md @@ -1,5 +1,5 @@ --- -title: 'InternalError: too much recursion' +title: "InternalError: too much recursion" slug: Web/JavaScript/Reference/Errors/Too_much_recursion translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion --- @@ -30,8 +30,10 @@ Cette fonction récursive est exécutée 10 fois comme l'indique la condition de ```js function loop(x) { - if (x >= 10) // "x >= 10" is the exit condition + if (x >= 10) { + // "x >= 10" is the exit condition return; + } // do stuff loop(x + 1); // the recursive call } @@ -42,8 +44,9 @@ Si la condition d'arrêt est beaucoup trop grande, cela ne fonctionnera pas : ```js example-bad function loop(x) { - if (x >= 1000000000000) + if (x >= 1000000000000) { return; + } // do stuff loop(x + 1); }