The Immutable Way: A Guide to Cleaner, More Predictable JavaScript
summary
Explains why shallow copies via the ES6 spread cause hidden shared references and shows structuredClone as the deep-clone fix; demonstrates how mutating the products array in a React shopping-cart adds a pound sign per render (four renders produced four symbols) and breaks numeric totals; introduces native immutability tools Object.freeze and Object.seal and the ES2023 array helpers like toSorted/toSpliced to return new arrays instead of mutating originals; builds a small React demo and fixes it by keeping state immutable.
AI-written summary · about
chapters (13)
- 0:00Immutability in JavaScript
- 1:03Why immutability matters
- 2:48Mutability vs const
- 6:02Immutable copies with spread
- 8:08Shallow copy pitfalls
- 11:02Deep cloning with structuredClone
- 12:26Freezing and sealing objects
- 15:37Mutable state issues example
- 18:50Fixing state in React
- 20:58Immutability with arrays
- 23:23ES2023 immutable arrays
- 27:16Immutable libraries overview
- 28:19Conclusion
related talks
45mJavaScript Immutability - "Don't Go Changing"
54mJavaScript Essentials for Programming with React
30m"JavaScript, the Real Bad Parts"
30mJavaScript prerequisites for React (hooks)
53mMaintainable JavaScript with Functional Patterns
34mFunctional JavaScript for everyone
40mSimplicity through Functions
31mImmutable Data and React