in this example in the MDN functions article: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions
<!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>
// first.js
const name = "Chris";
function greeting() {
alert(`Hello ${name}: welcome to our company.`);
}
// 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
// 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?