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 à des 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 évaluée comme 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 :
const age = 20;
const ageType = age >= 18 ? "Adult" : "Child";
console.log(ageType); // Output: "Adult" 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 ageTypesinon il attribue la valeur « Enfant ».
2. Libellés des modèles
Les modèles littéraux 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 lorsqu’on travaille avec des chaînes de caractères. Prenons l’exemple suivant, qui illustre l’utilisation des littéraux de modèle :
const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: "Hello, Alice!" 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 ou non défini. Elle renvoie l’opérande de droite si l’opérande de gauche est nul ou non défini.
Prenons l’exemple suivant :
const username = null;
const displayName = username ?? "Guest";
console.log(displayName); // Output: "Guest" Dans cet exemple, puisque la variable nom d’utilisateur est null’opérateur de coalescence nullish attribue la valeur par défaut Invité à la variable nomAffichage.
4. Évaluation des courts-circuits
L’évaluation en circuit court 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 cesse d’évaluer les expressions dès qu’il peut déterminer le résultat.
Considérons l’exemple suivant :
const name = "John";
const greeting = name && `Hello, ${name}`;
console.log(greeting); // Output: "Hello, John" 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 accueil.
5. Affectation de propriétés d’objets en abrégé
Lors de la création d’objets, vous avez la possibilité d’utiliser une notation abrégée qui assigne des 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 :
const firstName = "John";
const lastName = "Doe";
const person = { firstName, lastName };
console.log(person); // Output: { firstName: "John", lastName: "Doe" } Cet exemple attribue 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 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 :
const user = { name: "Alice", address: { city: "New York", country: "USA" }};
const country = user.address?.country;
console.log(country); // Output: "USA" Dans l’exemple ci-dessus, l’opérateur de chaînage optionnel garantit que le code ne lance pas d’erreur si l’opérateur de chaînage optionnel n’est pas utilisé. adresse de la propriété ou de la pays Le bien est manquant.
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 :
const user = { name: "John", age: 30 };
const { name, age } = user;
console.log(name, age); // Output: "John" 30 Cet exemple extrait les variables nom et âge de la utilisateur via la déstructuration de l’objet.
8. Opérateur de diffusion
L’opérateur d’étalement (…) vous permet d’étendre les éléments d’un itérable, comme un tableau ou un objet, en éléments individuels. Cette fonction est utile pour combiner des tableaux ou en créer des copies peu profondes.
Prenons l’exemple suivant :
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers); // Output: [1, 2, 3, 4, 5] Dans l’exemple ci-dessus, l’opérateur d’étalement étend le champ d’application de l’article. nombres en éléments individuels, qui sont ensuite combinés à l’aide de la fonction 4 et 5 pour créer un nouveau tableau, nouveauxNombres.
9. Boucle d’objets en abrégé
Lorsque vous itérez sur des objets, vous pouvez utiliser la fonction pour…en 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 :
const user = { name: "John", age: 30 };
for (const [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`);
}
// Output:
// name: John
// age: 30 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. Raccourci Array.indexOf utilisant l’opérateur Bitwise
Vous pouvez remplacer les appels à l’opérateur Array.indexOf avec une abréviation 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’est pas trouvé.
Considérons l’exemple suivant :
const numbers = [1, 2, 3];
const index = ~numbers.indexOf(2);
console.log(index); // Output: -2 Dans l’exemple ci-dessus, ~numbers.indexOf(2) retours -2 parce que 2 est à l’index 1et l’opérateur bitwise 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 vrai et d’une valeur fictive à faux.
Prenons l’exemple suivant :
const value1 = "Hello";
const value2 = "";
console.log(!!value1); // Output: true
console.log(!!value2); // Output: false Dans l’exemple ci-dessus, !valeur1 retours vrai car la chaîne Bonjour est vrai, alors que !value2 retours faux parce que 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.
