Meilleures pratiques pour l'utilisation de la syntaxe JavaScript moderne –

Le JavaScript moderne évolue rapidement pour répondre aux besoins changeants des nouveaux cadres et environnements. Comprendre comment profiter de ces changements peut vous faire gagner du temps, améliorer vos compétences et marquer la différence entre un bon code et un bon code.

Savoir ce que le JavaScript moderne essaie de faire peut vous aider à décider quand utiliser la nouvelle syntaxe à votre meilleur avantage, et quand il est toujours logique d'utiliser des techniques traditionnelles.

Quelque chose de solide à s'accrocher à

Je ne connais personne qui ne soit pas confus à l'état de JavaScript ces jours-ci, que vous soyez nouveau pour JavaScript, ou vous avez codé avec lui pendant un moment. Tant de nouveaux cadres, tant de changements dans la langue, et tant de contextes à considérer. C'est une merveille que tout le monde fasse son travail, avec toutes les nouvelles choses que nous devons apprendre chaque mois.

Je crois que le secret du succès avec n'importe quel langage de programmation, aussi complexe que soit l'application, revient à Les bases. Si vous voulez comprendre Rails, commencez par travailler sur vos compétences Ruby, et si vous voulez utiliser immutables et flux de données unidirectionnel dans isomorphic Réagir avec webpack (ou tout ce que font les nerds cool de nos jours) commencez par connaître votre core JavaScript.

Comprendre le fonctionnement de la langue est beaucoup plus pratique que de se familiariser avec les derniers frameworks et environnements. Ceux-ci changent plus vite que le temps. Et avec JavaScript, nous avons une longue histoire d'informations réfléchies en ligne sur la façon dont JavaScript a été créé et comment l'utiliser efficacement.

Le problème est que certaines des nouvelles techniques qui sont apparues avec les dernières versions de JavaScript font partie de les anciennes règles obsolètes. Mais pas tous! Parfois, une nouvelle syntaxe peut remplacer un clunkier pour accomplir la même tâche. D'autres fois, la nouvelle approche peut sembler être un remplacement plus simple de la façon dont nous faisions les choses, mais il y a des différences subtiles, et il est important d'être conscient de ce que sont ces

Une cuillerée de sucre syntaxique [19659004] Beaucoup de changements dans JavaScript ces dernières années ont été décrits comme du sucre syntaxique pour la syntaxe existante. Dans de nombreux cas, le sucre syntaxique peut aider le programmeur Java à apprendre à travailler avec JavaScript, ou pour le reste d'entre nous, nous voulons simplement un moyen plus simple et plus propre d'accomplir quelque chose que nous savions déjà faire. D'autres changements semblent introduire de nouvelles capacités magiques.

Mais si vous essayez d'utiliser une syntaxe moderne pour recréer une vieille technique familière ou la coller sans comprendre comment elle se comporte réellement, vous courez le risque de:

• devoir déboguer code qui a fonctionné parfaitement avant
• en introduisant des erreurs subtiles qui peuvent vous intercepter à l'exécution
• en créant un code qui échoue silencieusement lorsque vous y attendez le moins.

En fait, plusieurs changements qui semblent être des remplacements Les techniques existantes se comportent en réalité différemment du code qu'elles sont censées remplacer. Dans de nombreux cas, il peut être plus judicieux d'utiliser le style d'origine, plus ancien, pour accomplir ce que vous essayez de faire. Reconnaître quand cela arrive, et savoir faire le choix, est essentiel pour écrire du JavaScript moderne efficace.

Lorsque votre const n'est pas cohérent

JavaScript moderne introduit deux nouveaux mots-clés, let et const qui remplacent effectivement le besoin de var lors de la déclaration des variables dans la plupart des cas. Mais ils ne se comportent pas exactement de la même manière que var

En JavaScript traditionnel, c'était toujours une pratique de codage propre de déclarer vos variables avec le mot-clé var avant d'utiliser leur. Ne pas le faire signifiait que les variables déclarées pouvaient être accédées dans la portée globale par n'importe quel script exécuté dans le même contexte. Et comme le JavaScript traditionnel était fréquemment exécuté sur des pages Web où plusieurs scripts pouvaient être chargés simultanément, cela signifiait qu'il était possible que les variables déclarées dans un script fuient dans un autre.

Le remplacement le plus propre pour var ] en JavaScript moderne est let . Mais let a quelques idiosyncrasies qui le distinguent de var . Les déclarations de variables avec var ont toujours été hissées au début de leur portée par défaut, quel que soit l'endroit où elles ont été placées à l'intérieur de cette portée. Cela signifiait que même une variable profondément imbriquée pouvait être considérée comme déclarée et disponible dès le début de sa portée contenant. Il n'en est pas de même pour let ou const .

 console.log (usingVar); // indéfini
var usingVar = "défini";
console.log (usingVar); // "défini"

console.log (usingLet); // Erreur
laissez useLet = "defined"; // n'est jamais exécuté
console.log (usingLet); // n'est jamais exécuté

Lorsque vous déclarez une variable en utilisant let ou const la portée de cette variable est limitée au bloc local où elle est déclarée. Un bloc en JavaScript est distingué par un ensemble d'accolades {} tel que le corps d'une fonction ou le code exécutable dans une boucle.

Ceci est une grande commodité pour les utilisations en bloc de des variables telles que les itérateurs et les boucles. Auparavant, les variables déclarées à l'intérieur des boucles étaient disponibles pour la portée contenant, ce qui entraînait une confusion potentielle lorsque plusieurs compteurs pouvaient utiliser le même nom de variable. Cependant let peut vous surprendre si vous attendez que votre variable déclarée quelque part dans un bloc de votre script soit disponible ailleurs.

 for (var count = 0; count <5; count ++) {
  console.log (compte);
} // affiche les numéros 0 - 4 sur la console
console.log (compte); // 5


pour (let otherCount = 0; otherCount <5; otherCount ++) {
  console.log (otherCount);
} // affiche les numéros 0 - 4 sur la console
console.log (otherCount); // erreur, otherCount n'est pas défini

L'autre déclaration alternative est const qui est censée représenter une constante. Mais ce n'est pas complètement constant

Un const ne peut pas être déclaré sans valeur, contrairement à une variable var ou let . ; // valide
laisse y; //valide
const z; // Erreur

Un const lancera aussi une erreur si vous essayez de lui attribuer une nouvelle valeur après sa déclaration:

 const z = 3; // valide
z = 4; // Erreur

Mais si vous attendez que votre const soit immuable dans tous les cas, vous risquez d'être surpris lorsqu'un objet ou un tableau déclaré comme const vous permette de modifier son contenu

 const z = []; // valide
z.push (1); // valide, et z est maintenant [1]
z = [2] // erreur

Pour cette raison, je reste sceptique quand on recommande d'utiliser const à la place de var pour toutes les déclarations de variables, même si vous avez l'intention de ne jamais les modifier après '

Bien qu'il soit recommandé de traiter vos variables comme étant immuables, JavaScript n'appliquera pas cela pour le contenu d'une variable de référence comme les tableaux et les objets déclarés avec const sans l'aide de sources externes. scripts. Ainsi, le mot-clé const peut faire en sorte que les lecteurs occasionnels et les novices de JavaScript s'attendent à plus de protection qu'il n'en fournit réellement.

J'utilise const pour des variables de nombre ou de chaîne simples. pour initialiser et ne jamais modifier, ou pour les fonctions nommées et les classes que je m'attends à définir une fois et ensuite laisser fermé pour modification. Sinon, j'utilise let pour la plupart des déclarations de variables – en particulier celles que je veux être délimitées par la portée dans laquelle elles ont été définies. Je n'ai pas trouvé la nécessité d'utiliser var récemment, mais si je voulais qu'une déclaration brise la portée et soit hissée au début de mon script, c'est comme ça que je le ferais.

Limiter la portée de la fonction

Les fonctions traditionnelles, définies à l'aide du mot-clé peuvent être appelées pour exécuter une série d'instructions définies dans un bloc sur les paramètres passés, et éventuellement retourner une valeur:

 function doSomething (param) {
  return (`Did it: $ {param}`);
}
console.log (doSomething ("Bonjour")); // "L'ai-je fait: Bonjour"

Ils peuvent également être utilisés avec le nouveau mot clé pour construire des objets avec héritage prototypique, et cette définition peut être placée n'importe où dans la portée où ils peuvent être appelés:

 function Animal (name) {
  this.name = nom;
}
laissez chat = nouvel animal ("Fluffy");
console.log (`Mon chat s'appelle $ {cat.name} .`); // "Le nom de mon chat est Fluffy."

Les fonctions utilisées de l'une ou l'autre de ces façons peuvent être définies avant ou après leur appel. Cela n'a pas d'importance pour JavaScript.

 console.log (doSomething ("Hello")); // "L'ai-je fait: Bonjour"

laissez chat = nouvel animal ("Fluffy");
console.log (`Mon chat s'appelle $ {cat.name} .`); // "Le nom de mon chat est Fluffy."

function doSomething (param) {
  return (`Did it: $ {param}`);
}
Fonction Animal (nom) {
  this.name = nom;
}

Une fonction traditionnelle crée aussi son propre contexte, définissant une valeur pour celle qui n'existe que dans le cadre du corps de la déclaration. Toutes les instructions ou sous-fonctions qui y sont définies sont en cours d'exécution et nous permettent éventuellement de lier une valeur pour ce lors de l'appel de la fonction.

C'est beaucoup pour le mot-clé à faire, et c'est généralement plus de un programmeur a besoin d'un endroit. Le JavaScript moderne divise donc le comportement de la fonction traditionnelle en fonctions et classes de flèches

Atteindre la classe à l'heure

Une partie de la fonction traditionnelle a été reprise par la classe mot-clé. Cela permet aux programmeurs de choisir s'ils préfèrent suivre un paradigme de programmation plus fonctionnel avec des fonctions de flèche appelables, ou d'utiliser une approche plus orientée objet avec des classes à substituer à l'héritage prototypique des fonctions traditionnelles.

un peu comme des classes simples dans d'autres langages orientés objet, et peut être un tremplin facile pour les développeurs Java et C ++ cherchant à développer en JavaScript au fur et à mesure que JavaScript se développe sur le serveur

La programmation orientée en JavaScript est que les classes en JavaScript requièrent une déclaration en avant, comme elles le font en C ++ (mais pas en Java). Autrement dit, une classe doit être déclarée dans le script avant d'être instanciée avec un nouveau mot clé . L'héritage prototypique utilisant le mot-clé fonctionne en JavaScript même s'il est défini plus tard dans le script, puisqu'une déclaration fonction est automatiquement hissée en haut, contrairement à une classe .

 // Utilisation d'une fonction pour déclarer et instancier un objet (hissé)
laissez aProto = nouveau Proto ("Myra");
aProto.greet (); // "Salut Myra"

fonction Proto (nom) {
  this.name = nom;
  this.greet = function () {
    console.log (`Hi $ {this.name}`);
  }
}

// Utilisation d'une classe pour déclarer et instancier un objet (non levé)
classe Classy {
  constructeur (nom) {
    this.name = nom;
  }
  salut () {
    console.log (`Hi $ {this.name}`);
  }
}

aClassy = nouveau Classy ("Sonja");
aClassy.greet (); // "Salut Sonja"

Différences pointées avec les fonctions fléchées

L'autre aspect des fonctions traditionnelles est maintenant accessible en utilisant les fonctions flèches, une nouvelle syntaxe qui permet d'écrire une fonction callable de manière plus concise, pour s'adapter plus facilement à un rappel. En fait, la syntaxe la plus simple pour une fonction fléchée est une ligne unique qui laisse entièrement les accolades et renvoie automatiquement le résultat de l'instruction exécutée:

 const traditional = function (data) {
  return (`$ {data} d'une fonction traditionnelle`);
}
const arrow = data => `$ {data} à partir d'une fonction fléchée`;

console.log (traditionnel ("Hi")); // "Salut d'une fonction traditionnelle"
console.log (flèche ("Hi")); // "Salut d'une fonction de flèche"

Les fonctions de flèche encapsulent plusieurs qualités qui peuvent rendre leur appel plus pratique, et omettent d'autres comportements qui ne sont pas aussi utiles lors de l'appel d'une fonction. Ils ne remplacent pas le mot-clé traditionnel .

Par exemple, une fonction fléchée hérite des arguments et des contextes. dans lequel il s'appelle. C'est très bien pour des situations comme la gestion d'événements ou setTimeout lorsqu'un programmeur veut souvent que le comportement appelé s'applique au contexte dans lequel il est demandé. Les fonctions traditionnelles ont forcé les programmeurs à écrire du code compliqué qui lie une fonction à un existant en utilisant .bind (this) . Rien de cela n'est nécessaire avec les fonctions fléchées.

 class GreeterTraditional {
  constructeur () {
    this.name = "Joe";
  }
  salut () {
    setTimeout (function () {
      console.log (`Hello $ {this.name}`);
    }, 1000); // la fonction interne a son propre ceci sans nom
  }
}
Laisser greeterTraditional = new GreeterTraditional ();
greeterTraditional.greet (); // "Bonjour "

class GreeterBound {
  constructeur () {
    this.name = "Steven";
  }
  salut () {
    setTimeout (function () {
      console.log (`Hello $ {this.name}`);
    } .bind (this), 1000); // passer cela du contexte extérieur
  }
}
laissez greeterBound = new GreeterBound (); // "Bonjour Steven"
greeterBound.greet ();

classe GreeterArrow {
  constructeur () {
    this.name = "Ravi";
  }
  salut () {
    setTimeout (() => {
      console.log (`Hello $ {this.name}`);
    }, 1000); // La fonction flèche hérite de ceci par défaut
  }
}
Laisser greeterArrow = new GreeterArrow ();
greeterArrow.greet (); // "Bonjour Ravi"

Comprenez ce que vous obtenez

Ce n'est pas seulement du sucre syntaxique. Un grand nombre des nouveaux changements dans JavaScript ont été introduits parce que de nouvelles fonctionnalités étaient nécessaires. Mais cela ne signifie pas que les anciennes raisons de la syntaxe traditionnelle de JavaScript ont disparu. Il est souvent judicieux de continuer à utiliser la syntaxe JavaScript traditionnelle, et l'utilisation de la nouvelle syntaxe peut rendre votre code beaucoup plus rapide à écrire et à comprendre.

Consultez les tutoriels en ligne que vous suivez. Si l'auteur utilise var pour initialiser toutes les variables, en ignorant les classes en faveur de l'héritage prototype, ou en s'appuyant sur les instructions dans les callbacks, vous pouvez attendre le reste de la syntaxe être basé sur du JavaScript plus ancien et traditionnel. Et c'est bien. Il y a encore beaucoup de choses que nous pouvons apprendre et appliquer aujourd'hui à partir des méthodes traditionnelles que le JavaScript a toujours été enseigné et utilisé. Mais si vous voyez laissez et const dans les initialisations, les fonctions de flèche dans les rappels et les classes comme base pour les modèles orientés objet, vous verrez probablement aussi d'autres codes JavaScript modernes dans les exemples.

La meilleure pratique en JavaScript moderne est de prêter attention à ce que la langue fait réellement. Selon ce que vous avez l'habitude de faire, ce n'est pas toujours évident. Mais réfléchissez à ce que le code que vous écrivez tente d'accomplir, où vous allez devoir le déployer et qui va le modifier ensuite. Ensuite, décidez vous-même quelle serait la meilleure approche.