Immutable tietoisku

immutable-tietoisku.md

ImmutableJS

Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data.

--- Immutable.js

Some concepts of functional programming

Immutable data

Data structure cannot be modified after its creation

Mutated data structure

const myObject = {
  value: 10
}

myObject.value = 20 // mutation

Not mutated data structure

const myObject = {
  value: 10
}

const newObject = { ...myObject, value: 20 } // myObject is not mutated

console.log(JSON.stringify(myObject, false, 2))
// {
//   "value": 10
// }

Side-effects

Function calls do not alter program state outside its execution window.

Has side-effects

let state = ['Hello', 'World!']
function myFunction (input) {
  input.push('Mutation')
  console.log(input.join(' '))
}

myFunction(state)
console.log(state.join(' '))

Side-effect free

let state = ['Hello', 'World!']
function myFunction (input) {
  input = [...input] // deep copy
  input.push('Mutation')
  console.log(input.join(' '))
}

myFunction(state)
console.log(state.join(' '))

Purity

Methods only rely on information that is passed to them:

function myFunction () {
  console.log(Date.now()) // is not pure
}

function myFunction (timestamp) {
  console.log(timestamp) // is pure
}

✨ Benefits of immutable data structures and functional approach

• Robustness: State cannot be altered by a mistake.
• Modularity: Use same parts of the core in other applications.
• Testing: State reducers are the heart of the application. Pure reducer functions can be tested separately.

Example

const Immutable = require('immutable')

/*
 * Basic usage
 * Create m2 from m1, m1 is not mutated. It is immutable
 */
const m1 = Immutable.Map({ foo: Immutable.Map({ bar: 'Hello, world!' }) })
const m2 = m1.setIn(['foo', 'bar'], 'Hyvää päivää')

console.log(m1.toJS())
console.log(m2.toJS())

/*
 * If you need to do many mutations, it is better to wrap them inside `withMutations`
 */
const m3 = m1.withMutations(m => {
  const mutation1 = m.set('a', '1')
  const mutation2 = m.set('b', '2')
  const mutation3 = m.set('c', '3')

  console.log(mutation1 === mutation2 && mutation2 === mutation3)
})

console.log(m3.toJS())