title: EmberJS 2.7 - using a closure action to call a function vs calling that function as an action
body: <p>In Ember with closure actions you can pass a function, like this:</p>
  
  <p>1</p>
  
  <pre><code>    &lt;div class="dropzone text-center" {{action (action openFilePicker)}}&gt;   
  &lt;!-- this calls a function (no quotes!) --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>instead of calling an action, like the following. </p>
  
  <p>2</p>
  
  <pre><code>    &lt;div class="dropzone text-center" {{action (action 'openFilePicker')}}&gt; 
  &lt;!-- this calls an action (quotes!) --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In (1) the code backing this component looks like this:</p>
  
  <pre><code>  openFilePicker: function () {
      let child = this.$('div:first-child');
      child.removeClass('is-dragging');
      child.html('&lt;h2&gt;Upload GPX Route&lt;/h2&gt;&lt;div class="dropzone-body-text"&gt;&lt;h5&gt;Drag and Drop here&lt;/h5&gt;- or -&lt;h5&gt;click anywhere here&lt;/h5&gt;&lt;/div&gt;');
      filepicker.pick({
        container: 'modal',
        maxSize: (5 * 1024 * 1024),
        services: ['COMPUTER']
      });
    }
  </code></pre>
  
  <p>This uses JQuery to remove some elements from the DOM, then calls another function (filepicker.pick) which is in an externally loaded JS file.</p>
  
  <p>In (2) the same code is inside an action:</p>
  
  <pre><code>actions: {
      openFilePicker: function () {
          let child = this.$('div:first-child');
          child.removeClass('is-dragging');
          child.html('&lt;h2&gt;Upload GPX Route&lt;/h2&gt;&lt;div class="dropzone-body-text"&gt;&lt;h5&gt;Drag and Drop here&lt;/h5&gt;- or -&lt;h5&gt;click anywhere here&lt;/h5&gt;&lt;/div&gt;');
          filepicker.pick({
            container: 'modal',
            maxSize: (5 * 1024 * 1024),
            services: ['COMPUTER']
          });
      }
  }
  </code></pre>
  
  <p>What are the pros and cons of doing this? I understand that (1) is not the recommended way of doing this, but surely (1) makes it easier to access other code in the <code>component</code> (like properties of the component, for example). As usual the <code>Ember</code> documentation doesn't seem to shed any light on this (not that I can find anyway). All I can find is <a href="http://miguelcamba.com/blog/2016/01/24/ember-closure-actions-in-depth/" rel="nofollow">this blog post</a> which makes the point to discourage calling arbitrary functions (otherwise why have actions in the first place?)</p>
  
  <p>So although this question can result in opinions, that's not what I am after. I want to understand what is the <code>SCOPING</code> difference between these two approaches? For example, when you are inside the function INSIDE the action, what is the scope difference from the point of view of the JS runtime? Is 'this' the same thing in both cases, for example?</p>