title: Difference between using void vs wrapping in parens for IIFE void function() vs (function())
body: <p>The common practise for creating modules is to wrap them in parens so you won't leak any variables outside of the module (when concatenating etc). </p>
  
  <p>There is also <code>void</code> operator, which evaluates a given expression and returns <code>undefined</code>. (See on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void%20MDN">MDN</a>)</p>
  
  <p><strong>I wonder what is the reason behind preferring wrapping functions in parens instead of using <code>void</code>. Is it historical, is it something related to concatenation, else?</strong></p>
  
  <p>I know that you can have problems with concatenation when one of the files has a missing a semicolon, leading to nasty problems till you notice it.</p>
  
  <h2>Examples</h2>
  
  <p>Say, module1.js (notice the missing comma):</p>
  
  <pre><code>(function () {
      return function () {
          console.log('module1. I should not be called');
      };
  })()
  </code></pre>
  
  <p>and, module2.js:</p>
  
  <pre><code>(function () {
      return function () {
          console.log('module2. I should not be called either');
      };
  })();
  </code></pre>
  
  <p>If you concat these scripts into a bundle, it will produce this:</p>
  
  <pre><code>(function () {
      return function () {
          console.log('module1. I should not be called');
      };
  })()(function () {
      return function () {
          console.log('module2. I should not be called either');
      };
  })();
  </code></pre>
  
  <p>Since both modules(files) return a function, the second supposedly IIFE becomes an invocation of the <em>return value of the first module</em>, effectively calling <code>console.log</code>. The common workaround for this is to declare your module with <code>!(function (){})();</code> which forces the returned value to be a boolean.</p>
  
  <p>If however, you were to use <code>void</code>, like:</p>
  
  <pre><code>void function () {
      return function () {
          console.log('module1. I should not be called');
      };
  }()
  </code></pre>
  
  <p>The concatenated file will still be wrong, but you will notice the error on the first run, therefore more easily noticed. See below.</p>
  
  <pre><code>void function () {
      return function () {
          console.log('module1. I should not be called');
      };
  }()void function () {
      return function () {
          console.log('module2. I should not be called either');
      };
  });
  </code></pre>
  
  <p>This throws <code>Unexpected token void</code>. As fas as the modules are concerned, I believe <code>!(function(){}()</code> and <code>void function(){}()</code> achieve the same effect. But I feel like <code>void</code> looks more clean (subjective) than wrapping a function with params and prepending <code>!</code> to it.</p>
  
  <p><em>I am missing something? Wouldn't it be better if we used <code>void</code>?</em></p>