10 Beispiele für sauberen JavaScript-Code

Bei JavaScript Clean Code handelt es sich um eine Reihe von Prinzipien und Praktiken, die zum Schreiben von lesbarem, wartbarem und effizientem JavaScript-Code verwendet werden können. Es ist wichtig, sauberen Code zu schreiben, da dies anderen Entwicklern das Verständnis und die Änderung Ihres Codes erleichtert und außerdem dazu beitragen kann, die Leistung Ihrer Anwendungen zu verbessern.

In diesem Tutorial lernen wir 10 Beispiele für sauberen JavaScript-Code kennen, die Ihnen helfen, besser lesbaren, wartbaren und effizienteren Code zu schreiben. Dieses Tutorial behandelt eine Vielzahl von Themen, darunter Funktionen, Variablen, Objekte und Schleifen.

1. Bedingtes Zuweisen eines Werts zu derselben Sache mithilfe ternärer Operatoren.

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

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

2. Bedingtes Zuweisen desselben Werts zu einer bestimmten Objekteigenschaft.

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

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

3. Exportieren mehrerer Variablen

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

✔️ 
export const foo, bar, kip;

4. Deklarieren und Zuweisen von Variablen aus Objekteigenschaften.

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

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

5. Deklarieren und Zuweisen von Variablen aus Array-Indizes.

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

✔️
let [a, b] = foo;

6. Mehrere Elemente aus dem DOM abrufen.

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. Verwenden Sie logische Operatoren für einfache Bedingungen.

if (foo) {
  doSomething();
}

✔️
foo && doSomething();

8. Parameter bedingt übergeben.

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

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

9. Umgang mit vielen Nullen.

const SALARY = 150000000,
TAX = 15000000;

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

10. Das Gleiche mehreren Variablen zuweisen.

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

✔️
a = b = c = d;

Viel Spaß beim Codieren!!!