[Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures
JavaScript in with Data Immutable
2023-09-14 08:59:14 时间
To demonstrate the difference between mutability and immutability, imagine taking a drink from a glass of water. If our glass is mutable, when we take a drink, we retain the same glass and change the amount of water in that glass. However, if our glass is immutable, when we take a drink, we get back a brand new, identical glass containing the correctly drank amount. Perhaps a strange way to conceive of the action, but creating new data structures makes our methods pure and thread-safe, a benefit of functional programming.
class MutableGlass { constructor(content, amount) { this.content = content this.amount = amount } takeDrink(value) { this.amount = Math.max(this.amount - value, 0) return this } } // We can verify this by checking the references of the first glass and // the glass returned by `takeDrink()` and see that they are the same. const mg1 = new MutableGlass('water', 100) const mg2 = mg1.takeDrink(20) console.log(mg1.amount === 80 && mg1.amount === mg2.amount) // true console.log(mg1 === mg2) // true
Immutable class, whch every time should return a new instance:
// Taking a drink from the immutable glass returns an entirely new glass, // but with the correct content and amount of it in the glass. class ImmutableGlass { constructor(content, amount) { this.content = content this.amount = amount } takeDrink(value) { return new ImmutableGlass(this.content, Math.max(this.amount - value, 0)) } } // We can verify this by checking the references and seeing that they are // _not_ equal const ig1 = new ImmutableGlass('water', 100) const ig2 = ig1.takeDrink(20) console.log(ig1.amount !== ig2.amount) // true console.log(ig1 === ig2) // false
相关文章
- [Javascript] Hide Properties from Showing Up in "for ... in" Loops in JavaScript
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] Understanding the .constructor property on JavaScript Objects
- [Rust] Load a WebAssembly Function Written in Rust and Invoke it from JavaScript
- [Javascript] JavaScript赋值时的传值与传址
- [Javascript] Proper use of console.assert in JavaScript
- [Javascript] Redirect the browser using JavaScript
- JavaScript装逼指南
- [Javascript] Filter out Duplicates from Flat JavaScript Array with array.filter / reduce / Set
- [Javascript] Natively Format JavaScript Dates and Times
- [Javascript] Create an Image with JavaScript Using Fetch and URL.createObjectURL
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] Identify and Deal with NaN in JavaScript
- [Javascript] Proper use of console.assert in JavaScript
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] How to use JavaScript's String.replace
- escape in ABAP and JavaScript