Reduce state changes

Ein Status ist ein Snapshot bzw. der Zustand eines Programmes zu einer bestimmten Zeit. Dieser bezieht sich auf die Namen aller Variable (Primitives und Objects), die sich im Programm befinden.

Wenn wir eine Variable deklarieren, erstellen wir einen Status im Programm. Diese Variablen werden gespeichert und stehen dem Programm jederzeit zur Verfügung.

Wenn wir eine Variable ändern, ihr also einen neuen Wert zuweisen, ändern wir den Programmstatus.

Program state and function state

Dasselbe gilt für Variable innerhalb von Funktionen. Auch diesen wird oft ein neuer Wert zugewiesen (was ja oft Sinn und Zweck des Programmes ist). Auch das bewirkt eine Statusänderung im Programm. Allerdings ist uns diese egal – sie bezieht sich nur auf die Funktion, während diese ausgeführt wird. Sobald die Funktion fertig ist, wird die Variabe verworfen und wir können nicht mehr darauf zugreifen.
Wenn wir Status sagen, beziehen wir uns üblicherweise auf den Programmstatus.

Websites always have a state

Egal, ob wir selbst JavaScript schreiben oder nicht, Webseiten haben einen Status. Sowohl im DOM als auch im window Objekt gibt es Variable, die dem Programm automatisch einen default state geben.

Should you change states?

Wir brauchen Statusänderungen, wenn wir irgendetwas in JavaScript machen wollen. Sei es, um ein Accordeon zu öffnen und wieder zu schließen, um eine Navigation auszuklappen oder Tabs anzusteuern, all das geht nur mit Statusänderungen (Klassen toggeln und so weiter).

Je mehr Statusänderungen passieren, desto schwieriger wird es, das Programm zu debuggen. Daher sollten Statusänderungen auf ein Mindestmaß reduziert werden.

How to reduce state changes

Das erreichen wir mit zwei Dingen:

• Don’t reassign
• Don’t mutate

Don’t reassign

Variablen, die mit let deklariert werden, kann später ein neuer Wert zugewiesen werden. Diesen Prozess nennen wir reassignment.

Why you should not reassign

Dafür gibt es zwei Gründe:

• Reassignments produzieren komplizierten Code
• Wir können den externen Status versehentlich ändern

Wenn eine Variable ihren Wert ändern kann, ist es schwierig, diesen potentiellen Änderungsverlauf im Auge zu behalten. Das gilt natürlich umso mehr, je komplexer der Code wird.
Außerdem kann es passieren, dass wir den externen Status ändern, indem wir einer zuvor global deklarierten Variable innerhalb einer Funktion einen anderen Wert zuweisen. Somit ändern wir die globale Variable mit, und das ist nicht gut.

What to do instead of reassignments

Am besten schreiben wir Code, der keine Reassignments benötigt:

• const verwenden – falls wir eine Variable, die mit const deklariert wurde, versehentlich umbenennen, erhalten wir eine Fehlermeldung
• ternary operator statt if/else verwenden
• wenn if/else trotzdem nötig ist (weil es mehr als zwei Optionen gibt), dann besser eine Funktion mit early returns verwenden

Don’t mutate

Code kann in JavaScript (unbeabsichtigt) mutiert werden.