Question

function Foo(f) {    var f = f;     } 

Here inside the function, variable f is local to the Foo (it has a function scope), but why is the variable f in the argument list not in conflict? Maybe because it is bound inside the Foo.arguments object?

In other languages we cannot declare an argument variable with the same name as a local variable.

How is this name ambiguity resolved? Or, How do you reference each of the two distinct f variables later in the method?

Answer 1

JavaScript does a couple of things that aren’t obviously intuitive – the one you’re interested in is called ‘hoisting’ – JS moves var declarations to the top of a function, where they serve the sole purpose of reserving this variable name as a local variable in the function’s scope. Sometimes, this leads to lots of weirdness. If the variable name is already reserved as a local variable (e.g. it’s an argument) the var declaration gets dropped entirely.

Another unintuitive part of JS is how it deals with argument variables and the arguments object (which are a bit special, as Hippo showed). That’s not necessarily what you’re interested in, though – what’s important for your example is that arguments also declare that variable name as local to the function.

The result of all this is that when you have a var f as well as an argument name f, the `var f’ gets dropped, and your example is equivalent to:

function Foo(f) {    f = f; } 

You can see this in Hippo’s example, because:

function foo(f) {     console.log(f); // --> 11     console.log(arguments); // --> array [11]     var f = 10;     console.log(f); // --> 10     console.log(arguments); // --> [10] (!!!) } 

Is equivalent to:

function foo(f) {     var f;     console.log(f); // --> 11     console.log(arguments); // --> array [11]     f = 10;     console.log(f); // --> 10     console.log(arguments); // --> [10] (!!!) } 

Is equivalent to:

function foo(f) {     console.log(f); // --> 11     console.log(arguments); // --> array [11]     f = 10;     console.log(f); // --> 10     console.log(arguments); // --> [10] (!!!) } 

For more details, read up section 10.1.3 – Variable Instantiation (bottom of p.37) in ECMA-262, the JS specification.