JavaScript does a couple of things that aren't obviously intuitive - the one you're interested in is called "hositing" - 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 function scome. Sometimes, this leads to lots of weirdness. If the variable name is already reserved as a local variable - say, because 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.