javascript ecmascript-6 iterator iterable ecmascript-2016

How does a JavaScript developer find implementing classes of an interface?

I am learning JavaScript, and I am coming from Java.

A Java developer can easily evaluate the usefulness of an interface, because all known implementing classes are documented. Please click here to see an example.

The same is not true in JavaScript. For example, for iterables, the links below show only a few examples of iterables. They don't show all implementing built-in and DOM classes. (For example, they mentioned "collection types such as NodeList are also iterables". So, other than NodeList, how can I find the other DOM classes that are iterables? Are there some JS codes I can run to achieve this? Thanks!)

Thanks!

MDN Documentation on iterables:

Update 1:

What I am looking for are iterables that can go into the first argument of Array.from(). Thanks!

Solution

Well, the closest we get to "interface" when it comes to built in classes might be well-known symbols that tells us whether a class implements something:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#well-known_symbols

We can get all properties of the globalThis (same as the Window object in browsers, different in Node.js) object, most that are classes are not enumerable, so we have to use Object.getOwnPropertyNames.

We can then loop through them and see if their prototypes are iterable - have the well-known symbol Symbol.iterator.

We will now get an extensive list of classes that create iterable instances.

function getIterableClasses() {
  let classNames = [];
  let builtIn = Object.getOwnPropertyNames(globalThis);
  for (let x of builtIn) { 
    try {
      let object = globalThis[x].prototype;
      object[Symbol.iterator] && classNames.push(x);
    }
    catch (e) { }
  }
  return classNames.sort();
}

let c = getIterableClasses();
console.log('Found ' + c.length + ' iterable classes');
console.log(c.join('\n'));

This code reports 68 built-in classes that create iterables in Chrome, 58 in Firefox and 57 in Safari (latest versions of the browsers on a Mac, 6th of May 2023). So there are quite a few of these classes.

Note: In Node.js the list is much smaller, since it has a more modular structure (modules are required/imported when needed) and don't have any DOM-related classes, but you still get 19 different classes with iterable instances in Node.js: Array, BigInt64Array, BigUint64Array, Buffer, Float32Array, Float64Array, FormData, Headers, Int16Array, Int32Array, Int8Array, Map, Set, String, URLSearchParams, Uint16Array, Uint32Array, Uint8Array, Uint8ClampedArray.

A personal thought from one teacher to another: If your purpose is to teach basic JavaScript I think you will do both yourself and your students a disfavor in going through all these classes. Rather focus on some basics: arrays are iterable, strings are iterable, NodeLists are (and how to use querySelectorAll to get NodeLists). And the fact that you can turn any iterable into an array by spreading it into an array [...iterable] is often useful since you can then use standard array methods (like map, filter, reduce) on it.

Also: Spreading an iterable into an array [...iterable] does about the same thing as Array.prototype.from but in a shorter more 'JS-nesque' way.