NullDev JavaScript StyleGuide auf Deutsch (WIP)

Inhalt

📋 Typen
- 1.1 Primitive Typen
- 1.2 Komplexe Typen
🔗 Referenzen
- 2.1 const bevorzugen
- 2.2 var verbieten
- 2.3 let für require()
- 2.4 Block scope
📦 Objekte
- 3.1 Literals
- 3.2 Computed properties
- 3.3 Objekt Kurzform
- 3.4 Object concise
- 3.5 Grouped shorthand
- 3.6 Quoted properties
- 3.7 Prototype Builtins
- 3.8 Rest spread
📑 Arrays
- 4.1 Literale
- 4.2 Push
- 4.3 Array spreads
- 4.4 spread für iterable
- 4.5 Array-ähnliche Objekte
- 4.6 Mapping
- 4.7 Callback return
- 4.8 Zeilenumbrüche
🔨 Destructuring
- 5.1 Object destructuring
- 5.2 Array destructuring
- 5.3 Object over array
📄 Strings
- 6.1 Quotes
- 6.2 Length
- 6.3 Template literals
- 6.4 Eval
- 6.5 Escaping
📟 Functions
- 7.1 Strict mode
- 7.2 Deklarationen
- 7.3 IIFE's
- 7.4 Nicht-Funktionsblöcke
- 7.5 Blöcke (Info)
- 7.6 Arguments shadow
- 7.7 Rest
- 7.8 Standard-Parameter
- 7.9 Side effects
- 7.10 Standardwerte zuletzt
- 7.11 Funktionskonstruktor
- 7.12 Signature spacing
- 7.13 Mutating parameters
- 7.14 Neuzuweisung von Parametern
- 7.15 Spread
- 7.16 Signaturaufrufseinrückungen
➡️ Arrow Functions
- 8.1 Verwendung
- 8.2 Implizite Rückgaben
- 8.3 Wrap
- 8.4 Weglassen von Klammern
- 8.5 Verwirrende Funktionen
- 8.6 Zeilenumbrüche
📐 Classes & Constructors
- 9.1 class verwenden
- 9.2 Vererbung
- 9.3 Verkettung
- 9.4 toString Methoden
- 9.5 Keine leeren Konstruktoren
- 9.6 Keine redundanten member
📮 Modules
- 10.1 CommonJS
- 10.2 Redundante imports
- 10.3 Veränderbare exports
- 10.4 Imports zuerst
- 10.5 Mehrzeilige imports
🔃 Iterators and Generators
- 11.1 Higher-order functions
- 11.2 Generators
- 11.3 Spacing
📑 Properties
- 12.1 Punkt Notation
- 12.2 Klammer Notation
- 12.3 Exponenzial operator
💾 Variables
- 13.1 Globaler Namespace
- 13.2 Deklaration per Variabel
- 13.3 Gruppierung
- 13.4 Platzierung
- 13.5 Ketten-Zuweisung
- 13.6 Inkrementierung & Dekrementierung
- 13.7 Zeilenumbrüche
- 13.8 Nicht benutzte Variablen
- 13.9 Bitwise floor
⤴️ Hoisting
- 14.1 About
- 14.2 Anonymous function expressions
- 14.3 Named function expressions
- 14.4 Function declarations
↔️ Comparison Operators & Equality
- 15.1 Strict comparison
- 15.2 Conditional statements
- 15.3 Shortcuts
- 15.4 Truth Equality
- 15.5 Switch blocks
- 15.6 Nested ternaries
- 15.7 Unneeded-ternaries
- 15.8 Mixed operators
🔲 Blocks
- 16.1 Braces
- 16.2 Cuddled elses
- 16.3 Returns
🔧 Control Statements
- 17.1 Length
- 17.2 Selection operators
📝 Comments
- 18.1 Multi-line
- 18.2 Single-line
- 18.3 Spaces
- 18.4 Prefixing / Action-items
- 18.5 FixMe
- 18.6 ToDo
⚪ Whitespace
- 19.1 Soft tabs
- 19.2 Before blocks
- 19.3 Around keywords
- 19.4 Infix operators
- 19.5 End of file
- 19.6 Chains
- 19.7 After blocks
- 19.8 Padded blocks
- 19.9 Inside parentheses
- 19.10 Inside brackets
- 19.11 Inside curly braces
- 19.12 Line length
- 19.13 Block spacing
- 19.14 Comma spacing
- 19.15 Computed properties
- 19.17 Key spacing
- 19.18 Trailing spaces
- 19.19 Multiple empty lines
🔻 Commas
- 20.1 Leading commas
- 20.2 Comma Dangling
❗ Semicolons
- 21.1 Use semicolons
🔀 Type Casting & Coercion
- 22.1 Explicit coercion
- 22.2 Strings
- 22.3 Numbers
- 22.4 Deviations
- 22.5 Bitwise
- 22.6 Booleans
📜 Naming Conventions
- 23.1 Beschreibend
- 23.2 camelCase
- 23.3 PascalCase
- 23.4 Unterstriche
- 23.5 this
- 23.6 Dateinamen
- 23.7 Standard export
- 23.8 Singleton
- 23.9 Akronyme und Inizialisierungen
- 23.10 Großbuchstaben
⬇️ Accessors
- 24.1 Not required accessors
- 24.2 Getters & Setters
- 24.3 Boolean prefix
- 24.4 Consistency
🔆 Events
- 25.1 Hash
📖 Standard Library
- 26.1 isNaN
- 26.2 isFinite
🔩 jQuery
- 27.1 Prefix
- 27.2 Cache
- 27.3 DOM Abfragen
- 27.4 Find
- 27.5 Shorthands
🔄 ECMAScript 5 Kompartibilität
- 28.1 Kompartibilitäts Tabelle
6️⃣ ECMAScript 6+ (ES 2015+) Styles
- 29.1 ES6 Styles
- 29.2 Proposals
🔌 Testen
- 30.1 Tests
📈 Performance
- 31.1 Performance
📚 Resourcen
- 32.1 ES6+ lernen
- 32.2 Zum lesen
- 32.3 Tools
- 32.4 Mehr zum lesen
- 32.5 Bücher
- 32.6 Blogs
- 32.7 Podcasts
©️ Copyright
- 33.1 Basis
- 33.2 Lizenz
- 33.3 Englisch
♻️ Änderungen
- 34.1 Forking

Typen

1.1 Primitive Typen: Bei primitiven Datentypen wird immer direkt auf deren Wert zugegriffen.
- string
- number
- boolean
- null
- undefined
- symbol
```
const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9
```
- Symbols können oft nicht richtig polyfilled werden. Deshalb sollte man sie vermeiden, wenn man für Browserumgebungen entwickelt, die diese nicht nativ unterstützen.

1.2 Komplexe Typen: Bei komplexen Datentypen wird immer auf eine Referenz zugegriffen.

object
array
function

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

⬆ zurück zum Anfang

Referenzen

2.1 const für alle Referenzen benutzen; Die Verwendung von var vermeiden. eslint: prefer-const, no-const-assign

Wieso? Es stellt sicher, dass man Referenzen nicht neu zuweisen kann. Das kann sonst zu Fehlern und schwer verständlichem Code führen.
```
// schlecht
var a = 1;
var b = 2;

// gut
const a = 1;
const b = 2;
```

2.2 Wenn man eine Referenz neu zuweisen muss, sollte let an Stelle von var benutzt werden. eslint: no-var

Wieso? let ist block-scoped und nicht function-scoped wie var.
```
// schlecht
var count = 1;
if (true){
    count += 1;
}

// gut
let count = 1;
if (true){
    count += 1;
}
```

2.3 let für require() imports in NodeJS benutzen.

Wieso? Mit const kann man die Import-Variable später nicht neu definieren falls nötig. Außerdemn kann die Variable nicht verwendet werden, ohne sie explizit zu inizialisieren.
```
// schlecht
var x = require("x");
const y = require("y");

// gut
let x = require("x");
let y = require("y");
```

2.4 Beachten, dass let und const block-scoped sind.

// const und let existieren nur in dem Block, in dem sie definiert wurden.
{
    let a = 1;
    const b = 1;
    var c = 1;
}
console.log(a); // ReferenceError: a ist nicht definiert
console.log(b); // ReferenceError: b ist nicht definiert
console.log(c); // 1

⬆ zurück zum Anfang

Objekte

3.1 "literal syntax" für die Erstellung von Objekten benutzen. eslint: no-new-object
```
// schlecht
const item = new Object();

// gut
const item = {};
```

3.2 Automatisch berechnete Eigenschaftsnamen verwenden, wenn Objekte mit dynamischen Eigenschaftennamen erstellt werden.

Wieso? Sie erlauben es, alle Eigenschaften eines Objekts an einer Stelle zu definieren.


function getKey(k){
    return `ein key mit dem Namen ${k}`;
}

// schlecht
const obj = {
    id: 5,
    name: "foo",
};
obj[getKey("enabled")] = true;

// gut
const obj = {
    id: 5,
    name: "foo",
    [getKey("enabled")]: true,
};

3.3 Objekt-Methoden-Shorthands verwenden. eslint: object-shorthand

// schlecht
const foo = {
    value: 1,

    addValue: function (value) {
        return foo.value + value;
    },
};

// gut
const foo = {
    value: 1,

    addValue(value) {
        return foo.value + value;
    },
};

3.4 Eigenschaftsnamen-Shorthands benutzen. eslint: object-shorthand

Wieso? Es ist kürzer und funktionsbeschreibend.

const foo = "bar";

// schlecht
const obj = {
    foo: foo,
};

// gut
const obj = {
    foo,
};

3.5 Shorthand Eigenschaften am Anfang der Objekt Deklaration gruppieren.

Wieso? Man kann einfacher und schneller erkennen, welche Eigenschaften den Shorthand verwenden.

const foo = "bar";
const bar = "foo";

// schlecht
const obj = {
    test: 1,
    key: 2,
    foo,
    abc: 3,
    xyz: 4,
    bar,
};

// gut
const obj = {
    foo,
    bar,
    test: 1,
    key: 2,
    abc: 3,
    xyz: 4,
};

3.6 Nur Properties unter Anführungszeichen setzen, die invalide identifier darstellen würden. eslint: quote-props

Warum? Im Allgemeinen ist es subjektiv einfacher zu lesen. Es verbessert die Syntaxhervorhebung und wird auch von vielen JS-Engines leichter optimiert.
```
// schlecht
const bad = {
    "foo": 3,
    "bar": 4,
    "data-foo": 5
};

// gut
const good = {
    foo: 3,
    bar: 4,
    "data-foo": 5
};
```

3.7 Object.prototype Methoden wie hasOwnProperty, propertyIsEnumerable, und isPrototypeOf niemals direkt aufrufen. eslint: no-prototype-builtins

Warum? Diese Methoden könnten durch Eigenschaften des Ursprungsobjektes "shadowed" werden - z.B. { hasOwnProperty: false } - oder, das Objekt könnte ein null-Objekt sein (Object.create(null)).
```
// schlecht
object.hasOwnProperty(key);

// gut
Object.prototype.hasOwnProperty.call(object, key);

// am besten - Stage 3 Proposal:
// https://github.com/tc39/proposal-accessible-object-hasownproperty
Object.hasOwn(object, key);
```

3.8 Den Objekt "spread" Operator an Stelle von Object.assign bevorzugen, um shallow-copy's von Objekten zu machen. Den Objekt "rest" Operator verwenden, um ein neues Objekt zu erzeugen, bei dem gewissen Eigenschaften weggelassen werden.

// sehr schlecht
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // dies modifiziert `original`
delete copy.a; // das auch

// schlecht
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// gut
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

⬆ back to top

Copyright

33.1 Dieser Styleguide basiert auf dem AirBnB JavaScript Styleguide

33.2 Der Styleguide steht unter der selben Lizenz.

Badges

Extracted from project README