Assigning `var location` in global scope redirects to non-existent file

Question

Assigning `var location` in global scope redirects to non-existent file

945 Views Asked by Zhaowei Wu At 19 October 2024 at 19:20

I have an HTML file test.html where I have two variables both named location, one global and one local. But when I open it in browser it just says Your file was not found, and the address bar shows file://Los%20Angeles instead of file://test.html as expected. Why?

<html>
<body>
<script type="text/javascript">
var location = "Los Angeles"
function showLocation() {
    var location = "San Francisco"
    document.write(location)
}
</script>
<input type="button" onclick="showLocation()" value="Show Location"/>
</body>
</html>

Original Q&A

There are 2 best solutions below

Mark On 04 September 2017 at 02:07

Setting the global location causes the browser to go to that URL. It’s not a reserved word¹ — it’s a property defined on the global object (globalThis, which is window in the Web).

In your example, you are setting the global location to "Los Angeles", which causes the browser to navigate to that as if it was a relative URL.

Setting var location = "San Francisco" inside your function has no effect on the window object because the running execution context inside a function has its own variable environment, which is different from the one in global scope.

So you could do this:

function showLocation() {
    var location = "San Francisco";
    
    document.write(location)
}

and it will work as expected. It will write the string "San Francisco" to the document.

If you are on a modern browser, you can see what’s going on by trying so set 'location' with 'let':

let location = "los angeles";

Now you will get an error that says something like:

SyntaxError: Can’t create duplicate variable that shadows a global property: 'location'.

¹: If you want to know what the reserved words are in JavaScript, take a look at the MDN documentation.

**Kavindra** · Accepted Answer

Kavindra On 04 September 2017 at 01:52 BEST ANSWER

'location' is a reserved keyword in javascript. Just change your variable name into something else. For more info about reserved words: https://www.w3schools.com/js/js_reserved.asp

Assigning `var location` in global scope redirects to non-existent file

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in WINDOW.LOCATION

Trending Questions

Popular # Hahtags

Popular Questions