11 abréviations JavaScript et TypeScript incontournables pour un codage efficace

JavaScript et TypeScript sont des langages de programmation très populaires dans le domaine du développement web. Ils disposent tous deux de fonctionnalités étendues et de nombreux raccourcis syntaxiques qui contribuent de manière significative à l’amélioration de l’efficacité du codage.

Apprenez à resserrer votre code et à tirer le meilleur parti de ces langages grâce à quelques raccourcis utiles.

1. Opérateur ternaire

L’opérateur ternaire offre une syntaxe concise et efficace pour exprimer des instructions conditionnelles. Il se compose de trois parties : une condition, une expression à exécuter si la condition est vraie et une expression à exécuter si elle est fausse.

Cet opérateur s’avère particulièrement utile pour prendre des décisions basées sur des conditions et attribuer différentes valeurs en conséquence.

Prenons l’exemple suivant :

Cet exemple utilise l’opérateur ternaire pour vérifier si la variable âge est supérieure ou égale à 18. Si c’est le cas, le code attribue la valeur Adulte à la variable ageType sinon il attribue la valeur « Enfant ».

2. Libellés des modèles

Les littéraux de modèle offrent un moyen puissant et efficace de formater les chaînes JavaScript et d’y incorporer des variables ou des expressions. Contrairement à la concaténation traditionnelle de chaînes de caractères utilisant des guillemets simples ou doubles, les littéraux de gabarit utilisent des backticks (`).

Cette syntaxe unique offre plusieurs avantages lors de l’utilisation de chaînes de caractères. Prenons l’exemple suivant, qui illustre l’utilisation des littéraux de gabarit :

L’exemple inclut la chaîne de caractères nom dans le modèle littéral en utilisant $. Cela vous permet de construire facilement des chaînes dynamiques.

3. Opérateur de coalescence nul

L’opérateur de coalescence nulle (??) fournit un moyen pratique d’attribuer des valeurs par défaut lorsqu’une variable est soit nulle soit non défini. Il renvoie l’opérande de droite si l’opérande de gauche est nul ou non défini.

Considérons l’exemple suivant :

Dans cet exemple, puisque la variable nom d’utilisateur est nul l’opérateur de coalescence null attribue la valeur par défaut Invité à la variable displayName.

4. Évaluation des courts-circuits

L’évaluation en circuit court vous permet d’écrire des expressions conditionnelles concises à l’aide d’opérateurs logiques tels que && et ||. Elle tire parti du fait qu’un opérateur logique arrête l’évaluation des expressions dès qu’il peut déterminer le résultat.

Considérons l’exemple suivant :

Cet exemple n’évaluera que l’expression `Bonjour, $nom` si la variable nom a une valeur vraie. Sinon, il court-circuite et attribue la valeur de nom à la variable salutation.

5. Affectation d’une propriété d’objet en abrégé

Lors de la création d’objets, vous avez la possibilité d’utiliser une notation abrégée qui affecte les variables en tant que propriétés portant le même nom.

Cette notation abrégée élimine la nécessité d’indiquer de manière redondante le nom de la propriété et le nom de la variable, ce qui permet d’obtenir un code plus propre et plus concis.

Prenons l’exemple suivant :

Cet exemple attribue les propriétés prénom et nom de famille en utilisant la notation abrégée.

6. Chaînage facultatif

Enchaînement facultatif (?.) vous permet d’accéder aux propriétés imbriquées d’un objet sans vous soucier des valeurs intermédiaires nulles ou indéfinies. Si une propriété de la chaîne est nulle ou indéfinie, l’expression est court-circuitée et renvoie une valeur indéfinie.

Considérons l’exemple suivant :

Dans l’exemple ci-dessus, l’opérateur de chaînage optionnel garantit que le code ne génère pas d’erreur si la propriété adresse ou la propriété pays est manquante.

7. Déstructuration des objets

La déstructuration d’objets est une fonctionnalité puissante de JavaScript et TypeScript qui permet d’extraire des propriétés d’objets et de les affecter à des variables à l’aide d’une syntaxe concise.

Cette approche simplifie le processus d’accès et de manipulation des propriétés des objets. Examinons de plus près le fonctionnement de la déstructuration d’objets à l’aide d’un exemple :

Cet exemple extrait les variables nom et âge à partir de l’âge l’utilisateur via la déstructuration de l’objet.

8. Opérateur d’étalement

L’opérateur d’étalement (.) permet d’étendre les éléments d’un itérable, comme un tableau ou un objet, en éléments individuels. Il est utile pour combiner des tableaux ou en créer des copies peu profondes.

Prenons l’exemple suivant :

Dans l’exemple ci-dessus, l’opérateur d’expansion développe le tableau nombres en éléments individuels, qui sont ensuite combinés avec l’opérateur 4 et 5 pour créer un nouveau tableau, newNumbers.

9. Boucle d’objets en abrégé

Lors de l’itération sur des objets, vous pouvez utiliser la fonction for.in en combinaison avec la déstructuration des objets pour itérer de manière pratique sur les propriétés des objets.

Prenons l’exemple suivant :

Dans l’exemple ci-dessus, Object.entries(user) renvoie un tableau de paires clé-valeur, que chaque itération déstructure ensuite en variables clé et valeur.

10. Sténographie de Array.indexOf utilisant l’opérateur Bitwise

Vous pouvez remplacer les appels à l’opérateur Array.indexOf par un raccourci utilisant l’opérateur bitwise ~ pour vérifier si un élément existe dans un tableau. L’abréviation renvoie l’index de l’élément s’il est trouvé ou -1 s’il n’existe pas.

Prenons l’exemple suivant :

Dans l’exemple ci-dessus, ~nombre.indexOf(2) renvoie -2 car 2 est à l’index 1 et l’opérateur binaire annule l’indice.

11. Transformer des valeurs en valeurs booléennes avec ! !

Pour convertir explicitement une valeur en booléen, vous pouvez utiliser l’opérateur de double négation (!!). Il convertit effectivement une valeur vraie en vraie et une valeur erronée en faux.

Considérons l’exemple suivant :

Dans l’exemple ci-dessus, !valeur1 renvoie vrai car la chaîne Bonjour est vraie, alors que !valeur2 renvoie faux car la chaîne vide est fausse.

Débloquer l’efficacité et la lisibilité du code

En utilisant ces raccourcis en JavaScript et TypeScript, vous pouvez améliorer l’efficacité de votre codage et produire un code plus concis et plus lisible. Qu’il s’agisse d’utiliser l’opérateur ternaire, de court-circuiter l’évaluation ou de tirer parti de la puissance des littéraux de modèle, ces raccourcis fournissent des outils précieux pour un codage efficace.

En outre, le raccourci d’affectation de propriété d’objet, le chaînage optionnel et la déstructuration d’objet simplifient le travail avec les objets, tandis que l’opérateur d’étalement et les raccourcis de tableau permettent une manipulation efficace des tableaux. La maîtrise de ces raccourcis fera de vous un développeur JavaScript et TypeScript plus productif et plus efficace.