If you’re not familiar with Python, refers to the use of the range type to create an immutable sequence of numbers. range() “The range type represents an immutable sequence of numbers and is commonly used for looping a specific number of times in for loops.” — docs.python.org The constructor has two forms of definition: range() range(stop)
range(start, stop[, step]) A concise explanation of the parameters, return value, etc., can be found on . programiz A few examples: https://gist.github.com/guyariely/2fd354b0aab64b4187dd894e2bedaa8b.js Building the range() function in JavaScript For simplicity sake, we will ignore the optional argument. step By using the constructor, and , you could work out a simple solution in a quick one-liner: Array fill map new Array(stop - start).fill(start).map((el, i) => el + i) And maybe then offer a complete solution, covering the case of calling range with only one argument: https://gist.github.com/guyariely/ee9e688e6f59131d15ffc7a43f6fcea4.js But it’s quite it yet. Can you see why this solution is wrong? not Remember, calling Python returns an . Notice how to get the familiar list data structure, the Python examples above wrap the return value of range with . range immutable sequence of numbers list() An equal example in JavaScript should probably look something like this: > Array.from(range(1, 11))
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] So how can we make a function in JavaScript return an “immutable sequence of numbers”? Is there any way to achieve the same structure of the return value in JavaScript? range() Iterators to the rescue! Iterators are wildly used in different programming languages to allow us to iterate over different data structures. “In JavaScript an iterator is an object which defines a sequence and potentially a return value upon its termination.” — developer.mozilla.org Specifically in JavaScript, an iterator is any object which implements the by having a method that returns an object with two properties: Iterator protocol next() next() {
  ...
  return {
    value: // current value to be passed
    done: // did we finish iterating over the data structure?
  }
} Using an iterator, you can provide your own logic on how to iterate. For example, here is a simple iterator that will skip every second item: https://gist.github.com/guyariely/f0b2316c3030e3f6adba3b3e910649c3.js More importantly, If we create an object that defines which returns that iterator, : [Symbol.iterator] we can get exactly the behavior we were looking for https://gist.github.com/guyariely/4d6b4e425fc9a3d2ed940e9018c2f7c6.js Play around with these examples and see what kind of interesting and useful iterators you can create 💪. By now, you can probably imagine how we might approach creating Python in JavaScript. This is how I implemented it: range() https://gist.github.com/guyariely/ea771fbbf7ec3fcebf951f1ff01f84bc.js As I mentioned, for simplicity's sake, this implementation leaves out the argument from the original Python , but it’s just a matter of extra logic that you can implement yourself. Feel free to @ me your solution ✌️. step range() Also published . here

Mozilla

Web Developer and Computer Science student 👨🏻‍💻

2021 - HackerNoon Contributor of the Year - CODING-SKILLS

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

The Magic of Iterators: Build Python range() in JavaScript

Too Long; Didn't Read

Company Mentioned

Guy Ariely

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The Magic of Iterators: Build Python range() in JavaScript

Too Long; Didn't Read

Company Mentioned

Guy Ariely

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES