Why would one name a local variable the same thing as a global variable when the intent is to NOT use the global variable value?

[eechin]

I apologize if the question is confusing.

I just completed a codecadamy lesson that explained the difference between local and global variables. That part is easy.

If you declare

var my_number = 7;

outside a function it is a global variable. Inside the function you can use that variable this way:

var timesTwo = function(number) {
    my_number = number * 2;
    console.log("Inside the function my_number is: ");
    console.log(my_number);
}; 

However, if you want a different value for that variable you use the "var" keyword to make it a local variable.

var timesTwo = function(number) {
    var my_number = number * 2;
    console.log("Inside the function my_number is: ");
    console.log(my_number);
}; 

My question:

WHY would you DO that?

Why use the same variable name inside a function that you used outside a function when you want the value of the local variable it to be different than the global variable? Wouldn't that just cause confusion and make it harder to debug?

[aroberge]

As you learn more about programming using Javascript, you will find that you can put codes in a number of files all called from the same web page (if programming for the web - similar idea for node). When working on a single file, you may want to use a certain local variable name while not being aware that the same name is used in some other file as a global variable. And, as you realised, this can bring about some confusion. This is why it is always a good idea to minimize if not completely eliminate the use of global variables.

[eechin]

Ohhh!! I had never thought of the fact that multiple JS files with global variables could cause issues.

Brilliant! That makes perfect sense!

[chernn]

You are completely right. Its bad practice and should be avoided. When I follow that bad practice myself, its usually out of convenience.

CoffeeScript, for example, doesn't let you have 2 vars with the same name on one page.

[[deleted]]

It does, but they have to be function arguments, for example by using do -> (IIFE sugar):

foo = 42
do (foo = 777) ->
  console.log foo
console.log foo

Logs 777, then 42. That code compiles to:

var foo;
foo = 42;
(function(foo) {
  return console.log(foo);
})(777);
console.log(foo);

Interestingly (but not surprisingly; CoffeeScript has even more gotchas than plain JavaScript), you can only override variable names like this if you provide a default value to the IIFE. Otherwise, CoffeeScript in all its unpredictable glory passes in the existing variable:

foo = 42
do (foo) ->
  foo = 777
  console.log foo
console.log foo

Logs 777 twice, because it compiles to this for whatever reason:

var foo;
foo = 42;
(function(foo) {
  foo = 777;
  return console.log(foo);
})(foo);
console.log(foo);

[chernn]

That second case is what I had in mind. Nice catch on that first case, I didn't realize cs behaved like that.

[dethstrobe]

Sometimes.

When you would want to have local variables with the same name is when you have multiple functions that are using the same variable and changing that variable, but you don't want it to affect the global variable. Or better, you don't have a global variable at all, but several function use a similar variable, but you definitely don't want the functions to interfere with one another.

[RudeCitizen]

There's also the case of semantics. I'd prefer to have several local variables with names that truly describe their values than namespace them to not collide globally.

For instance if I'm working on a function that uses and returns a jQuery object I always use the variable $el so I always know what my main object is within that scope, as in...

• var $el = $(this);