{"id":232239,"date":"2023-01-12T11:42:00","date_gmt":"2023-01-12T08:42:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232239"},"modified":"2022-11-10T08:15:12","modified_gmt":"2022-11-10T05:15:12","slug":"5-fonctionnalites-javascript-de-pointe-pour-ameliorer-votre-code","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/5-fonctionnalites-javascript-de-pointe-pour-ameliorer-votre-code\/","title":{"rendered":"5 fonctionnalit\u00e9s JavaScript de pointe pour am\u00e9liorer votre code"},"content":{"rendered":"\n

Les fonctionnalit\u00e9s JavaScript ne cessent de cro\u00eetre et d’en recevoir de nouvelles comme les op\u00e9rateurs, les constructions de syntaxe, les expressions. Beaucoup ont \u00e9t\u00e9 introduits ces derni\u00e8res ann\u00e9es et certains d’entre eux sont d\u00e9j\u00e0 une seconde nature, comme l’expression de la fl\u00e8che grasse ou l’ op\u00e9rateur de =><\/code>propagation d’objet ....<\/code><\/p>\n

Les fonctionnalit\u00e9s JavaScript commencent en tant que propositions<\/h2>\n

Toutes ces fonctionnalit\u00e9s JavaScript commencent par des propositions soumises au TC 39. Le Comit\u00e9 Technique 39<\/a> est en charge de standardiser :<\/p>\n

\n

le langage de programmation \u00e0 usage g\u00e9n\u00e9ral, multiplateforme et ind\u00e9pendant du fournisseur ECMAScript (JavaScript). Cela inclut la syntaxe du langage, la s\u00e9mantique, les biblioth\u00e8ques et les technologies compl\u00e9mentaires qui prennent en charge le langage.<\/p>\n<\/blockquote>\n

Il existe de nombreuses propositions JavaScript que nous pouvons commencer \u00e0 ajouter \u00e0 notre flux d\u00e8s aujourd’hui, gr\u00e2ce \u00e0 Babel, le compilateur JavaScript<\/a>. Certains d’entre eux offrent plus de clart\u00e9, comme le s\u00e9parateur num\u00e9rique. D’autres, comme les do<\/code>expressions, introduisent la possibilit\u00e9 d’avoir des conditions complexes m\u00e9lang\u00e9es avec des balises React JSX.<\/p>\n

Examinons dans cet article 5 fonctionnalit\u00e9s JavaScript qui sont encore au stade de la proposition mais que nous pouvons utiliser avec Babel, et qui am\u00e9lioreront consid\u00e9rablement votre exp\u00e9rience de codage.<\/p>\n

Chacun a un lien vers sa page Babel o\u00f9 vous pouvez voir comment configurer Babel pour l’utiliser, bien que les fonctionnalit\u00e9s JavaScript propos\u00e9es d\u00e9crites ici soient d\u00e9j\u00e0 incluses avec Babel 7. Chaque section a \u00e9galement un lien vers sa proposition dans l’ organisation Ecma TC39<\/a> sur GitHub<\/a>.<\/p>\n

Op\u00e9rateur de coalescence nulle<\/h2>\n

\"5<\/a><\/p>\n

Proposition: https:\/\/github.com\/tc39\/proposal-nullish-coalescing<\/a><\/p>\n

Babel\u00a0: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-nullish-coalescing-operator.html<\/a><\/p>\n

Cette proposition JavaScript d\u00e9crit un op\u00e9rateur qui permet de fournir une valeur de repli \u00e0 droite de l’op\u00e9rateur lorsqu’une variable ou une propri\u00e9t\u00e9 d’objet est ind\u00e9finie. S’il n’est pas ind\u00e9fini, il utilisera le c\u00f4t\u00e9 gauche de l’op\u00e9rateur\u00a0:<\/p>\n

const maybeUndef = undefined;\nconst val = maybeUndef ?? 2021; <\/code><\/pre>\n
Cela revient \u00e0 l’\u00e9crire sous la forme d’un op\u00e9rateur ternaire\u00a0:<\/p>\n
const maybeUndef = undefined;\nconst val = maybeUndef? maybeUndef: 2021; <\/code><\/pre>\n
Notez que cet op\u00e9rateur ne v\u00e9rifie pas que la variable n’existe pas. Cela lancera une erreur\u00a0:<\/p>\n
const val = maybeUndef ?? 2021;  <\/code><\/pre>\n
Mais attention, cet op\u00e9rateur n’est pas 100% comme un op\u00e9rateur ternaire qui renvoie le premier c\u00f4t\u00e9 si la condition \u00e9valu\u00e9e est vraie. Il n’\u00e9valuera pas les valeurs qui sont g\u00e9n\u00e9ralement fausses en JavaScript<\/a> en false<\/code>. Par exemple, une cha\u00eene vide ne sera pas consid\u00e9r\u00e9e false<\/code>:<\/p>\n
const someEmptyString = '';\nconst val = someEmptyString ?? 'fallback'; <\/code><\/pre>\n
Contrairement \u00e0 cet op\u00e9rateur de coalescence nul, un op\u00e9rateur ternaire aurait \u00e9t\u00e9 lanc\u00e9 fallback<\/code>\u00e0 la suite de cette \u00e9valuation.<\/p>\n
Op\u00e9rateur de cha\u00eenage en option<\/h2>\n
\"5<\/a><\/p>\n
Proposition: https:\/\/github.com\/tc39\/proposal-optional-chaining<\/a><\/p>\n
Babel\u00a0: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-optional-chaining.html<\/a><\/p>\n
Cet op\u00e9rateur fonctionne \u00e9galement sur les variables et les propri\u00e9t\u00e9s des objets: il v\u00e9rifie si les propri\u00e9t\u00e9s imbriqu\u00e9es que nous parcourons existent ou non. Sans cet op\u00e9rateur, nous devons v\u00e9rifier chaque propri\u00e9t\u00e9 imbriqu\u00e9e\u00a0:<\/p>\n
const val = anObj && anObj.aProp && anObj.aProp.aNestedProp<\/code><\/pre>\n
Avec le nouvel op\u00e9rateur de cha\u00eenage optionnel, nous pouvons faire quelque chose comme :<\/p>\n
const val = anObj.aProp?.aNestedProp<\/code><\/pre>\n
Cela semble beaucoup plus clair et c’est plus court \u00e0 \u00e9crire. Cet op\u00e9rateur fonctionne \u00e9galement avec des tableaux num\u00e9riques, il est donc pr\u00e9f\u00e9rable de travailler avec des collections\u00a0:<\/p>\n
const val = anObj.anArray[0]?.someProp<\/code><\/pre>\n
Et nous pouvons empiler plusieurs op\u00e9rateurs\u00a0:<\/p>\n
const val = anObj.anArray[0]?.someProp?.aNestedProp<\/code><\/pre>\n
Et si nous combinions cela avec le pr\u00e9c\u00e9dent, la coalescence nulle\u00a0? Nous obtenons une syntaxe qui v\u00e9rifie que chaque propri\u00e9t\u00e9 travers\u00e9e existe et, si ce n’est pas le cas, fournit une valeur de secours\u00a0:<\/p>\n
const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'<\/code><\/pre>\n
Si l’une des valeurs n’existe pas, elle renverra someDefaultValue<\/code>. La combinaison de ces deux op\u00e9rateurs est un excellent moyen de remplacer la fonction get<\/a> de lodash .<\/p>\n
Op\u00e9rateur de pipeline<\/h2>\n
\"5<\/a><\/p>\n
Proposition: https:\/\/github.com\/tc39\/proposal-pipeline-operator<\/a><\/p>\n
Babel\u00a0: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-pipeline-op<\/a> e<\/a> rator<\/a><\/p>\n
Cet op\u00e9rateur fait partie de plusieurs fonctionnalit\u00e9s JavaScript exp\u00e9rimentales, et celle-ci offre plus de lisibilit\u00e9 lors de l’encha\u00eenement de plusieurs fonctions. Consid\u00e9rez la fonction suivante :<\/p>\n
const reverseWords = \n      str => str\n        .split( ' ') .reduce( (revStr, word) => [ word, ...revStr ], []) .join( ' ' );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
Si nous devons r\u00e9utiliser ces transformations partielles encha\u00een\u00e9es, nous pouvons les d\u00e9composer en diff\u00e9rentes fonctions, puis composer le r\u00e9sultat en les utilisant\u00a0:<\/p>\n
const splitBySpace = str => str.split( ' ' );\nconst reverseArray = arr => arr.reduce( (acc, cur) => [ cur, ...acc ], [] );\nconst joinWithSpace = arr => arr.join( ' ' );\n\nconst reverseWords =\n    str => joinWithSpace(\n        reverseArray(\n            splitBySpace(\n                str)) );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
Ce qui est \u00e9trange \u00e0 ce sujet, c’est que nous devons commencer \u00e0 lire cela du bas, la splitBySpace<\/code>ligne, vers le haut, afin de comprendre les transformations appliqu\u00e9es \u00e0 la cha\u00eene. Cela va \u00e0 l’encontre de notre flux de lecture naturel, de haut en bas. Nous nous retrouvons \u00e9galement avec toutes ces vilaines parenth\u00e8ses pendantes. Cela pourrait \u00eatre \u00e9crit en une seule ligne et ce n’est pas beaucoup plus joli:<\/p>\n
const reverseWords = str => joinWithSpace( reverseArray( splitBySpace( str)) );<\/code><\/pre>\n
Ici, nous devons commencer \u00e0 lire de la fonction centrale vers les fonctions externes, ou de droite \u00e0 gauche, ce qui est contre-intuitif pour la lecture occidentale de gauche \u00e0 droite.<\/p>\n
L’op\u00e9rateur de pipeline peut rendre ces constructions beaucoup plus lisibles et similaires au cha\u00eenage que nous avions \u00e0 l’origine avant de d\u00e9placer les transformations vers des fonctions distinctes\u00a0:<\/p>\n
const reverseWords =\n    str => str\n        |> splitBySpace\n        |> reverseArray\n        |> joinWithSpace;<\/code><\/pre>\n
Maintenant, les transformations appliqu\u00e9es sont \u00e9crites de la m\u00eame mani\u00e8re que notre fa\u00e7on d’\u00e9crire, de haut en bas, elles sont plus claires \u00e0 lire et nous n’avons plus de parenth\u00e8ses qui tra\u00eenent. Succ\u00e8s!<\/p>\n
S\u00e9parateur num\u00e9rique<\/h2>\n
\"5<\/a><\/p>\n
Proposition: https:\/\/github.com\/tc39\/proposal-numeric-separator<\/a><\/p>\n
Babel\u00a0: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-numeric-separator.html<\/a><\/p>\n
Ce s\u00e9parateur num\u00e9rique est diff\u00e9rent des autres fonctionnalit\u00e9s JavaScript puisqu’il ne s’agit pas d’un op\u00e9rateur. C’est une construction syntaxique qui rend les litt\u00e9raux num\u00e9riques plus lisibles en cr\u00e9ant une s\u00e9paration visuelle entre les groupes de chiffres. Les grands litt\u00e9raux num\u00e9riques sont difficiles \u00e0 analyser et \u00e0 comprendre rapidement, en particulier lorsqu’un chiffre est r\u00e9p\u00e9t\u00e9 plusieurs fois. Par exemple:<\/p>\n
const longNum = 1000000000000;<\/code><\/pre>\n
C’est difficile \u00e0 comprendre d’un simple coup d’\u0153il. Ce s\u00e9parateur le rend plus lisible :<\/p>\n
const longNum = 1_000_000_000_000;<\/code><\/pre>\n
Maintenant, nous pouvons rapidement comprendre qu’il s’agit d’un billion.<\/p>\n
Faire des expressions<\/h2>\n
\"5<\/a><\/p>\n
Proposition: https:\/\/github.com\/tc39\/proposal-do-expressions<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-do-expressions<\/a><\/p>\n
La derni\u00e8re des nouvelles fonctionnalit\u00e9s JavaScript que nous allons aborder est une expression qui peut \u00eatre \u00e9valu\u00e9e. Le r\u00e9sultat de cette expression vient apr\u00e8s l’ex\u00e9cution d’un bloc qui peut contenir plusieurs instructions. Nous pouvons facilement comprendre les expressions do si nous traduisons une expression d’op\u00e9rateur ternaire comme celle-ci\u00a0:<\/p>\n
const res = isCold( color )? 'light-blue': 'orange';<\/code><\/pre>\n
On \u00e9crirait l’ do{}<\/code>expression \u00e9quivalente comme ceci :<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else {\n        'orange';\n    }\n};<\/code><\/pre>\n
Notez que nous n’avons pas \u00e0 renvoyer la valeur car il ne s’agit pas d’une fonction. Alors que dans ce cas particulier, cela peut \u00eatre \u00e9crit plus succinctement en ternaire, les expressions do sont beaucoup plus puissantes, permettant plusieurs d\u00e9clarations, par exemple\u00a0:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else if (isHot( color)) {\n        'orange';\n    } else if (isRain( color)) {\n        'purple';\n    } else {\n        'green';\n    }\n};<\/code><\/pre>\n
L\u00e0 o\u00f9 cela est vraiment puissant, c’est dans JSX, o\u00f9 nous pouvons le m\u00e9langer avec ses balises sans avoir \u00e0 calculer le r\u00e9sultat en externe au pr\u00e9alable. Par exemple, nous pourrions faire ce qui suit si nous utilisions React<\/a> pour rendre ces composants\u00a0:<\/p>\n
const MyComp = ({ color }) => ({\n            do {\n                if (isCold( color)) {\n                    ;\n                } else if (isHot( color)) {\n                    ;\n                } else if (isRain( color)) {\n                    ;\n                } else {\n                    ;\n                }\n            }\n        }\n\n);<\/code><\/pre>\n
Plus de propositions JavaScript<\/h2>\n
De plus en plus de propositions sont discut\u00e9es chaque jour pour ajouter des fonctionnalit\u00e9s plus int\u00e9ressantes au langage JavaScript. Une liste sans cesse croissante de ces fonctionnalit\u00e9s JavaScript propos\u00e9es peut \u00eatre lue sur https:\/\/github.com\/tc39\/proposals#ecmascript-proposals<\/a>. Les propositions ici sont presque termin\u00e9es et donc sur le point d’\u00eatre ajout\u00e9es \u00e0 la norme ECMAScript, comme expliqu\u00e9 dans ce tableau qui d\u00e9crit le processus d’acceptation<\/a>.<\/p>\n
Certaines des nouvelles fonctionnalit\u00e9s JavaScript que nous avons explor\u00e9es dans cet article, comme les expressions do ou l’op\u00e9rateur de pipeline sont des propositions de l’\u00e9tape 1<\/a>, ce qui signifie qu’elles ont encore du chemin \u00e0 parcourir avant de faire partie de la norme ECMAScript.<\/p>\n
Source d’enregistrement:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
D\u00e9couvrez 5 nouvelles fonctionnalit\u00e9s, op\u00e9rateurs et expressions JavaScript qui am\u00e9lioreront votre code, le rendant plus lisible et efficace.<\/p>\n","protected":false},"author":1,"featured_media":157555,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,717,728,748,841],"tags":[1167],"class_list":["post-232239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-javascript-3","category-open-source-projektmanagement-2","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=232239"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232239\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/157555"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=232239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=232239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=232239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}