TOC

Comprendre la syntaxe et la structure de code en JavaScript

introduction

Avant d’apprendre à écrire dans une langue parlée, vous devez d’abord apprendre les règles de la grammaire. Voici quelques exemples de règles que vous pourriez trouver en anglais:

  • Une phrase commence par une lettre majuscule.

  • Une phrase se termine par un point.

  • Un nouveau paragraphe est en retrait.

  • Le dialogue parlé est placé entre guillemets.

De même, tous les langages de programmation doivent adhérer à des règles spécifiques pour fonctionner. Cet ensemble de règles qui détermine la structure correcte des langages de programmation s’appelle * syntax *. De nombreux langages de programmation se composent en grande partie de concepts similaires avec des variantes de syntaxe.

Dans ce didacticiel, nous allons passer en revue de nombreuses règles et conventions de la syntaxe et de la structure de code JavaScript.

Fonctionnalité et lisibilité

La fonctionnalité et la lisibilité sont deux raisons importantes de privilégier la syntaxe lorsque vous commencez à utiliser JavaScript.

Certaines règles de syntaxe sont obligatoires pour la fonctionnalité JavaScript. S’ils ne sont pas suivis, la console émettra une erreur et le script cessera son exécution.

Considérez une erreur de syntaxe dans le programme “Hello, World!”:

cassé.js

// Example of a broken JavaScript program
console.log("Hello, World!"

La parenthèse fermante manque dans cet exemple de code. Au lieu d’imprimer le message «Hello, World!» Attendu sur la console, le message d’erreur suivant s’affiche:

OutputUncaught SyntaxError: missing ) after argument list

Le +) + manquant doit être ajouté pour que le script continue à s’exécuter. Ceci est un exemple de la façon dont une erreur de syntaxe JavaScript peut casser le script, car une syntaxe correcte doit être suivie pour que le code puisse s’exécuter.

Certains aspects de la syntaxe et du formatage de JavaScript sont basés sur différentes écoles de pensée. En d’autres termes, certaines règles ou choix stylistiques ne sont pas obligatoires et n’entraîneront aucune erreur lors de l’exécution du code. Cependant, il existe de nombreuses conventions communes qu’il est judicieux de suivre, car les développeurs entre les projets et les bases de code seront plus familiarisés avec le style. Le respect des conventions courantes améliore la lisibilité.

Considérez les trois exemples suivants d’affectation de variable.

const greeting="Hello";         // no whitespace between variable & string
const greeting =       "Hello"; // excessive whitespace after assignment
const greeting = "Hello";       // single whitespace between variable & string

Bien que les trois exemples ci-dessus fonctionnent exactement de la même manière dans la sortie, la troisième option de + greeting =" Hello "+ est de loin la méthode la plus utilisée et la plus lisible pour écrire le code, en particulier lorsque vous envisagez dans le cadre d’un programme plus vaste.

Il est important que le style de votre projet de codage reste cohérent. D’une organisation à l’autre, vous rencontrerez différentes règles à suivre. Vous devez donc également faire preuve de souplesse.

Nous allons passer en revue quelques exemples de code ci-dessous afin que vous puissiez vous familiariser avec la syntaxe et la structure du code JavaScript et vous reporter à cet article en cas de doute.

Espace blanc

Les espaces en JavaScript sont des espaces, des tabulations et des nouvelles lignes (en appuyant sur les touches + ENTRÉE + du clavier). Comme démontré précédemment, les espaces blancs excessifs en dehors d’une chaîne et les espaces entre opérateurs et autres symboles sont ignorés par JavaScript. Cela signifie que les trois exemples suivants d’affectation de variable auront exactement la même sortie calculée:

const userLocation      =    "New York City, "     +  "NY";
const userLocation="New York City, "+"NY";
const userLocation = "New York City, " + "NY";

+ userLocation + représentera «New York City, NY», peu importe lequel de ces styles est écrit dans le script, et cela ne fera aucune différence pour JavaScript si les espaces sont écrits avec des tabulations ou des espaces.

Une bonne règle empirique pour pouvoir suivre les conventions les plus courantes en matière d’espaces est de suivre les mêmes règles que celles utilisées dans la grammaire mathématique et linguistique.

Par exemple, + let x = 5 * y + est plus lisible que + let x = 5 * y +.

Vous remarquerez peut-être une exception notable à ce style lors de l’affectation de plusieurs variables. Notez la position de + = + dans l’exemple suivant:

const companyName         = "DigitalOcean";
const companyHeadquarters = "New York City";
const companyHandle       = "digitalocean";

Tous les opérateurs d’assignation (+ = +) sont alignés, avec les espaces après la variable. Ce type de structure d’organisation n’est pas utilisé par toutes les bases de code, mais peut être utilisé pour améliorer la lisibilité.

Les nouvelles lignes excédentaires sont également ignorées par JavaScript. Généralement, une nouvelle ligne supplémentaire sera insérée au-dessus d’un commentaire et après un bloc de code.

Parenthèses

Pour les mots clés tels que + if,` + switch` et + quatre, les espaces sont généralement ajoutés avant et après les parenthèses. Observez les exemples suivants de comparaison et de boucles.

// An example of if statement syntax
if () { }

// Check math equation and print a string to the console
if (4 < 5) {
   console.log("4 is less than 5.");
}

// An example of for loop syntax
for () { }

// Iterate 10 times, printing out each iteration number to the console
for (let i = 0; i <= 10; i++) {
   console.log(i);
}

Comme démontré, l’instruction + if et la boucle` + for` ont des espaces blancs de chaque côté des parenthèses (mais pas à l’intérieur des parenthèses).

Lorsque le code concerne une fonction, une méthode ou une classe, les parenthèses touchent le nom correspondant.

// An example function
function functionName() {}

// Initialize a function to calculate the volume of a cube
function cube(number) {
   return Math.pow(number, 3);
}

// Invoke the function
cube(5);

Dans l’exemple ci-dessus, + cube () + est une fonction et la paire de parenthèses + () + contient les paramètres ou les arguments. Dans ce cas, les paramètres sont respectivement + nombre + ou + 5 +. Bien que + cube () + avec un espace supplémentaire soit valide car le code s’exécutera comme prévu, il ne sera presque jamais vu. Les garder ensemble permet d’associer facilement le nom de la fonction à la paire de parenthèses et à tous les arguments passés associés.

Points-virgules

Les programmes JavaScript consistent en une série d’instructions appelées déclarations, tout comme les paragraphes écrits consistent en une série de phrases. Bien qu’une phrase se termine par un point, une instruction JavaScript se termine souvent par un point-virgule (+; +).

// A single JavaScript statement
const now = new Date();

Si deux ou plusieurs déclarations sont côte à côte, il est obligatoire de les séparer par un point-virgule.

// Get the current timestamp and print it to the console
const now = new Date(); console.log(now);

Si les instructions sont séparées par une nouvelle ligne, le point-virgule est facultatif.

// Two statements separated by newlines
const now = new Date()
console.log(now)

Une convention sûre et courante consiste à séparer les instructions avec un point-virgule indépendamment des nouvelles lignes. Généralement, il est considéré comme une bonne pratique de les inclure afin de réduire la probabilité d’erreurs.

// Two statements separated by newlines and semicolons
const now = new Date();
console.log(now);

Les points-virgules sont également requis entre l’initialisation, la condition et l’incrémentation ou la décrémentation d’une boucle + for.

for (initialization; condition; increment) {
   // run the loop
}

Les points-virgules sont not inclus après toute sorte d’instruction de bloc, tels que + if, + for`, + do`,` + while`, + class +, + switch + et + function i. Ces instructions de bloc sont contenues entre accolades + {} +. Notez les exemples ci-dessous.

// Initialize a function to calculate the area of a square
function square(number) {
   return Math.pow(number, 2);
}

// Calculate the area of a number greater than 0
if (number > 0) {
   square(number);
}

Attention, tout le code entre accolades ne se terminera pas par un point-virgule. Les objets sont placés entre accolades et doivent se terminer par un point-virgule.

// An example object
const objectName = {};

// Initialize triangle object
const triangle = {
   type: "right",
   angle: 90,
   sides: 3,
};

Il est généralement accepté d’inclure des points-virgules après chaque instruction JavaScript, à l’exception des instructions de bloc, qui se terminent par des accolades.

Échancrure

Un programme JavaScript complet peut techniquement être écrit sur une seule ligne. Cependant, cela deviendrait rapidement très difficile à lire et à maintenir. Au lieu de cela, nous utilisons des nouvelles lignes et des indentations.

Voici un exemple d’instruction conditionnelle + if + / + + else + `, écrite sur une seule ligne ou avec des nouvelles lignes et une indentation.

// Conditional statement written on one line
if (x === 1) { /* execute code if true */ } else { /* execute code if false */ }

// Conditional statement with indentation
if (x === 1) {
   // execute code if true
} else {
   // execute code if false
}

Notez que tout code inclus dans un bloc est en retrait. L’indentation peut être faite avec deux espaces, quatre espaces ou en appuyant sur la tabulation. L’utilisation d’onglets ou d’espaces dépend de votre préférence personnelle (pour un projet solo) ou des directives de votre organisation (pour un projet collaboratif).

L’inclusion de l’accolade d’ouverture à la fin de la première ligne, comme dans l’exemple ci-dessus, constitue le moyen classique de structurer les instructions et les objets de bloc JavaScript. Vous pouvez également voir les instructions de bloc écrites avec les accolades sur leurs propres lignes.

// Conditional statement with braces on newlines
if (x === 1)
{
   // execute code if true
}
else
{
   // execute code if false
}

Ce style est beaucoup moins répandu en JavaScript que dans d’autres langues, mais pas du jamais vu.

Toute instruction de bloc imbriquée sera indentée davantage.

// Initialize a function
function isEqualToOne(x) {
   // Check if x is equal to one
   if (x === 1) {
       // on success, return true
       return true;
   } else {
     return false;
   }
}

Il est impératif que votre code soit indenté correctement afin de maintenir la lisibilité et d’atténuer la confusion. Une exception à cette règle à garder à l’esprit est que les caractères inutiles seront supprimés dans les bibliothèques compressées, ce qui réduira la taille des fichiers afin de permettre un chargement plus rapide des pages (comme dans +jquery.min). js + ` et https://d3js.org/ [

Related