Implement a cycleOn function

Mar 27, 2024

cycleOn is a higher order utility function which helps you cycle through a list of values.

The generic implementation of cycleOn utility and can be extended to create other similar utilities like toggleOn (for two values).

Variation: Basic implementation

1. Generic implementation

function cycleOn(values) {
  let activeIndex = 0;

  function cycledFnImpl() {
    // if we have exceeded the limit for values length, reset the index
    if (activeIndex >= values.length) {
      activeIndex = 0;
    }

    const result = values[activeIndex];
    activeIndex++;
    return result;
  }

  return cycledFnImpl;
}

// Usage of the utility function
const fruits = ['apple', 'mango', 'banana'];
const cycleValue = cycleOn(fruits);

console.log(cycleValue()); // apple
console.log(cycleValue()); // mango
console.log(cycleValue()); // banana
// cycle restarts from here again
console.log(cycleValue()); // apple

Variation: Toggle on

2. Variation of toggleOn

Usually cycleOn with only two values is referred as toggleOn, where you toggle between two state values.

import cycleOn from './src/cycleOn.js';

// cycleOn with two values can be also referred as toggleOn
const fruits = ['on', 'off'];
const toggleOn = cycleOn(fruits);

console.log(toggleOn()); // on
console.log(toggleOn()); // off
// cycle restarts from here again
console.log(cycleValue()); // on

Implement a cycleOn function

1. Generic implementation

2. Variation of toggleOn

Further Reading