HN Explorer

Ask HN: Have You Ever Found an Explicit Use for JavaScript Closures?

5 points by madeuptempacct ↗ HN
"Frankly, you can’t get very far with JavaScript without learning about closures."

"If you can’t answer this question, you’re a junior developer. I don’t care how long you’ve been coding."

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36

Ever since reading this dramatic (and, in retrospect, idiotic) statement, I have been kind of obsessed with figuring out the actual use for closures. I will grant the "mimic private field/property" and the module pattern. Past that though, any intentional use of closures seem limited to "if I loop through a set of dom elements and assign an event, the event will be assigned incorrectly", e.g.

  var buttons = document.getElementsByTagName("button");  
  for (var i = 0; i < buttons.length; i++) {  
    buttons[i].addEventListener("click", function() {  
      console.log("My value: " + i);  
    });
  }

  // Each button will state "My value is 3" (Instead of 1,2,3)
So, after reading chapters in three books and a ton of articles and stackoverflow posts, I ask you HN - have you ever used a closure intentionally? If so, please share.

6 comments

[ 2.1 ms ] story [ 24.5 ms ] thread
eschutte2
Constantly - it's so important that it's just kind of in the background of everything I do. Doesn't it make currying and point-free style much easier?
madeuptempacct
but why? From first google search result (https://hackernoon.com/currying-in-js-d9ddc64f162e):

  function sum3(x) {
    return (y) => {
      return (z) => {
        return x + y + z;
      };
    };
  }
  console.log(sum3(1)(2)(3)) // 6
How is this cleaner than?

  sum(1,2,3);
I have seen examples like this before, but I don't understand the point of this either. I guess I will read up on currying more, thank you.
eschutte2
Sorry, just got back and saw your reply. This is too big a topic to go into here and there's already plenty written on it. Sum is not a realistic use case. If you're doing Javascript, maybe look at lodash/fp for ways people really use currying.

I think my answer to "why" would be: if your mind is already geared to think about problems in terms of composition of functions, then currying (for example) is just one necessary and natural thing that falls out of that.

rl3
While there's many legitimate and peculiar use cases where closures make sense when writing properly engineered code, my favorite use is simply abusing them in one-off or ad-hoc code where performance or correctness isn't a concern.

Basically just using them as lazy shortcuts to avoid the hassle of argument passing. It's particularly great when you have a function scope that's three or four levels deep, and you're referencing a variable via closure that's in the top-level function scope. Much less work.

arenaninja
I write a LOT of React code, and I abuse closures daily

The statement you quote is overly dramatic, and it takes maybe 5 minutes to clearly explain the concept to someone that grasps the basic language syntax. The usefulness is more difficult to lay out clearly

Where it comes up very often for me is when using mapStateToPropsFactory from react-redux, like this:

    // a closure for ownProps is created

    // the factory is not invoked everytime the component changes props

    const mapStateToPropsFactory = (_, ownProps) => {

      const { uniqueId } = ownProps;

      return function mapStateToProps(state) {
        return {
          usefulThing: state.usefulThings[uniqueId],
          ping: state.pong,
        }
      }
   }
If you don't do things this way, react-redux loses a lot of optimizations for connected components that have an ownProps argument