DEV Community

Cover image for Number.range; Stage-1 proposal
hemanth.hm
hemanth.hm

Posted on • Edited on

Number.range; Stage-1 proposal

#javascript

Number.range() proposal for ECMAScript in currently on stage-1 and if it makes to stage-4(I strongly hope it will) one day we would be able to use Number.range() and BigInt.range in Javascript.

Currently in JavaScript, if we were to be implement range we would:

const range = (start, end) => [...Array(end - start + 1)].map((_, indx) => start + indx);
Enter fullscreen mode Exit fullscreen mode

Or use generators, many other ways or ended up libs like lodash, ramda or likes.

With this proposal we could do something like:

[...Number.range(1, 100, 2)] // odd number from 1 to 99
Enter fullscreen mode Exit fullscreen mode 
[...Number.range(0, 5, { step: 1.75 })];
//[0, 1.75, 3.5]
Enter fullscreen mode Exit fullscreen mode 
[...Number.range(5, -6, -1)]
(11) [5, 4, 3, 2, 1, 0, -1, -2, -3, -4, -5]
Enter fullscreen mode Exit fullscreen mode

So, it is basically: Number.range(start, end, option)

We can also use it with the iterator helper proposal.

Number.range(0, Infinity)
    .take(10)
    .filter(x => !(x % 2))
    .toArray();

// [0, 2, 4, 6, 8]
Enter fullscreen mode Exit fullscreen mode

Similarly with BigInt.range

[...BigInt.range(-2n, 3n)]
// [-2n, -1n, 0n, 1n, 2n]
Enter fullscreen mode Exit fullscreen mode

Hope you liked this proposal by Jack Works, feel free to provide your feedback as this on Stage-1 as of today.

Top comments (6)

Collapse
 
miketalbot profile image
Mike Talbot ⭐ • • Edited

I'd suggest the best way to do range today would be:

    const range = (start, end)=>Array.from({length: end-start}, (__,i)=>start+i)

No need to double memory and processing by spreading the result into an array or making another one with map.

Collapse
 
emnudge profile image
EmNudge •

For most purposes, an iterator is actually preferable. These can be created via generators, as mentioned in the article.
I wrote one in an older article of mine:
dev.to/emnudge/generating-arrays-i...

class Range {
  constructor(min, max, step = 1) {
    this.val = min;
    this.end = max;
    this.step = step;
  }

  * [Symbol.iterator]() {
    while (this.val <= this.end) {
      yield this.val;
      this.val += this.step;
    }
  }
}
Collapse
 
hemanth profile image
hemanth.hm •

Yup, that is covered in the many other ways of doing this link.

Collapse
 
nombrekeff profile image
Keff •

Nice proposal, I didn't know about this one! Thanks for sharing!

Just the usual jerk, there is a little typo in the link to "may other ways"

Collapse
 
hemanth profile image
hemanth.hm •

Hah hah, thanks, fixed it!

Collapse
 
belinde profile image
Franco Traversaro •

I don't want to be negative, but... honestly, I've been a full time developer for the last 15 years and I needed such a function no more than 10 times. Is it really so useful?

Read next

abhay_yt_52a8e72b213be229 profile image

Using useEffect for Fetching Data in React

Abhay Singh Kathayat -

rahulgithubweb profile image

LeetCode Challenge: 135. Candy - JavaScript Solution 🍬

Rahul Kumar Barnwal -

iri_denis profile image

What React Brought Us in 2024: Key Updates and Innovations

Iri Denis -

msm8 profile image

Building Composable Platforms with Harmony

John Brooks -