JavaScript Range How to create range in Javascript

I like this way:

const range = (start, end) => {
    const length = end - start;
    return Array.from({ length }, (_, i) => start + i);
}

As array from works with arrayLike structures and receives a second optional argument mapFn, it's a nice candidate to build range.

This is how I went about creating a different solution although it is only really beneficial by calling (value in target) and really only counts as a "typeof range" :) Just bored and playing around with proxies.

console.log(...generateRange());

let range = {
    start: 1,
    end: 10,
};

range = new Proxy(range, {
    has(target: typeof range, prop: string | symbol | number) {
        if (typeof prop === 'number') {
            return prop >= target.start && prop <= target.end;
        } else {
            return Number(prop) >= target.start && Number(prop) <= target.end;
        }
    },
});

console.log(5 in range);
console.log(50 in range);

If you're going to use => might as well go all in... (line break for readability on dev.to)

const range = (start, end) => new Array(end - start + 1)
.fill(undefined).map((_, i) => i + start)

I liked your recursive generator. How about something like this:

Number.prototype.to = function* (end) {
  const start = this;
  const step = end > start ? 1 : -1;
  const fn = function* (n) {
    let next = start + step * n;
    yield next;
    if (next === end) return;
    yield* fn(n + 1);
  };
  yield start;
  yield* fn(1);   
}

const asc = [...(1).to(5)];
const dsc = [...(5).to(1)];

console.log(asc); // [1, 2, 3, 4, 5]
console.log(dsc); // [5, 4, 3, 2, 1]

This is an Awesome string of code you've written. I'm partial to Python3 behavior of range though. Made a few minor adjustments yours. Better to steal like an artist then build from scratch.

function* range(start=0, end=undefined, step=1) {    
    if( arguments.length === 1) {end = start, start = 0}    

    [...arguments].forEach(arg => {    
        if( typeof arg !== 'number') {throw new TypeError("Invalid argument")}                               
    })    
    if( arguments.length === 0) {throw new TypeError("range requires at least 1 argument, got 0")}    

    if(start >= end) return                                                                                                                                     
    yield start    
    yield* range(parseInt(start + step), end, step)    
}

// Use Cases
console.log([...range(5)])

console.log([...range(2, 5)])

console.log([...range(2, 5, 2)])

The recursive one is really nice. Can be shortened to:

const range = (s, e) => e > s ? [s, ...range(s + 1, e)] : [s];

Also this is another approach, + easier to handle descending sequences too:

const range = (s,e) => e > s ? Array(e - s + 1).fill(0).map((x, y) => y + s) : Array(s - e + 1).fill(0).map((x, y) => - y + s);

I'm a little late for the discussion 😅 but I found the different ways interesting, I ended up getting this one. Is it valid?

const range = (start, end, length = end - start + 1) => [...Array(length).keys()].map(d => d + start) 

I just use a one-liner recursive arrow function in ES6; note, it doesn't check but you should only pass it integers else it will never get to a == b so it will blow the stack!

let range = (a, b) => a>b ? range(b, a).reverse() : (a==b ? [a] : range(a, b-1).concat(b));

Why not get really wild and crazy :P ?

1st define a unfoldr

const unfoldr = (f, seed, xs = [], next = f(seed)) =>
   next ? unfoldr(f, next[1], xs.concat(next[0])) : xs

then define a range in terms of unfold

const range = (from, to) =>
   unfoldr(seed => seed > to ? false : [seed, seed + 1], from)

excellent article btw, keep them coming :)

Why nobody is wondering why this is not part of the standard library?

php.net/manual/en/function.range.php
ruby-doc.org/core-2.5.1/Range.html
docs.python.org/3.3/library/stdtyp...

It rather depends, Jason, on what you mean by cooler.

If you only needed range to handle approx. 6000 iterations then I think a recursive range function is pretty cool, but slow:

const range = (s,e) => (s === e) ? [s] : [s, ...range(s+1,e)]

But, if you need a much bigger range and fast executuion then do something like this:

const range = (s=0,e=10,r=[]) =>
  {while(e >= s){ r.push(s); (e>=s)? s++ : s--; } return r }

And if you don't like the arrow function, then it's easy to convert to a standard es5 style function.

Might be inefficient to create an array for large ranges, and only supports range of integers (no dates). Have you seen Ruby's Range class? ruby-doc.org/core-2.2.0/Range.html
You could still implement toArray() and offer a covers() function.

The for loop is by far the easiest to read and also by far the most efficient. Your last example was literally more than 15 times slower than the for loop. Far too many developers these days are trying to get all fancy when the simple solution is much better.

Thanks for this article. I find your first answer to be the most intuitive, and it works great for my situation.

function loopASequenceAgain(start, end) {
  // create a loop which loops from start to end
  var ans = [];
  for (let i = start; i <= end; i++) {
  // log current value to console
      console.log(i); 
      ans.push(i);
  }
  return ans;
}

After reading through this helpful discussion this what I came up with, I added a condition if the start point of the range is greater than the end point. This my very first contribution

function range(s, e) {
  var arr = [];
  for (let i = s; i <= e; i++) {
      arr.push(i);
  }
  return  s > e ? Array(s - e + 1).fill(0).map((x, y) => - y + s):arr;
}
console.log(range(10,1)