Points-virgules en JavaScript

Les points-virgules JavaScript sont facultatifs. Personnellement, j'aime éviter d'utiliser des points-virgules dans mon code, mais beaucoup de gens les préfèrent.

Les points-virgules en JavaScript divisent la communauté. Certains préfèrent les utiliser toujours, quoi qu'il arrive. D'autres aiment les éviter.

Après avoir utilisé des points-virgules pendant des années, à l'automne 2017, j'ai décidé d'essayer de les éviter au besoin, et j'ai configuré Prettier pour supprimer automatiquement les points-virgules de mon code, à moins qu'une construction de code particulière ne les nécessite.

Maintenant, je trouve naturel d'éviter les points-virgules, je pense que le code est meilleur et qu'il est plus propre à lire.

Tout cela est possible car JavaScript ne nécessite pas strictement de points-virgules. Quand il y a un endroit où un point-virgule était nécessaire, il l'ajoute dans les coulisses.

Le processus qui fait cela s'appelleInsertion automatique de points-virgules.

Il est important de connaître les règles qui mettent des points-virgules, pour éviter d'écrire du code qui générera des bogues car ne se comporte pas comme prévu.

Les règles de l'insertion automatique de points-virgules JavaScript

L'analyseur JavaScript ajoutera automatiquement un point-virgule lorsque, lors de l'analyse du code source, il trouve ces situations particulières:

  1. lorsque la ligne suivante commence par du code qui rompt la ligne actuelle (le code peut apparaître sur plusieurs lignes)
  2. lorsque la ligne suivante commence par un}, fermant le bloc courant
  3. lorsque la fin du fichier de code source est atteinte
  4. quand il y a unreturndéclaration sur sa propre ligne
  5. quand il y a unbreakdéclaration sur sa propre ligne
  6. quand il y a unthrowdéclaration sur sa propre ligne
  7. quand il y a uncontinuedéclaration sur sa propre ligne

Exemples de code qui ne fait pas ce que vous pensez

Sur la base de ces règles, voici quelques exemples.

Prends ça:

const hey = 'hey'
const you = 'hey'
const heyYou = hey + ' ' + you

[‘h’, ‘e’, ‘y’].forEach((letter) => console.log(letter))

Vous obtiendrez l'erreurUncaught TypeError: Cannot read property 'forEach' of undefinedparce que basé sur la règle1JavaScript essaie d'interpréter le code comme

const hey = 'hey';
const you = 'hey';
const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

Un tel morceau de code:

(1 + 2).toString()

impressions"3".

const a = 1
const b = 2
const c = a + b
(a + b).toString()

soulève plutôt unTypeError: b is not a functionexception, car JavaScript essaie de l'interpréter comme

const a = 1
const b = 2
const c = a + b(a + b).toString()

Un autre exemple basé sur la règle 4:

(() => {
  return
  {
    color: 'white'
  }
})()

Vous vous attendez à ce que la valeur de retour de cette fonction immédiatement appelée soit un objet contenant lecolorpropriété, mais ce n'est pas le cas. Au lieu de cela, c'estundefined, car JavaScript insère un point-virgule aprèsreturn.

Au lieu de cela, vous devez mettre le support d'ouverture juste aprèsreturn:

(() => {
  return {
    color: 'white'
  }
})()

Vous penseriez que ce code affiche «0» dans une alerte:

1 + 1
-1 + 1 === 0 ? alert(0) : alert(2)

mais il montre 2 à la place, car JavaScript par règle 1 l'interprète comme:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

Conclusion

Fais attention. Certaines personnes sont très avisées sur les points-virgules. Je m'en fiche honnêtement, l'outil nous donne la possibilité de ne pas l'utiliser, donc nous pouvons éviter les points-virgules.

Je ne suggère rien d'autre que de choisir votre propre décision.

Nous devons juste prêter un peu d'attention, même si la plupart du temps, ces scénarios de base n'apparaissent jamais dans votre code.

Choisissez quelques règles:

  • attention àreturndéclarations. Si vous retournez quelque chose, ajoutez-le sur la même ligne que le retour (idem pourbreak,throw,continue)
  • ne commencez jamais une ligne par des parenthèses, celles-ci peuvent être concaténées avec la ligne précédente pour former un appel de fonction ou une référence d'élément de tableau

Et finalement, testez toujours votre code pour vous assurer qu'il fait ce que vous voulez

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: