10 exemples de code propre JavaScript

JavaScript Clean Code est un ensemble de principes et de pratiques qui peuvent être utilisés pour écrire du code JavaScript lisible, maintenable et efficace. Il est important d'écrire du code propre car cela permet aux autres développeurs de comprendre et de modifier plus facilement votre code, et cela peut également aider à améliorer les performances de vos applications.

Dans ce didacticiel, nous allons apprendre 10 exemples de code propre JavaScript qui vous aideront à écrire un code plus lisible, maintenable et efficace. Ce didacticiel couvre une variété de sujets, y compris les fonctions, les variables, les objets et les boucles.

1. Attribution conditionnelle d'une valeur à la même chose à l'aide d'opérateurs ternaires.

a > b ? foo = 'apple' : foo = 'ball'; 

✔️  
foo = a > b ? 'apple' : 'ball';

2. Affectation conditionnelle de la même valeur à une propriété d'objet spécifique.

c > d ? a.foo = 'apple' : a.bar = 'apple';

✔️  
a = { [c > d ? 'foo' : 'bar']: 'apple' };

3. Exportation de plusieurs variables

export const foo;
export const bar;
export const kip;

✔️ 
export const foo, bar, kip;

4. Déclarer et affecter des variables à partir des propriétés de l'objet.

const a = foo.x, b = foo.y;

✔️
const { ['x']: a, ['y']: b } = foo;

5. Déclarer et affecter des variables à partir d'index de tableaux.

let a = foo[0], b = foo[1];

✔️
let [a, b] = foo;

6. Obtenir plusieurs éléments du DOM.

const a = document.getElementById('a'),
b = document.getElementById('b'),
c = document.getElementById('c');
d = document.getElementById('d');

✔️
const elements = {};
['a', 'b', 'c', 'd'].forEach(item => elements = { 
  ...elements, 
  [item]: document.getElementById(item) 
});
const { a, b, c, d } = elements;

/*
For this to work your elements ID's must be 
able to be valid Javascript variable names
and the names of the variables in which you store
your elements have to match with that elements' ID.
This is good for naming consistency & accesibility.
*/

7. Utilisez des opérateurs logiques pour les conditions simples.

if (foo) {
  doSomething();
}

✔️
foo && doSomething();

8. Passer les paramètres conditionnellement.

if(!foo){
  foo = 'apple';
}
bar(foo, kip);

✔️
bar(foo || 'apple', kip);

9. Gérer beaucoup de 0.

const SALARY = 150000000,
TAX = 15000000;

✔️
const SALARY = 15e7,
TAX = 15e6;

10. Affecter la même chose à plusieurs variables.

a = d;
b = d;
c = d;

✔️
a = b = c = d;

Bon codage !!!