Hacker News Reader

Comment by rofo1 | Hacker News Reader

Sure, when you need to update 1 single thing once, you can use vanilla js.

But when you need to do more than that, you'll realize jQuery is still useful (assuming you don't use a framework or whatever). Either you will use something like jQuery or you'll reinvent by writing the methods yourself.

IMO it's still relevant, despite the hype of other frameworks.

View on HN

There's really nothing you need jQuery for any more except supporting old jQuery components. You can do things like Array.from(document.querySelectorAll('.foo')).map((fooEl)=>{ fooEl.classList.toggle('bar'); }) in a browser (with no Babel-style transpile step) these days.

In case you want to play with that - https://codepen.io/onion2k/pen/NQrEKq

Although I usually agree with the 'jQuery is overused' side of the crowd, I think your example is one of the times when I see that jQuery wins in ease and readability.

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

I really dislike the way jQuery makes no distinction between mutations on one or many elements. I view the native APIs’ differentiation of the two, requring you to be explicit (`document.querySelector('.foo').classList.add('bar')` versus `document.querySelectorAll('.foo').forEach(foo => foo.classList.add('bar'))`) to be a feature.

My version doesn't need a 30Kb library though.

Some notes:

• 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');
  });

Or if you hate the `Array.prototype.` and `.call` bits,

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

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

And if you’re happy to drop a little more older browser support including IE, you can just use NodeList.prototype.forEach, which incidentally is normally the same function object as Array.prototype.forEach:

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

I should have expected a reply like this. Those are all good points.

> But when you need to do more than that, you'll realize jQuery is still useful

Such as?

See here: https://medium.com/@mattburgess/in-defence-of-jquery-4a8b20f...

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.

Reply on news.ycombinator.com