console.log(variableName) is printing the contents of a tag with the ID variableName, not my variable

Question

So I have this very weird issue where calling console.log in JavaScript is actually printing out the contents of a tag, whose id attribute is identical to the name of the variable I've passed in.

This is my code:

<div id="newTypes">
    <div id="noNewTypes" style="text-align: center; width: 100%; margin: 25% 0;">
        ...No new device types to show...
    </div>
    <div id="XNewTypes">
        <script>
            //newTypes has the same name as the parent container's id
            console.log(newTypes);
        </script>
    </div>
    <script>
        $("#btnNewTypes").on("click", function() {          
            if (newTypes.length == 0) {
                $("#noNewTypes").show();
                $("#XNewTypes").hide();
            }
            else {
                $("#noNewTypes").hide();
                $("#XNewTypes").show();
            }
        });
    </script>
</div>

newTypes is actually defined farther up in the code, it's an array containing just a bunch of strings. But I really don't think that's relevant to this issue.

Now, here's the output to the console of console.log(newTypes); (Sorry for the small image)

So I'm super confused about why this would be printing out the tag's contents instead of the variable name, because I am NOT calling console.log($("#newTypes").text());, I am passing the variable as parameter.

And then what's possibly even more bizarre, since this is causing an error for some reason, I decided first to take the easy way out and just rename the variable to newTypeArr, but then when I call console.log(newTypeArr);, what I get is this:

instead of the expected undefined.

I don't think this is relevant, I'm pretty sure the above HTML is all that's needed, but here's the whole part of the DOM that comes into play here that might be relevant. And as you can see, this whole thing is inside a PHP web page, again though, shouldn't be relevant.

<div id="tblLatest">
    <?php searchFilterForm("tblLatest"); ?> 
    <script>
        var dataLatest = <?php echo getLatestDeviceTypes(); ?>;
        for (val of dataLatest) {
            dataLatest[dataLatest.indexOf(val)] = val.replace("\n", "");
        }
        buildTable(dataLatest, "tblLatest");

        setTimeout(function() {
            newTypeArr = ((all, late) => {
                var ret = []
                for (val of late) 
                    if (all.indexOf(val) == -1)
                        ret.push(val);
                return ret;
            })(dataAll, dataLatest); 

        }, 1000);
    </script>
</div>
<div id="newTypes">
    <div id="noNewTypes" style="text-align: center; width: 100%; margin: 25% 0;">
        ...No new device types to show...
    </div>
    <div id="XNewTypes">
        <script>
            //newTypes has the same name as the parent container's id
            console.log(newTypes);
        </script>
    </div>
    <script>
        $("#btnNewTypes").on("click", function() {          
            if (newTypes.length == 0) {
                $("#noNewTypes").show();
                $("#XNewTypes").hide();
            }
            else {
                $("#noNewTypes").hide();
                $("#XNewTypes").show();
            }
        });
    </script>
</div>

Now, newTypes / newTypeArr, whichever it's named, is declared inside a setTimeout function, which is asynchronous, therefore it's likely that newTypes / newTypeArr will not be defined and would print undefined as I mentioned, however that's something I can work around. It should NOT be printing either the tag whose id matches newTypes or an error though, which is what's confusing me.

Answer 1

It is a little known fact, that providing an ID on an element tag, will create a corresponding GLOBAL javascript variable of the same name.

Kyle Simpson: Global DOM variables

Basically, you need to rethink, that you are essentially declaring the varibale twice, by naming the variable the same as your ID. Whats more, one of those declarations lies in the global scope, so will never be undefined.

The solution is simple. Don't use ID's defined in HTML as javascript variable names OR don't use id's on your HTML elements.

Does make you wonder why we need document.getElementById though right?

Answer 2

Getting an element using window[element id] or window[element name] is standard behavior implemented by all modern browsers since Firefox 14.

This answer explains why providing an element ID will return the contents of that element.

Regarding your variable problem, this is a scope issue. Defining your variable globally will fix the problem.

var newTypeArr;
...
    setTimeout(function() {
        newTypeArr = ((all, late) => {
            var ret = []
            for (val of late) 
                if (all.indexOf(val) == -1)
                    ret.push(val);
            return ret;
        })(dataAll, dataLatest); 

    }, 1000);
...
console.log(newTypeArr);