🐈‍⬛ JavaScript Immutability

Mutationen verhindern

Was bei DC und Marvel ziemlich cool ist, kann im Entwickler-Alltag leicht zu Frust und Zeitverschwendung fĂźhren: Mutability von Objekten.

Was haben denn bitte Comics mit Programmieren zu tun?! Ganz einfach, Quantenphysik.

⚛️ Objekte und und ihre Pointer sind ein bisschen wie verschränkte Teilchen. Ändert man ein Objekt an der einen Stelle im Code, ändert es sich auch an der anderen. Damit kennen wir dessen Zustand nicht mehr, ohne genau hinzuschauen - wir haben also erfolgreich Schrödingers Katze implementiert 🙀 Sprich das Gesetz der Dekohärenz ist umgangen und das Objekt befindet sich in Superposition. Will keiner, denn die nächste Messung wird erst stattfinden, wenn uns die nächste Fehlermeldung um die Ohren fliegt.

🤨 What...

In Redux ist es verboten und in NgRx schlich nicht mÜglich Objekte im Store zu verändern.

Manchmal ist es aber ziemlich Ăźbertrieben ein State Management einzufĂźhren. Objekte, trotz fehlenden Zwangs, als immutable zu behandeln kann aber trotzdem eine gute Idee sein.

Also getreu dem Reactive Programming Paradigma: "Create new, don't alter"

1// Irgendein Objekt wird Ăźber den Setter in die Klasse reingegeben und als Property gespeichert
2function setLocalState(someState): Observable<any> { 
3    someState.someProperty = someState.someProperty || []; 
4    this.localState = someState; 
5    return Observable.emtpy(); 
6}

⚠️ Zonk! Problem: Das verschränkte Objekt (ja ok, es ist dasselbe!) hält sich auch noch außerhalb der Methode auf. Wird es nach dem Aufruf von setLocalState() verändert, ändert sich auch die Property localState  in unserer Klasse

Also besser so:

1function setLocalState(someState): Observable<any> {
2    this.localState = Object.assign(		
3        {},         // neues, leeres Objekt		
4        someState,  // wird mit Ăźbergebenem Objekt und wahlweise weiteren gemergt		
5        { 
6            someProperty: someState.someProperty || [] 
7        }	
8    );
9}

☝️🧐 So haben wir schnell ein neues Objekt erzeugt und unschönen Seiteneffekten vorgebeugt.

Ich weiß, die Beispiele sind komplett an den Haaren herbeigezogen. Hat aber halt Spaß gemacht, den Artikel so zu schreiben... 🤷‍♂️