title: Function returning not defined when called from script file
body: <p>After learning how to put all javascript code into a single page by declaring and calling functions like so:</p>
  
  <pre><code>function script() {
    const foo=document.querySelector('.foo');
  
    if(!foo) {
      return
    }
  
    code here....
  }
  
  script();
  </code></pre>
  
  <p>I am now getting an error:</p>
  
  <p><code>ReferenceError: timer is not defined</code></p>
  
  <p>The code works without any problem when run independent, but when nested within a function the timer is no longer defined. Here is the working code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let upgradeTime = 535680;
  let seconds = upgradeTime;
  
  function timer() {
    let days = Math.floor(seconds / 24 / 60 / 60);
    let hoursLeft = Math.floor(seconds - days * 86400);
    let hours = Math.floor(hoursLeft / 3600);
    let minutesLeft = Math.floor(hoursLeft - hours * 3600);
    let minutes = Math.floor(minutesLeft / 60);
    let remainingSeconds = seconds % 60;
  
    function pad(n) {
      return n &lt; 10 ? "0" + n : n;
    }
    document.getElementById("countdown").innerHTML = `${pad(days)}: ${pad(hours)}: ${pad(minutes)}: ${pad(remainingSeconds)}`;
    if (seconds == 0) {
      clearInterval(countdownTimer);
      document.getElementById("countdown").innerHTML = "Completed";
    } else {
      seconds--;
    }
  }
  let countdownTimer = setInterval("timer()", 1000);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span id="countdown" class="timer"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, if I place all the above code within the following function <code>timerScript()</code>, followed by a call to the function, the ReferenceError appears. I'm not even running the <code>if(!foo) { return }</code> but am still getting an error. </p>
  
  <p>What am I missing here?</p>
  
  <p><a href="https://codepen.io/jeremylucas/pen/NWPMjKw" rel="nofollow noreferrer">Here is the CodePen that does not work</a></p>
  
  <pre><code>function timerScript() {
  
    code here....
  
  }
  
  timerScript();
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function timerScript() {
    let upgradeTime = 535680;
    let seconds = upgradeTime;
  
    function timer() {
      let days = Math.floor(seconds / 24 / 60 / 60);
      let hoursLeft = Math.floor(seconds - days * 86400);
      let hours = Math.floor(hoursLeft / 3600);
      let minutesLeft = Math.floor(hoursLeft - hours * 3600);
      let minutes = Math.floor(minutesLeft / 60);
      let remainingSeconds = seconds % 60;
  
      function pad(n) {
        return n &lt; 10 ? "0" + n : n;
      }
      document.getElementById("countdown").innerHTML = `${pad(days)}: ${pad(hours)}: ${pad(minutes)}: ${pad(remainingSeconds)}`;
      if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById("countdown").innerHTML = "Completed";
      } else {
        seconds--;
      }
    }
    let countdownTimer = setInterval("timer()", 1000);
  }
  timerScript();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span id="countdown" class="timer"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>