Musings on the .js namespace

JavaScript
1

for the sake of brevity, assume the the situations am referring to all occur within the same context and scope.

I began to ponder about this possible issue when toying around with some .js:

function testX(){ alert ('!'); } // this is also equivalent to: testX=function (){ alert ('!'); } 
testX = 10;

Begin used to PHP, I would have expected that you could have a variable AND a function that, essentially, share the same name. Of course, thats not the way .js works; there is only ONE testX which contains the value of 10 Still, it really rubs me the wrong way that .js behaves this way. it’s just a minor thing, mind you, having little impact on how i code and probably stemming from me having had my formative programing experiences using PHP.

But one thing does strike me as ‘fragile’…

The DOM automatically creates a named object element for every HTML element with an ID.

In other words, given :

<div id='anExample'>Sample content<div>

don’t HAVE to do this :

  alert (document.getElementByID('anExample').innerHTML);

since, anExample is already an element the dom… you can simplify the above to:

 alert (anExample.innerHTML);

GREAT! That’s kinda convenient, but now it makes em wonder…
what is going to happen if I or someone else give IDs to elements in the markup that , inadvertently, coincide with variable/function names in some of the imported/or applied scripts in that page? How is integrity maintained?

eg.:

<script  type="text/javascript"> aVal='i need to be TEXT';</script>
<div id='aVal'>Sample content</div>

or

<script  type="text/javascript"> function foo(){ alert('am a crucial function!!!'); } </script>
<div id='foo'>Sample content</div>

Scotty if I am being vague, I haven’t encountered a difficulty with this yet, just thinking theoretically. but I just wanted to know what you guys thought about this, if any one had run into issues, and how you had resolved them.

1 Like
2

Interesting. Testing in Firefox it acts like JavaScript objects trump elements as long as it comes before the element

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<input id="testing" type="hidden" value="an_input"/>
<script>alert(testing.value);</script>
<script>
var testing = {"value": "something"};
</script>
<script>alert(testing.value);</script>
</body>
</html>
3

This is why we have a few common practices that help to avoid issues.

One of them is where we use document.getElementById or document.querySelector, and avoid polluting the global namespace. Further advice is well found at articles such as Essential JavaScript Namespacing conventions

1 Like
4

Wrapping all the JavaScript in an IIFE is also a good idea as then your script doesn’t use the global namespace and so doesn’t conflict with whatever garbage the browser pollutes it with.

1 Like
5

Well THAT’s the thing… whether you use getElementByID() or not, the object is AUTOMATICALLY stored in a variable of the same name as the ID of the HTML element; thus the name pollution could come from someone else merely coding the HTML markup!

It seems ,as Mittineague and felgall, have mentioned a good idea to wrap scripts or put them AFTER the mark ups… tho this seems somewhat counter intuitive , especially when importing libraries.

6

functions are first-class citizens in JS (but not in PHP). hence a function is nothing special compared to other objects and behaves the same way as those.

besides that, variables and functions have different naming conventions in PHP (variables must start with a $, functions must not. this makes it an either/or)

7

Only in some browsers - it isn’t standard so there are plenty of browsers that don’t do it.

You shouldn’t be using the global namespace for anything at all in JavaScript anyway except perhaps for passing a reference from a library into your own code.

If you do use the global namespace then adding a second script to the same page can cause crashes (any you never know what scripts your visitors are adding)

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.