Javascript global variable naming conflicts : <p>A newbie learning javascript :)</p>

<p>This is my html page and the associated js code</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; A Basic Function &lt;/title&gt;
&lt;link rel="stylesheet" href="css/c03.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Travelworth&lt;/h1&gt;
&lt;div id="message"&gt;Welcome to our site!&lt;/div&gt;
&lt;script src="js/basic-function.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>basic-function.js</strong></p>

<pre><code>var msg="A New Message"; //Line 1
var msg="A Second Message";//Line 2

function updatemessage()
{

var e = document.getElementById('message');
e.textContent = msg;
}

updatemessage();
</code></pre>

<p><strong>Q1:-</strong></p>

<p>This webpage displays the message from the Line2 instead of Line1.</p>

<p>I am guessing this is because the "msg" variable declared in Line 2 is considered the "latest" and the interpreter has proceeded with that.</p>

<p>Is my assumption right ?</p>

<p><strong>Q2:-</strong></p>

<p>If that is the case, then there will be instances where a webpage may utilize multiple js files written by different people.</p>

<p>How the naming conflict will be handled on global variables between these two different js files referenced in the same webpage ?</p>

<p>Can someone explain ?</p>
