25+ techniques de codage abrégé en JavaScript –

C'est vraiment une lecture incontournable pour tout développeur JavaScript . J'ai écrit ce guide sur les techniques de codage JavaScript abrégées que j'ai apprises au fil des ans. Pour vous aider à comprendre ce qui se passe, j'ai inclus les versions longues afin de vous donner une perspective de codage.

25 août 2019 : Cet article a été mis à jour pour ajouter de nouveaux conseils de sténographie basés sur les dernières spécifications. Si vous souhaitez en savoir plus sur ES6 et les versions ultérieures, inscrivez-vous sur SitePoint Premium et consultez notre vaste bibliothèque de ressources JavaScript modernes .

1. L'opérateur ternaire

Il s'agit d'un excellent économiseur de code lorsque vous souhaitez écrire une instruction if..else sur une seule ligne.

Longhand:

 const x = 20;
laissez répondre;

si (x> 10) {
    answer = "supérieur à 10";
} autre {
    answer = "moins de 10";
}

Sténographie:

 const answer = x> 10? "plus de 10": "moins de 10";

Vous pouvez également imbriquer votre déclaration si comme ceci:

 const answer = x> 10? "supérieur à 10": x <5? "moins de 5": "entre 5 et 10";

2. Short-circuit Evaluation Shorthand

Lors de l'affectation d'une valeur de variable à une autre variable, vous pouvez vous assurer que la variable source n'est pas nulle, non définie ou vide. Vous pouvez écrire une longue instruction if avec plusieurs conditions ou utiliser une évaluation de court-circuit.

Longhand:

 if (variable1! == null || variable1! == non défini || variable1! == '') {
     laissez variable2 = variable1;
}

Raccourci:

 const variable2 = variable1 || 'Nouveau';

Ne me croyez pas? Testez-le vous-même (collez le code suivant dans es6console ):

 let variable1;
let variable2 = variable1 || 'bar';
console.log (variable2 === 'bar'); // est vrai

variable1 = 'foo';
variable2 = variable1 || 'bar';
console.log (variable2); // affiche foo

Notez que si vous définissez variable1 sur false ou 0 la valeur bar sera affectée.

3 . Déclaration abrégée de variables

Il est judicieux de déclarer vos affectations de variable au début de vos fonctions. Cette méthode abrégée peut vous faire gagner beaucoup de temps et d'espace lorsque vous déclarez plusieurs variables en même temps.

Longhand:

 let x;
laissez y;
soit z = 3;

Sténographie:

 soit x, y, z = 3;

4. If Presence Shorthand

Cela pourrait être trivial, mais mérite une mention. Lorsque vous effectuez « si vérifie», les opérateurs d’assignation peuvent parfois être omis.

Longhand:

 if (commeJavaScript === true)

Raccourci:

 if (commeJavaScript)

Note: ces deux exemples ne sont pas exactement égaux, car la vérification de sténographie passera aussi longtemps que comme JavaScript est une valeur de vérité .

Voici un autre exemple. . Si a n'est PAS égal à true, faites quelque chose.

Longhand:

 let a;
if (a! == true) {
// faire quelque chose...
}

Sténographie:

 let a;
si un ) {
// faire quelque chose...
}

5. JavaScript For Loop Shorthand

Ce petit conseil est très utile si vous souhaitez utiliser du code JavaScript simple et ne voulez pas vous fier à des bibliothèques externes telles que jQuery ou lodash.

Longhand:

 const fruits = ['mango', 'peach', 'banana'];
pour (soit i = 0; i <fruits.length; i ++)

Sténographie:

 pour (laisser le fruit de fruits)

Si vous voulez juste accéder à l'index, faites:

 pour (laissez l'index dans fruits)

Cela fonctionne également si vous souhaitez accéder aux clés d'un objet littéral:

 const obj = {continent: 'Afrique', pays: 'Kenya', ville: 'Nairobi'}
pour (laissez la clé dans obj)
  console.log (clé) // sortie: continent, pays, ville

Raccourci pour Array.forEach:

 function logArrayElements (élément, index, tableau) {
  console.log ("a [" + index + "] =" + element);
}
[2, 5, 9] .forEach (logArrayElements);
// a [0] = 2
// a [1] = 5
// a [2] = 9

6. Évaluation du court-circuit

Au lieu d'écrire six lignes de code pour attribuer une valeur par défaut si le paramètre souhaité est nul ou non défini, nous pouvons simplement utiliser un opérateur logique de court-circuit et effectuer la même chose avec une seule ligne de code.

Longhand:

 let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} autre {
  dbHost = 'localhost';
}

Raccourci:

 const dbHost = process.env.DB_HOST || 'localhost';

7. Decimal Base Exposants

Vous l’avez peut-être déjà vue. C’est essentiellement une manière élégante d’écrire des nombres sans les zéros de fin. Par exemple, 1e7 signifie essentiellement 1 suivi de 7 zéros. Il représente une base décimale (interprétée par JavaScript comme un type flottant) égale à 10 000 000.

Longhand:

 pour (let i = 0; i <10000; i ++) {}

Raccourci:

 pour (soit i = 0; i <1e7; i ++) {}

// Tous les éléments ci-dessous seront considérés comme vrais
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

8. Object Property Shorthand

La définition des littéraux d'objet en JavaScript facilite grandement la vie. ES6 offre un moyen encore plus simple d’affecter des propriétés à des objets. Si le nom de la variable est identique à la clé de l'objet, vous pouvez tirer parti de la notation abrégée.

Longhand:

 const x = 1920, y = 1080;
const obj = {x: x, y: y};

Sténographie:

 const obj = {x, y};

9. Fonctions fléchées Shorthand

Les fonctions classiques sont faciles à lire et à écrire en clair, mais elles ont tendance à devenir un peu verbeuses et déroutantes une fois que vous avez commencé à les imbriquer dans d'autres appels de fonction.

Longhand:

 function sayHello (prénom) {
  console.log ('Bonjour', nom);
}

setTimeout (function () {
  console.log ('Chargé')
}, 2000);

list.forEach (fonction (élément) {
  console.log (item);
});

Raccourci:

 sayHello = name => console.log ('Hello', nom);

setTimeout (() => console.log ('Loaded'), 2000);

list.forEach (item => console.log (item));

Il est important de noter que la valeur de cette à l’intérieur d’une fonction de flèche est déterminée différemment de celle des fonctions d’aiguille longue, de sorte que les deux exemples ne sont pas strictement équivalents. Voir cet article sur la syntaxe de la fonction de flèche pour plus de détails.

10. Raccourci pour retour implicite

Le retour est un mot clé que nous utilisons souvent pour renvoyer le résultat final d'une fonction. Une fonction flèche avec une seule instruction retournera implicitement le résultat à son évaluation (la fonction doit omettre les accolades ( {} pour pouvoir omettre le mot clé return).

Pour retourner une instruction multiligne (comme un objet littéral), il est nécessaire d'utiliser () au lieu de {} pour envelopper votre corps fonctionnel. Cela garantit que le code est évalué comme une seule instruction.

Longhand:

 function calcCircumference (diamètre) {
  retour Math.PI * diamètre
}

Raccourci:

 calcCirconférence = diamètre => (
  Math.PI * diamètre;
)

11. Valeurs de paramètre par défaut

Vous pouvez utiliser l'instruction if pour définir les valeurs par défaut des paramètres de fonction. Dans ES6, vous pouvez définir les valeurs par défaut dans la déclaration de fonction elle-même.

Longhand:

 function volume (l, w, h) {
  if (w === non défini)
    w = 3;
  if (h === non défini)
    h = 4;
  retourne l * w * h;
}

Sténographie:

 volume = (l, w = 3, h = 4) => (l * w * h);

volume (2) // sortie: 24

12. Modèles de littéraux

N'êtes-vous pas fatigué d'utiliser '+' pour concaténer plusieurs variables dans une chaîne? N’y at-il pas un moyen beaucoup plus facile de faire cela? Si vous pouvez utiliser ES6, vous avez de la chance. Tout ce que vous avez à faire, c’est le backtick et $ {} pour joindre vos variables.

Longhand:

 const welcome = 'Vous vous êtes connecté en tant que' + premier + '' + dernier + '.'

const db = 'http: //' + host + ':' + port + '/' + database;

Raccourci:

 const welcome = `Vous vous êtes connecté en tant que $ {first} $ {last}`;

const db = `http: // $ {hôte}: $ {port} / $ {base de données}`;

13. Destructuring Assignment Shorthand

Si vous travaillez avec un framework Web populaire, il y a de fortes chances que vous utilisiez des tableaux ou des données sous la forme de littéraux d'objet pour transmettre des informations entre les composants et les API. Une fois que l'objet de données atteint un composant, vous devez le décompresser.

Longhand:

 const observable = require ('mobx / observable');
const action = require ('mobx / action');
const runInAction = require ('mobx / runInAction');

const store = this.props.store;
forme const = this.props.form;
const loading = this.props.loading;
erreurs constantes = this.props.errors;
entité const = this.props.entity;

Sténographie:

 import {observable, action, runInAction} de 'mobx';

const {magasin, formulaire, chargement, erreurs, entité} = this.props;

Vous pouvez même affecter vos propres noms de variables:

 const {store, formulaire, chargement, erreurs, entité: contact} = this.props;

14. Shorthand String Shorthand

Si vous avez déjà eu besoin d'écrire des chaînes multi-lignes dans le code, procédez comme suit:

Longhand:

 const lorem = 'Lorem ipsum dolor sit amet , consectetur  n  t '
    + 'élite adepte, fait une incident temporel temporaire  n  t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim  n  t '
    + 'veniam, quis nostrud exercitation ullamco laboris  n  t'
    + 'nisi ut aliquip ex ea commodo conséquat. Duis aute  n  t '
    + 'irure dolor in reprehenderit in voluptate velit esse.  n  t'

Mais il existe un moyen plus simple.

Raccourci:

 const lorem = `Lorem ipsum dolor sit amet, consectetur
    élite adipisicing, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo conséquat. Duis aute
    irure dolor in reprrehenderit in voluptate velit esse.`

15. Raccourci opérateur de propagation

L'opérateur de propagation introduit dans l'ES6, présente plusieurs cas d'utilisation qui rendent le code JavaScript plus efficace et plus amusant à utiliser. Il peut être utilisé pour remplacer certaines fonctions du tableau. L'opérateur de propagation est simplement une série de trois points.

Longhand

 // joignant des tableaux.
const impair = [1, 3, 5];
const nums = [2 ,4 , 6] .concat (impair);

// tableaux de clonage
const arr = [1, 2, 3, 4];
const arr2 = arr.slice ()

Sténographie:

 // jonction de tableaux
const impair = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log (nums); // [ 2, 4, 6, 1, 3, 5 ]

// tableaux de clonage
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

Contrairement à la fonction concat () vous pouvez utiliser l'opérateur spread pour insérer un tableau n'importe où dans un autre tableau.

 const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

Vous pouvez également combiner l'opérateur d'étalement avec la notation de déstructuration de l'ES6:

 const {a, b, ... z} = {a: 1, b: 2, c: 3, d: 4};
console.log (a) // 1
console.log (b) // 2
console.log (z) // {c: 3, d: 4}

16. Obligatoire Parameter Shorthand

Par défaut, JavaScript définit les paramètres de fonction sur undefined si aucune valeur n’est transmise. Certaines autres langues émettront un avertissement ou une erreur. Pour appliquer l'assignation de paramètre, vous pouvez utiliser une instruction if pour générer une erreur si undefined ou vous pouvez utiliser l'avantage du raccourci "Paramètre obligatoire".

Longhand:

 ] fonction foo (bar) {
  if (bar === non défini) {
    jeter une nouvelle erreur ('Paramètre manquant!');
  }
  barre de retour;
}

Sténographie:

 obligatoire = () => {
  jeter une nouvelle erreur ('Paramètre manquant!');
}

toto = (barre = obligatoire ()) => {
  barre de retour;
}

17. Array.find Shorthand

Si vous aviez déjà été chargé d'écrire une fonction de recherche en JavaScript simple, vous auriez probablement utilisé une boucle pour . Dans ES6, une nouvelle fonction de tableau nommée find () a été introduite.

Longhand:

 const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]

fonction findDog (name) {
  pour (soit i = 0; i <pets.length; ++ i) {
    if (pets [i] .type === 'Chien' && pets [i] .name === nom) {
      animaux de compagnie retournés [i];
    }
  }
}

Raccourci:

 animal = animaux.find (animal => animal.type === 'Chien' && animal.name === 'Tommy');
console.log (animal domestique); // {type: 'Chien', nom: 'Tommy'}

18. Objet [key] Raccourci

Saviez-vous que Foo.bar peut également s'écrire comme Foo ['bar']? Au début, il ne semble pas y avoir de raison pour que vous écriviez comme ça. Cependant, cette notation vous donne le bloc de construction pour écrire du code réutilisable.

Considérons cet exemple simplifié d'une fonction de validation:

 function validate (values) {
  si (! valeurs.premier)
    retourne faux;
  si (! values.last)
    retourne faux;
  retourne vrai;
}

console.log (validate ({premier: 'Bruce', dernier: 'Wayne'})); // vrai

Cette fonction fait parfaitement son travail. Cependant, considérons un scénario dans lequel vous disposez de très nombreux formulaires dans lesquels vous devez appliquer la validation, mais avec des champs et des règles différents. Ne serait-il pas intéressant de créer une fonction de validation générique pouvant être configurée à l'exécution?

Abrégé:

 // règles de validation d'objet
const schéma = {
  premier: {
    requis: vrai
  },
  dernier: {
    requis: vrai
  }
}

// fonction de validation universelle
const validate = (schéma, valeurs) => {
  pour (champ dans le schéma) {
    if (schéma [field]. requis) {
      si (! valeurs [field]) {
        retourne faux;
      }
    }
  }
  retourne vrai;
}


console.log (validate (schéma, {premier: 'Bruce'})); // faux
console.log (validate (schéma, {premier: 'Bruce', dernier: 'Wayne'})); // vrai

Nous avons maintenant une fonction de validation que nous pouvons réutiliser dans tous les formulaires sans avoir à écrire une fonction de validation personnalisée pour chacune d’elles

. Double bitwise NOT Shorthand

Les opérateurs binaires sont l'une des fonctionnalités que vous apprendrez dans les tutoriels JavaScript pour débutants et que vous ne pourrez jamais les implémenter où que vous soyez. De plus, qui veut travailler avec des uns et des zéros si vous n’utilisez pas de binaire?

Il existe cependant un cas d’utilisation très pratique pour l’opérateur Double Bitwise NOT. Vous pouvez l'utiliser pour remplacer Math.floor () . L’avantage de l’opérateur Double Bitwise NOT est qu’il effectue la même opération beaucoup plus rapidement. Pour en savoir plus sur les opérateurs au niveau des bits cliquez ici .

Longhand:

 Math.floor (4.9) === 4 // true

Shorthand:

 ~~ 4.9 === 4 // true

20. Raccourci de puissance de l'exposant

Raccourci pour une fonction de puissance de l'exposant mathématique:

Longhand:

 Math.pow (2,3); // 8
Math.pow (2,2); // 4
Math.pow (4,3); // 64

Sténographie:

 2 ** 3 // 8
2 ** 4 // 4
4 ** 3 // 64

21. Conversion d'une chaîne en un nombre

Il arrive parfois que votre code reçoive des données au format chaîne mais devant être traitées au format numérique. Ce n’est pas grave, nous pouvons effectuer une conversion rapide.

Longhand:

 const num1 = parseInt ("100");
const num2 = parseFloat ("100.01");

Raccourci:

 const num1 = + "100"; // convertit en type de données int
const num2 = + "100.01"; // convertit en type de données float

22. Assignation de propriété d'objet

Considérons le code suivant:

 let fname = {firstName: 'Black'};
let lname = {lastName: 'Panther'}

Comment les fusionnez-vous en un seul objet? Une solution consiste à écrire une fonction qui copie les données du deuxième objet sur le premier. Malheureusement, il se peut que cela ne soit pas ce que vous souhaitiez – vous devrez peut-être créer un objet entièrement nouveau sans faire de mutation aux objets existants. Le moyen le plus simple consiste à utiliser la fonction Object.assign introduite dans ES6:

 let full_names = Object.assign (fname, lname);

Vous pouvez également utiliser la notation de destruction d'objet introduite dans ES8:

 let full_names = {... fname, ... lname};

Il n'y a pas de limite au nombre de propriétés d'objet que vous pouvez fusionner. Si vous avez des objets avec des noms de propriété identiques, les valeurs seront écrasées dans l'ordre dans lequel elles ont été fusionnées.

Bitwise IndexOf Shorthand

Lors d'une recherche à l'aide d'un tableau, la fonction indexOf () permet de récupérer la position de l'élément que vous recherchez. Si l'élément n'est pas trouvé, la valeur -1 est renvoyée. En JavaScript, 0 est considéré comme de la “fausseté”, tandis que les nombres supérieurs ou inférieurs à 0 sont considérés comme des “vérités”. En conséquence, il faut écrire le code correct comme ceci.

Longhand:

 if (arr.indexOf (item)> -1) {// Confirmer que l'élément a été trouvé.

}

if (arr.indexOf (item) === -1) {// Confirmer que l'item n'est pas trouvé

}

Raccourci:

 if (~ arr.indexOf (item)) {// Confirmer que l'élément a été trouvé.

}

if (! ~ arr.indexOf (item)) {// Confirmer que l'élément n'est pas trouvé

}

L'opérateur au niveau du bit (~) renverra une valeur de vérité pour tout sauf -1 . La nier est aussi simple que de ! ~ . Sinon, nous pouvons également utiliser la fonction includes () :

 if (arr.includes (item)) {// Renvoie true si l'élément existe, false si ce n'est pas le cas

}

24. Object.entries ()

Cette fonctionnalité introduite dans ES8 permet de convertir un objet littéral en un tableau de paires clé / valeur. Voir l'exemple ci-dessous:

 const credits = {producteur: 'John', réalisateur: 'Jane', assistant: 'Peter'};
const arr = Object.entries (crédits);
console.log (arr);

/ ** Sortie:
[ [ 'producer', 'John' ]
  [ 'director', 'Jane' ],
  [ 'assistant', 'Peter' ]
]
** /

25. Object.values ​​()

Il s'agit également d'une nouvelle fonctionnalité introduite dans ES8 qui remplit une fonction similaire à Object.entries () mais sans la partie clé:

 const credits = {producteur: "John", réalisateur: "Jane", assistant: "Peter"};
const arr = Object.values ​​(credits);
console.log (arr);

/ ** Sortie:
[ 'John', 'Jane', 'Peter' ]
** /

26.

Je les aime vraiment et j'aimerais en trouver plus, alors laissez un commentaire si vous en connaissez un!

J'écris du code propre, lisible et modulaire. J'aime apprendre de nouvelles technologies qui améliorent l'efficacité et la productivité de mon flux de travail.

Sam Deering possède plus de 15 ans d'expérience dans la programmation et le développement de sites Web. Il a été consultant pour les sites Web de Console, ABC News, Flight Centre, Sapient Nitro et du gouvernement QLD, et dirige un blog technologique avec plus d'un million de vues par mois. Sam est actuellement le fondateur de Crypto News, Australie.