var x = x || "default val" not getting set properly if x is defined above it

Question

HTML:

<script type="text/javascript">
  var x = "overriden";
</script>
<script src="myjs.js"></script>

myjs.js:

$(document).ready(function(){
  var x = x || "default val";
  alert(x); // this alerts "default val" and not "overriden"
});

For some reason, x is ending up as "default val" and not "overriden", even tho initially I'm setting it to "overriden" before I even include the script reference to myjs.js.

Any idea as to why this is happening? I'm trying to enable the hosting page to set an override for a variable that's used in an included js file, otherwise use the default val.

Answer 1

What you have after variable declaration hoisting is applied:

var x;
x = 5;

$(document).ready(function(){
    var x;
    x = x || "default";
});

It looks at the closest x and sees it's value is undefined which is a falsy value, so x gets set to "default".

---

You would be fine if they were in the same scope, because the declarations are always hoisted above assignments so:

var x = 5;

var x = x || "default";

Is actually just

var x;

x = 5;
x = x || "default";

---

This was suggested which is completely pointless:

$(document).ready(function(){
    x = x || "default";
});

It will throw a ReferenceError if x is not defined.

---

So either do the check in the same scope or do something like:

$(document).ready(function(){
    var x = window.x || "default";
});

Invalid property reads don't cause a ReferenceError but just return undefined instead.