Range

const range = (start, end, step = 1) => {
  let output = [];
  
  if (typeof end === 'undefined') {
    end = start;
    start = 0;
  }

  for (let i = start; i < end; i += step) {
    output.push(i);
  }

  return output;
};

Why

Sometimes, you want to render a sequence of numbers.

Perhaps even more commonly, you want to render something a handful of times. Maybe you want to generate 5 particles, or a bunch of background lines for a graph.

Usage

range(5); // [0, 1, 2, 3, 4]

range(5, 10); // [5, 6, 7, 8, 9]

range(0, 6, 2); // [0, 2, 4]

range(10, 12, 0.5); // [10, 10.5, 11, 11.5]

const PaginationWidget = () => {
  return (
    <div>
      {range(1, 11).map((num) => (
        <PageNum key={num}>{num}</PageNum>
      ))}
    </div>
  );
};