Recently, I encountered an error message when trying to create a new variable on my JavaScript file. I was using the "const" or "let" keyword to declare the variable, but I kept getting an error message.
So, I decided to use the var keyword declaration instead, and it was working fine. However, this bug continued to perturb me. I couldn't understand why the const and let keywords weren't working, and it was only until I realized this very simple mistake that I had made unknowingly.
I had linked the script tag twice in my HTML file, once on the head tag, and once inside the body tag.
So what was happening under the hood was that it was defining the same variable twice, which throws an error with either const or let, but it was allowed with the "var" keyword because var allows itself to be overridden with declarations.
For example, consider the following code:
<html>
<head>
<script src="/script.js"></script>
</head>
<body>
<p is="paragraph">Javascript bug</p>
<div id="javascript-div"></div>
<script src="script.js"></script>
</body>
</html>
In the above code, I have linked the script.js file twice, once in the head tag and once in the body tag. So, if in the script.js file, I have the following code:
It will throw an error because we cannot reassign a value to a variable declared with "const" keyword. But if I use the "var" keyword to declare the variable, it will not throw an error.
I stopped getting the error after I removed the script file from the head tag
So, that's it. If you ever come across this error, check your script tag to confirm if you haven't linked your script tag twice. It's a small mistake, but it can cause big problems. Always double-check your code and make sure that everything is in the right place.
This will save you a lot of time and frustration in the long run. Remember, programming is all about attention to detail, and taking the time to understand and fix bugs will make you a better and more efficient programmer.