title: Defining JavaScript functions
body: <p>In my project (browser context only) I want to use a JS code quality tool. I've tried both <code>jslint</code> and <code>eslint</code>. I want linter to help me make my code clean, clear, errorproof and improve its overall quality. What I don't want to do is I don't want to write some dirty hacks or use bad practices just to make linters happy.</p>
  
  <p>I'm concerned about only one issue. Both of them reported a problem that I'm using a function before it was defined. Obviously in the following code snippet <code>bar</code> won't be called before it's definition.</p>
  
  <pre><code>function foo() {
      bar();
  }
  
  function bar() {
  
  }
  
  foo();
  </code></pre>
  
  <p>In this simplest scenario I can just move <code>bar</code> before <code>foo</code>. But there are cases when it's just impossible. First function uses the second, the second uses the third and the third uses the first.</p>
  
  <p>It seems like I can make linters happy by declaring all functions before their definitions like this.</p>
  
  <pre><code>var foo;
  
  var bar;
  
  foo = function() {
      bar();
  };
  
  bar = function() {
  
  };
  
  foo();
  </code></pre>
  
  <p><strong>The questions are:</strong></p>
  
  <ul>
  <li>Is the first code snippet broken? I guess - not.</li>
  <li>Is the first code snippet error-prone? I guess - maybe.</li>
  <li>Is it a good practice to organize code like the second snippet (declare functions before defining them)?</li>
  <li>If <code>yes</code> I should stick to this practice, shouldn't I?</li>
  <li>If <code>no</code> what is the good practice regarding this issue?</li>
  <li>Is this linter error worth paying attention to or should I just disable it?</li>
  </ul>