Skip to content

Instantly share code, notes, and snippets.

@moimikey moimikey/after.js
Last active Jun 26, 2018

Embed
What would you like to do?
object literals for redux reducers
// O(1)
const todo = (state, action) => {
const actions = {
ADD_TODO: () => {
return {
id: action.id,
text: action.text,
completed: false
}
},
TOGGLE_TODO: () => {
if (state.id !== action.id) return state
return {
...state,
completed: !state.completed
}
}
}
return {
default: state,
...actions
}[action.type || 'default']
}
// O(n)
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
}
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state
}
return {
...state,
completed: !state.completed
}
default:
return state
}
}
@moimikey

This comment has been minimized.

Copy link
Owner Author

moimikey commented Feb 28, 2016

while we can't quantify the complexity using big-O at such a small scale, I've used them just for brevity to indicate that the before case with switch and case can continue to grow linearly, therefore an O(n) like complexity; whereas the after, using object literals, provide an instantaneous hash lookup, which is comparable to a complexity of O(1).

@moimikey

This comment has been minimized.

Copy link
Owner Author

moimikey commented Feb 28, 2016

performance is not 100% applicable using big-O when it comes to comparing a switch statement to an object literal approach. In the same way a compiler optimizes a resulting binary, the browser does as well. I can't speak for all browsers, but as an example, V8 in Chrome seems to have poor switch performance in comparison to arrays and object literals, especially when the growth of the switch statement escalates to a certain point (pretty much starting to confirm that O(n)). cite.

@moimikey

This comment has been minimized.

Copy link
Owner Author

moimikey commented Feb 28, 2016

another argument is that a switch statement may also not really be a switch statement: at compile time that is. depending on the browser or node engine that is being used, a switch statement could actually transform into a giant if/else conditional at compiler time. this starts to make more sense as to the performance decrease, especially if switch statements are being used for clauses that shouldn't be compared using a switch statement (ie. redux reducers...)

@moimikey

This comment has been minimized.

Copy link
Owner Author

moimikey commented Jun 26, 2018

2 years later, an additional benefit to avoiding the switch, is pure readability:

export const actions = {
  ADD_TODO: () => {
    return {
      id: action.id,
      text: action.text,
      completed: false
    }
  },
  TOGGLE_TODO: () => {
    if (state.id !== action.id) return state
    return {
      ...state,
      completed: !state.completed
    }
  }
}

export const todo = (state, action) => {
  return {
    default: state,
    ...actions
  }[action.type || 'default']
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.