• Array.from is comparatively recent to the web platform, and cuts out IE support.

• Learn when to use Array.prototype.forEach, and when to use Array.prototype.map: use forEach when you aren’t deliberately constructing a new array but are just wanting to call a function on each value, and map when you are applying a function to each value and care about the result. Otherwise you’re creating a new array unnecessarily.

• You can (and should) avoid Array.from when you just want to call an array method on an array-like object (e.g. NodeList, HTMLCollection, Arguments): instead, call the method directly on the instance; it’s OK, all the Array.prototype methods are deliberately designed to work on array-like objects, not just arrays. That is, instead of `Array.from(x).forEach(y)`, use `Array.prototype.forEach.call(x, y)`. Otherwise you’re creating a new array unnecessarily.

• A slight word of caution about classList: IE and very old browsers don’t implement it on SVG elements. Just take that into account if you support IE at all.

So then, you might end up with this:

  Array.prototype.forEach.call(document.querySelectorAll('.foo'), (fooEl) => {
      fooEl.classList.toggle('bar');
  });

  const forEach = Function.prototype.call.bind(Array.prototype.forEach);

  forEach(document.querySelectorAll('.foo'), (fooEl) => {
      fooEl.classList.toggle('bar');
  });

  document.querySelectorAll('.foo').forEach((fooEl) => {
      fooEl.classList.toggle('bar');
  });

The jQuery equivalent for this is $('.foo').addClass('bar');

In general, jQuery is an amazing wrapper around native JS with a saner API and countless hours of different browser quirk workarounds to make sure that what you try to do works in all modern browsers and IE.