# Toggle between two options in an object?

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.

• Sep 3, 2019 at 11:38
• Could you show us how you'd use that code in action? Sep 3, 2019 at 12:06
• @dfhwze how much context do you need? The way it's used in the snippet isn't far off. Sep 3, 2019 at 12:07
• I can see it toggles, but how would you end up using 'ON' and 'OFF' on an object? Sep 3, 2019 at 12:08
• I have no further questions, your honor. Sep 3, 2019 at 15:27

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));

• This is a clever distinction, but I don't' think it applies in my case as I'm not going to be displaying the state (the console logs were just to show the function working). I'm also not keen on(sort of) handling two lots of state/processes to get to state. Sep 4, 2019 at 8:11
• All the better, if you don't need to display it. The toggling function can be used stand-alone and you can alway check either against truthiness (if(firstState){ … }) or against the "Enum" (if(firststate == MODES.ON){ … }) so not to depend on the inner value. Sep 4, 2019 at 8:33