Lorsque vous êtes à l'aise avec l'écriture de programmes JavaScript de base, il est temps d'apprendre une syntaxe avancée pour nettoyer votre code et accélérer votre codage.

JavaScript et TypeScript sont des langages de programmation très populaires dans le domaine du développement Web. Ils ont tous deux des ensembles de fonctionnalités étendus et de nombreux raccourcis de syntaxe qui contribuent de manière significative à améliorer l'efficacité du codage.

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

1. Opérateur ternaire

L'opérateur ternaire offre une syntaxe concise et efficace pour exprimer des instructions conditionnelles. Il comporte trois parties: une condition, une expression à exécuter si la condition est évaluée comme vraie et une expression à exécuter si elle est fausse.

Cet opérateur s'avère particulièrement utile lors de la prise de décisions basées sur des conditions et de l'attribution de différentes valeurs en conséquence.

instagram viewer

Considérez l'exemple suivant :

constante âge = 20;
constante ageType = âge >= 18? "Adulte": "Enfant";
console.log (type d'âge); // Sortie: "Adulte"

Cet exemple utilise l'opérateur ternaire pour vérifier si la variable âge est supérieur ou égal à 18. Si c'est le cas, le code attribue la valeur Adulte à la variable Type d'âge, sinon il attribue la valeur "Child".

2. Modèles littéraux

Les modèles littéraux offrent un moyen puissant et efficace de formatage des chaînes JavaScript et en y incorporant des variables ou des expressions. Contrairement à la concaténation de chaînes traditionnelle à l'aide de guillemets simples ou doubles, les littéraux de modèle utilisent des backticks (`).

Cette syntaxe unique offre plusieurs avantages lorsque vous travaillez avec des chaînes. Prenons l'exemple suivant qui illustre l'utilisation des littéraux de modèle :

constante nom = "Alice";
constante salutation = `Bonjour, ${nom}!`;
console.log (salutation); // Sortie: "Bonjour, Alice !"

L'exemple comprend le nom variable dans le modèle littéral utilisant ${}. Cela vous permet de construire facilement des chaînes dynamiques.

3. Opérateur de coalescence nulle

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

Considérez l'exemple suivant :

constante nom d'utilisateur = nul;
constante displayName = nom d'utilisateur? ? "Invité";
console.log (displayName); // Sortie: "Invité"

Dans cet exemple, puisque la variable nom d'utilisateur est nul, l'opérateur de coalescence nul affecte la valeur par défaut Invité à la variable Afficher un nom.

4. Évaluation des courts-circuits

L'évaluation des courts-circuits vous permet d'écrire des expressions conditionnelles concises à l'aide d'opérateurs logiques tels que && et ||. Il tire parti du fait qu'un opérateur logique arrête d'évaluer les expressions dès qu'il peut déterminer le résultat.

Considérez l'exemple suivant :

constante nom = "John";
constante salutation = nom && `Bonjour, ${nom}`;
console.log (salutation); // Sortie: "Bonjour, John"

Cet exemple évaluera uniquement l'expression `Bonjour, ${nom}` si la variable nom a une valeur de vérité. Sinon, il court-circuite et affecte la valeur de nom lui-même à la variable salutation.

5. Raccourci d'affectation de propriété d'objet

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

Cette notation abrégée élimine le besoin d'indiquer de manière redondante à la fois le nom de la propriété et le nom de la variable, ce qui donne un code plus propre et plus concis.

Considérez l'exemple suivant :

constante prenom = "John";
constante nom = "Biche";
constante personne = { firstName, lastName } ;
console.log (personne); // Sortie: { firstName: "John", lastName: "Doe" }

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

6. Chaînage optionnel

Chaînage optionnel (?.) vous permet d'accéder aux propriétés imbriquées d'un objet sans vous soucier des valeurs nulles intermédiaires ou indéfinies. Si une propriété de la chaîne est nulle ou indéfinie, l'expression court-circuite et renvoie undefined.

Considérez l'exemple suivant :

constante utilisateur = { nom: "Alice", adresse: { ville: "New York", pays: "ETATS-UNIS" }};
constante country = user.address?.country ;
console.log (pays); // Sortie: "États-Unis"

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

7. Destructuration d'objet

Déstructuration d'objet est une fonctionnalité puissante de JavaScript et de TypeScript qui vous 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'objet avec un exemple :

constante utilisateur = { nom: "John", âge: 30 };
constante { nom, âge } = utilisateur ;
console.log (nom, âge); // Sortie: "Jean" 30

Cet exemple extrait les variables nom et âge du utilisateur objet via la déstructuration d'objet.

8. Opérateur de propagation

L'opérateur de propagation (...) vous permet de développer 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 superficielles.

Considérez l'exemple suivant :

constante nombres = [1, 2, 3];
constante nouveauxNombres = [...nombres, 4, 5];
console.log (nouveauxNuméros); // Sortie: [1, 2, 3, 4, 5]

Dans l'exemple ci-dessus, l'opérateur de propagation développe la Nombres tableau en éléments individuels, qui sont ensuite combinés avec 4 et 5 pour créer un nouveau tableau, nouveauxNuméros.

9. Raccourci de boucle d'objet

Lors de l'itération sur des objets, vous pouvez utiliser le pour... dans boucle en combinaison avec la déstructuration d'objet pour itérer facilement sur les propriétés de l'objet.

Considérez cet exemple :

constante utilisateur = { nom: "John", âge: 30 };
pour (constante [valeur clé] deObjet.entries (utilisateur)) { 
console.enregistrer(`${clé}: ${valeur}`);
}
// Sortir:
// nom: Jean
// âge: 30 ans

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

10. Array.indexOf Raccourci utilisant l'opérateur au niveau du bit

Vous pouvez remplacer les appels vers le Array.indexOf méthode avec un raccourci utilisant l'opérateur au niveau du bit ~ pour vérifier si un élément existe dans un tableau. Le raccourci renvoie l'index de l'élément s'il est trouvé ou -1 s'il n'est pas trouvé.

Considérez l'exemple suivant :

constante nombres = [1, 2, 3];
constante index = ~nombres.indexOf(2);
console.log (index); // Sortie: -2

Dans l'exemple ci-dessus, ~numbers.indexOf (2) Retour -2 parce que 2 est à l'index 1, et l'opérateur au niveau du bit annule l'index.

11. Conversion de valeurs en booléen avec!!

Pour convertir explicitement une valeur à un booléen, vous pouvez utiliser l'opérateur de double négation (!!). Il convertit efficacement une valeur de vérité en vrai et une fausse valeur à FAUX.

Considérez l'exemple suivant :

constante valeur1 = "Bonjour";
constante valeur2 = "";
console.log(!!valeur1); // Sortie: vrai
console.log(!!valeur2); // Sortie: faux

Dans l'exemple ci-dessus, !!valeur1 Retour vrai parce que la chaîne Bonjour est vrai, tandis que !!valeur2 Retour FAUX car la chaîne vide est fausse.

Libérer l'efficacité et la lisibilité du code

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

De plus, le raccourci d'affectation de propriété d'objet, le chaînage facultatif et la déstructuration d'objet simplifient le travail avec les objets, tandis que l'opérateur de propagation et les raccourcis de tableau permettent un tableau efficace manipulation. La maîtrise de ces raccourcis fera de vous un développeur JavaScript et TypeScript plus productif et efficace.