После последней итерации setInterval возвращает неопределенное

Question

Я пытаюсь заставить background-color поменяться местами через X раз, и он работает НО после последней итерации, где для шага установлено значение 0, я получаю undefined, и я не могу понять, почему : /

const foo = () => {
  const colors = [{
      primary: 'LightGreen',
      secondary: '#7fe27f'
    },
    {
      primary: "Gold",
      secondary: '#efc900'
    },
    {
      primary: "#1590FF",
      secondary: '#0479FF'
    },
    {
      primary: "#00BFFF",
      secondary: '#06ace3'
    }
  ]
  let step = -1
  return setInterval(() => {
    step === colors.length ? step = 0 : step++
      return console.log(colors[step]);
  }, 2000)
}

Есть идеи, почему это происходит? И как я мог это исправить?

Answer 1

Когда step равно colors.length - 1, вы выполните step++, что составит step === colors.length. Затем вы получите доступ к colors[colors.length], что составляет undefined.

. Вы должны проверить, соответствует ли step === colors.length - 1 вашему состоянию.

Но лучшим решением было бы использование оператора остатка. Вы можете просто сделать:

console.log(colors[step++ % colors.length]);