title: JavaScript anonymous function parameters and calling arrangement
body: <p>In a tutorial related to React, which I am watching on YouTube:
  <a href="https://www.youtube.com/watch?v=h3KeJRKYpj8" rel="nofollow noreferrer">https://www.youtube.com/watch?v=h3KeJRKYpj8</a></p>
  
  <p>there was a piece of code that had the following (minute 13:40 in the video)</p>
  
  <pre><code>    const setCounterWithValue = (value) =&gt; {
          setCounter(value)
      }
  </code></pre>
  
  <p>this function gets called from a button component in the following code:</p>
  
  <pre><code>&lt;button onClick={() =&gt; setCounterWithValue(counter -1)}
  </code></pre>
  
  <p>The video tutorial suggested a way to shorten this function call and make it simpler.
  So what he did was modifying the code to be as follows (minute 14:30 in the video):</p>
  
  <pre><code>const setCounterWithValue = value =&gt; () =&gt; {
      setCounter(value)
  }
  </code></pre>
  
  <p>which meant the button component became as follows:</p>
  
  <pre><code>&lt;button onClick={setCounterWithValue(counter -1)}
  </code></pre>
  
  <p>So my problem here is that I was expecting the setCounterWithValue to be structured as the following:</p>
  
  <pre><code>const setCounterWithValue = () =&gt; (value) =&gt; {
      setCounter(value)
  }
  </code></pre>
  
  <p>so empty () then pass value which triggers the setCounter.
  I would like to have some deep explanation and some resources (like articles and videos) that explain this in further details.</p>