Toggle between two options in an object?

Question

I have just written this code for toggling between two possible states of an object.

// This can't change, and only ever has two states
const MODES = {
  ON: 'ON',
  OFF: 'OFF'
}

// this is my method
const toggleMode = currentMode => {
  const modes = Object.values(MODES);
  const newMode = modes.find(mode => mode !== currentMode);
  return newMode
};

// toggle state
const firstState = MODES.ON;
console.log(firstState);
const secondState = toggleMode(firstState);
console.log(secondState);
const thirdState = toggleMode(secondState)
console.log(thirdState)

Is this a good way of toggling between the two states? I'm concerned it's less readable than the verbose if one state, then pick the other, else pick the current state. But this way also means that so long as we know there's only two states, then nothing needs to be hardcoded in the function doing the toggling.

Answer 1

You currently only print the currently selected mode to the console, but you probably will use this mode for other purposes, such as the business logic of your application. To that end, I suggest splitting the toggling logic from the presentation and use booleans to store the value which you can easily use for branching depending on the currently selected mode.

// Logic: Define the two modes and toggling logic
const MODES = { ON: true, OFF: false }
const toggleMode = currentMode => !currentMode;

// Presentation: Display a selected mode
const displayMode = currentMode => currentMode ? 'ON' : 'OFF';

// Demo
const firstState = MODES.ON
console.log(displayMode(firstState));
const secondState = toggleMode(firstState);
console.log(displayMode(secondState));
const thirdState = toggleMode(secondState);
console.log(displayMode(thirdState));