0

I tried to read the current state of my JavaScript by checking if a particualr variable had been defined:

if (app!=undefined) {...}

much to my surprise, app turned out to be defined and referred to an element in the DOM that had id="app".

Once JavaScript set its own variable, that reference disappeared. Deleting the variable brings back the dom-reference.

What gives? Or, to give a more specific question: Why is that so, how is it defined, and how can I check for the existence of a variable that turns out to be null / false / undefined if the variable hasn't been defined regardless of what IDs are part of the DOM?

ETA: https://jsbin.com/jehoxodeqi/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>scope test</title>
</head>
<body>

<script  type="text/javascript">
 console.log ("--1");
 try {
 console.log (domId);
 }
 catch (e) {
    console.log (e);
 }


      if (typeof domId === 'undefined' || !domId) {
    console.log ("desired behavour.");
  }

</script>

<div id="domId">DOM ID 1</div>


<script  type="text/javascript">

console.log ("--2");
if (typeof domId === 'undefined' || !domId) {
    console.log ("desired behavour... alas, it is defined.");
  }
    console.log (domId);

  if (typeof domId === 'undefined' || !domId) {
    console.log ("desired behavour... alas, it is defined.");
  }

    domId = "some String";
    console.log ("--3");
    console.log (domId);

    delete domId;
    console.log ("--4");
    console.log (domId);

    domId.remove();
    console.log ("--5");
    try {
 console.log (domId);
 }
 catch (e) {
    console.log (e);
 }

    console.log ("-- end --");
</script>
</body>
</html>

This shows what I've been trying to do originally.

I would expect for the variable to only be defined once I actually declare it in code. So, is there a purpose behind this, and if so, why is the variable name space dynamically overloaded by the DOM?

Ramesses
  • 11
  • 4

1 Answers1

-3

If you check for a variable that hasn't been defined by simply calling its name, you'll get an error.

alert(foo); //error if not defined

What you can do is check on its parent namespace. For global variables this means window. This won't error, as it'll be interpreted as a request for a property, and an undefined property comes back undefined, not as an error.

alert(window.foo); //undefined
foo = 'bar';
alert(window.foo); //'bar'
Mitya
  • 33,629
  • 9
  • 60
  • 107
  • I might be misunderstanding something, but a quick demo (https://jsfiddle.net/davidThomas/qp1Lmnw3/) seems to show that `window.foo` exists regardless of any explicit assignment so long as an element with that `id` exists (regardless of using `'strict`' mode or not)? The results seem consistent between Chromium 66.0.x and Firefox 60.0.1 (both Ubuntu 17.10). – David Thomas Jun 03 '18 at 17:49
  • > If you check for a variable that hasn't been defined by simply calling its name, you'll get an error. That's what I thought. But if there exists an element with the same ID in the DO_M as the variable name I was using, that DOM element is mapped to the variable. I'll update my question with a demo later. To clarify: I need to see if the variable has been declared. It should throw an error, but it doesn't because of this behaviour. – Ramesses Jun 03 '18 at 20:22
  • @DavidThomas : Exactly that. Tested on fairly recent versions of Chrome, FF and Edge, and they all do this. I'm wondering if that is by design, and can't imagine what the point would be. – Ramesses Jun 03 '18 at 20:28