# Print Ranges Natively in JS

One of my favorite feature of Ruby is ranges. But it’s not natively available in JS. That’s about to change! Learning ES6 from @getify 🤩

Add this snippet to print ranges in your number prototype!

Number.prototype[Symbol.iterator] = function*() {
  for (let i = 0; i <= this; i++) {
    yield i;
  }
};

[...3]; // [ 0, 1, 2, 3 ]
[...6]; // [ 0, 1, 2, 3, 4, 5, 6 ]

Examples
- Using it with Map
- Using it with Filter
Community Suggestions
- Use with caution
Community Examples
Resources

# Examples

You can even apply your standard loop methods on it!

# Using it with Map

Use it with the map method to triple each of the number.

// Number.prototype[Symbol.iterator] = function*() {...}

const triple = [...3].map(x => x * 2);

triple; // [ 0, 3, 6, 9 ]

# Using it with Filter

Combine it with the filter method to get rid of the odd numbers. (by the way, nothing wrong with odd one 😉)

// Number.prototype[Symbol.iterator] = function*() {...}

const even = [...10].filter(x => x % 2 === 0);

even; // [ 0, 2, 4, 6, 8, 10 ]

# Community Suggestions

# Use with caution

This code recipe does alter the built-in prototype. And this can lead to potential problem.

A popular library call MooTools had an unfortunately incident known as #smooshgate. You can read this article that explained what happened.

If you need custom behaviour, it's better to define your own method instead of changing a native one. That way you don't risk breaking anything at all.

Thanks: Robin V and @_gsathya

# Community Examples

# Create Range with Start Value

Improvement to build a specific range.

Number.prototype[Symbol.iterator] = function*() {
  for (let i = 0; i <= this; i++) yield i;
};

Array.prototype.to = function(arr) {
  return arr.filter(val => !Array.from(this).includes(val));
};

console.log([...2]); // [0, 1, 2]
console.log([...5]); // [0, 1, 2, 3, 4, 5]
console.log([...2].to([...5])); // [3, 4, 5]

Thanks: @omiraclx

# Method to Print Ranges

Brian R: In Ruby, you can just say (0..10) and it generates an array of numbers from 0 to 10. If you do (0...10), it will give you from 1 to 9. In the current ECMA spec, you can't do this without writting your own function. The closest thing in the current spec that I've seen is this:

[...Array(5).keys()];

// [ 0, 1, 2, 3, 4 ]

Very similar using Array.from

Array.from({ length: 5 }, (v, i) => i);

// [0, 1, 2, 3, 4]

Or create a function:

function range(start, end) {
  let arr = [];
  for (let i = start; i <= end; i++) {
    arr.push(i);
  }
  return arr;
}

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

Thanks: Brian R.

# Another Method to Print Ranges

const range = length => {
  return new Array(length).map((_, index) => {
    return index;
  });
};

range(5); // [<5 empty items>]

Thanks @mieszkogulinski

# Resources

I learned this from a course on Pluralsight. It's called ES6: The Right Parts from Kyle Simpson.It is a paid course, but I found a free transcript here.