Javascript, using one single local object instead of many local variables

Question

I often use jslint and tools to verify my code for programming errors, etc...

During the course of my programming I often find that I need a local variable or a local function to do some simple things. So I go to my main single var statement at the top of my local scope and adjust it, sometimes breaking my creative flow. So sometimes instead I declare a single line var in the middle of my code to continue my programming and then move it at the top var statement during refactoring afterwards.

I had an idea today that i want to explore and did not find anything on it on Google or stackoverflow.

My idea is this, just declare a single temp object and use it for whatever the need. Ex: adding some attribute for a new variable or function.

So instead of :

// if I omit the last comma, the next variable will be a global
var variable1 = "Hello World!",  
variable2 = "Testing...";  

(... some code ...)
var variable3 = 42;

I would instead use :

var temp = {};
temp.variable1 = "Hello World!";
temp.variable2 = "Testing...";

(... some code ...)
temp.variable3 = 42;

So I do not risk polluting the global namespace, I declare variable as needed and do not struggle with that var statement since I always know that a variable preceded by "temp." is in the local scope.

Any comment or advice will be appreciated.

Answer 1

Ask yourself a question: have you ever seen anyone else doing this? I, personally, haven't. That should give you an indication that there are good reasons not to. Essentially what you're suggesting is "namespacing", isn't new. It is fine in many cases but here - for temporary variables - I'd suggest it highlights a code smell.

You mention pollution of the global namespace but this should rarely be an issue. By breaking your code down into functions, classes or modules, your variables will be enclosed in that scope.

So sometimes instead I declare a single line var in the middle of my code to continue my programming and then move it at the top var statement during refactoring afterwards.

This sounds bad. It sounds like your code blocks are very long, and that is an indication that you should be extracting functions from your code.

I'd also point out that you're also polluting the global namespace with a variable called temp in your example.

Think about common JavaScript codebases; jQuery only has the jQuery or $ variable exposed. Lodash/Underscore only has _. Backbone has "Backbone" and so on. Why is your application special? Just have one exposure point.

Another potential solution to your issue is to use a module system. When compiled, the code will be wrapped in a closure and not exposed to the outside world at all. Making it modular will also result in a tidier application.

Answer 2

The best way to avoid global scope pollution is to break your code down in small and independent functions and modules.

Your mention having to refactor your code because you have variable declarations in the middle of your code. I personally don't think you need to do that, I actually find code way easier to reason about when variables are declared as close to the place they are used as possible. As long as you are comfortable with the way the scope and hoisting works I don't see a reason why you should put all your declarations at the top of your functions.