I ran into an interesting issue the other day and was wondering if someone could shed light on why this is happening. Here is what I am doing (for the purposes of this example I have dumbed down the example somewhat):
- I am creating a globally scoped variable using the square bracket notation and assigning it a value.
Later I declare a var with the same name as the one I just created above. Note I am not assigning a value. Since this is a redeclaration of the same variable the old value should not be overriden as described here: http://www.w3schools.com/js/js_variables.asp
//create global variable with square bracket notation window['y'] = 'old'; //redeclaration of the same variable var y; if (!y) y = 'new'; alert(y); //shows New instead of Old
The problem is that the old value actually does get overriden and in the above eg. the alert shows 'new' instead of 'old'. Why ?
I guess another way to state my question is how is the above code different in terms of semantics from the code below:
//create global variable
var y = 'old';
//redeclaration of the same variable
var y;
if (!y) y = 'new';
alert(y); //shows Old
Update 1 : Based on the some of the comments and answers I am rephrasing the example to be more reflective of my original problem.
Create 2 javascript files with the following content : Script1
//create global variable with square bracket notation
window['y'] = 'old';
Script2
//redeclaration of the same variable
var y;
if (!y) y = 'new';
alert(y); //shows New instead of Old in IE
Include these 2 files in your html file
<html>
<head></head>
<body>
<script type="text/javascript" src="my.js"></script>
<script type="text/javascript" src="my2.js"></script>
</body>
</html>
Opening this page in Firefox and Chrome alerts 'old' which is the expected behavior. However in IE 8 the page will actually alert 'new'
Update 2 question moved here : Redeclared javascript global variable overrides old value in IE