title: Why I can't access a JavaScript function defined in a .js file from another .js file?
body: <p>I am pretty new to JavaScript, and I was experimenting with the global scope following a tutorial.</p>
  
  <p>In this tutorial I have 3 files:</p>
  
  <p>1) <strong>index.htm</strong>:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
  
      &lt;body&gt;
          &lt;h1&gt;HELLO WORLD !!!&lt;/h1&gt;
  
          &lt;script src="app.js"&gt;&lt;/script&gt;
          &lt;script src="utility.js"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see I include 2 JavaScript files.</p>
  
  <p>2) <strong>app.js</strong>:</p>
  
  <pre><code>var person = 'Torny';   // When I call the logPerson() function this line override the person variable value into the global stack
  
  //console.log(person);
  
  logPerson();
  </code></pre>
  
  <p>3) <strong>utility.js</strong> in which is defined the <strong>logPerson()</strong> function defined into the <strong>app.js</strong> file:</p>
  
  <pre><code>var person = 'Steve';
  
  function logPerson() {
      console.log(person);
  }
  </code></pre>
  
  <p>Ok, so I expected the following behavior:</p>
  
  <p>Into the <strong>app.js</strong> file set the string 'Tony' as value of the <strong>person</strong> variable, the call the <strong>logPerson()</strong> function declared into the <strong>utility.js</strong> file and so print 'Tony' in the console.</p>
  
  <p>The problem is that when I try to open the <strong>index.htm</strong> file into FireFox, I go into FireBug console and instead the 'Tony' value I obtain this error message:</p>
  
  <pre><code>ReferenceError: logPerson is not defined
  </code></pre>
  
  <p>So it seems that from the <strong>app.js</strong> file it can't see the <strong>logPerson()</strong> function that is defined into the <strong>utility.js</strong> file and imported.</p>
  
  <p>Why? What am I missing? what is wrong?</p>