OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

JavaScript function redeclaration and hoisting

  • Thread starter Thread starter mahmoud mirghani
  • Start date Start date
M

mahmoud mirghani

Guest
in this example in the MDN functions article: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./script/first.js"></script>
    <script src="./script/second.js"></script>
    <script>
        greeting();
    </script>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Code:
// first.js
const name = "Chris";
function greeting() {
  alert(`Hello ${name}: welcome to our company.`);
}

Code:
// second.js
const name = "Zaptec";
function greeting() {
  alert(`Our company is called ${name}.`);
}

why does the first greeting function execute but if i change the const name to just name

Code:
// second.js
name = "Zaptec";
function greeting() {
  alert(`Our company is called ${name}.`);
}

the second greeting method is executed?

my current understanding is that in the second case the greeting function in second.js is hoisted to the top so it overrides the first greeting method before the exception is thrown and the script is stopped but why doesn't this happen in the first case?

<p>in this example in the MDN functions article: <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions</a></p>
<pre class="lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./script/first.js"></script>
<script src="./script/second.js"></script>
<script>
greeting();
</script>
<title>Document</title>
</head>
<body>

</body>
</html>
</code></pre>
<pre class="lang-js prettyprint-override"><code>// first.js
const name = "Chris";
function greeting() {
alert(`Hello ${name}: welcome to our company.`);
}
</code></pre>
<pre class="lang-js prettyprint-override"><code>// second.js
const name = "Zaptec";
function greeting() {
alert(`Our company is called ${name}.`);
}
</code></pre>
<p>why does the first greeting function execute but if i change the const name to just name</p>
<pre class="lang-js prettyprint-override"><code>// second.js
name = "Zaptec";
function greeting() {
alert(`Our company is called ${name}.`);
}
</code></pre>
<p>the second greeting method is executed?</p>
<p>my current understanding is that in the second case the greeting function in second.js is hoisted to the top so it overrides the first greeting method before the exception is thrown and the script is stopped but why doesn't this happen in the first case?</p>
 
Top