InMy.Live

Introduction

Ainsi, il y a quelques années, j’enseignais le développement Web dans un bootcamp de codage local, et un étudiant m’a posé cette question :

Quelle est la différence entre une “instruction” et une “expression” en JavaScript ?

J’avais l’impression de connaître la réponse à cette question, mais quand j’ai essayé de l’expliquer, je ne pouvais pas la mettre en mots. J’ai eu un sentiment à ce sujet, mais mes connaissances réelles étaient étonnamment floues.

Il n’y a rien de plus humiliant que d’enseigner 😅. Les étudiants ont le don d’identifier les “points flous” dans notre compréhension.

Depuis, je me suis rendu compte que cette question est suprêmement important. C’est un pilier en béton porteur qui aidera à supporter une tonne de connaissances JavaScript.

C’est en particulier vrai pour les développeurs React. La plupart de ces règles JSX que vous avez dû mémoriser et que vous oubliez toujours de suivre sont le résultat de cette dualité instruction/expression.

Dans cet article de blog, je vais partager certaines des révélations que j’ai eues sur cette distinction et comment nous pouvons utiliser ces informations dans notre travail quotidien.

À la base, une expression est un morceau de code JavaScript qui produit une valeur.

Par exemple, ce sont toutes des expressions :

• 1 → produit 1

• "hello" → produit "hello"

• 5 * 10 → produit 50

• num > 100 → produit soit true ou false

• isHappy ? "🙂" : "🙁" → produit un emoji

• [1, 2, 3].pop() → produit le nombre 3

Les expressions peuvent contenir des expressions. Par exemple, combien d’expressions comptez-vous dans ce morceau de code JS ? Faites une supposition, puis faites glisser le curseur pour les voir chacun en surbrillance :

Un programme JavaScript est une séquence d’instructions. Chaque instruction est une instruction pour que l’ordinateur fasse quelque chose.

Voici quelques exemples d’instructions en JavaScript :

Voici comment j’aime penser à cela : les instructions sont la structure rigide qui maintient notre programme ensemble, tandis que les expressions remplissent les détails.

Les instructions ont souvent des “emplacements” pour les expressions. Nous pouvons mettre n’importe quelle expression que nous aimons dans ces emplacements.

Par exemple, déclarer une variable a un emplacement d’expression :

On peut utiliser aucune des expressions nous avons vu plus tôt dans cette fente:

En termes de syntaxe valide, les expressions sont interchangeable. Si une instruction a un emplacement d’expression, nous pouvons mettre n’importe quel expression là, et le code s’exécutera. Nous n’obtiendrons pas d’erreur de syntaxe.

Cela dit, nous pouvons encore rencontrer d’autres problèmes. Par exemple, le code suivant est syntaxiquement valide, mais nous planterons l’onglet du navigateur si nous essayons de l’exécuter, car il provoque une boucle infinie :

Vous voulez savoir si un morceau de JS est une expression ou une déclaration ? Essayez de vous déconnecter !

S’il s’exécute, le code est un expression. Si vous obtenez une erreur, c’est un déclaration (ou, éventuellement, JS invalide).

En prime, nous pouvons même voir à quoi correspond l’expression, puisqu’elle sera imprimée dans la console du navigateur !

Cela fonctionne parce que tous les arguments de la fonction doivent être des expressions. Les expressions produisent une valeur, et cette valeur sera transmise à la fonction. Les instructions ne produisent pas de valeur et ne peuvent donc pas être utilisées comme arguments de fonction.

Même en tant que développeur expérimenté, je compte sur un tonne sur console.log. C’est un outil merveilleusement polyvalent !

Voici une expression : 1 + 2 + 3.

Que se passe-t-il si nous créons un fichier JS qui inclut uniquement cette expression ? Imaginons que nous sauvegardions le contenu suivant sous test.js:

Combien de déclarations contient ce fichier ? Zéro ou un ?

Voici le problème : les expressions ne peuvent pas exister par elles-mêmes. Ils sont toujours partie d’un énoncé. Et donc dans ce cas, nous avons une déclaration qui ressemble à ceci :

L’instruction est essentiellement vide à part son emplacement d’expression. Notre expression 1 + 2 + 3 remplit cet emplacement, et notre déclaration est complète.

En d’autres termes, toutes les lignes suivantes sont des instructions valides :

Souvent, les didacticiels déclarent à tort que les expressions sont des déclarations, mais ce n’est pas tout à fait exact. Les expressions et les déclarations sont des choses distinctes. Mais il est possible qu’une instruction enveloppe une expression sans fournir de caractères supplémentaires. Pensez-y comme si vous enveloppiez un sandwich dans une pellicule rétractable transparente.

Les instructions se terminent généralement par un point-virgule, qui marque la fin de l’instruction. Le point-virgule n’est pas nécessaire pour certaines déclarations, comme if déclarations, while boucles et déclarations de fonctions.

Si vous avez déjà travaillé avec React, vous savez probablement que les crochets ondulés ({ et }) nous permettent d’intégrer des morceaux de JavaScript dans notre JSX, comme ceci :

Cela fait partie de ce qui rend React si magique ; nous avons toute la puissance de JavaScript à notre disposition.

Mais il y a un hic – nous ne pouvons pas mettre n’importe quel JavaScript à l’intérieur des accolades. Plus précisément, nous ne pouvons inclure que expressions, pas des déclarations. Les crochets ondulés essentiellement créer un slot d’expression dans notre JSX.

Si nous essayons d’intégrer un déclaration ici, comme une instruction if/else, nous aurons une erreur :

Cela explose parce que les instructions ne produisent pas de valeur, seulement expressions produire une valeur. Si nous voulons intégrer la logique if/else dans notre JSX, nous devons utiliser une expression d’opérateur ternaire :

Cela peut sembler une limitation étrange de JSX/React, mais c’est en fait une limitation JavaScript.

Je pense que nous blâmons souvent React pour des règles apparemment arbitraires, comme la façon dont les composants doivent renvoyer un seul élément de niveau supérieur. Mais le plus souvent, React nous avertit simplement d’un Javascript limitation.

Comprendre la différence entre les déclarations et les expressions est une première étape importante vers la démystification de toute une catégorie d’avertissements et de bogues React. Nous devons également en savoir plus sur la compilation de JSX en JavaScript et sur le fonctionnement du cycle de réconciliation et de rendu de React… mais, hélas, ces sujets dépassent le cadre de cet article de blog !

Incidemment, je suis en train de créer un cours complet sur React, la ressource que j’aurais aimé exister lorsque j’apprenais React. Cela s’appelle The Joy of React, et vous pouvez vous inscrire aux mises à jour dès aujourd’hui !

Un programme JavaScript consiste en une séquence d’instructions. Chaque instruction est une instruction pour faire quelque chose, comme créer une variable, exécuter une condition if/else ou démarrer une boucle.

Les expressions produisent une valeur, et ces valeurs sont insérées dans des instructions, comme une cartouche Super Nintendo qui change ce que fait la Super Nintendo.

Les expressions sont toujours partie d’une instruction, même si cette instruction est par ailleurs vide. Par exemple, le code ci-dessous exécute une boucle sans utilisant un for instruction, mais elle inclut toujours une instruction “empty wrapper”:

Cela peut prendre un certain temps pour que cette distinction devienne intuitive, mais j’espère que ce billet de blog a clarifié certaines choses !