What will the reference be when a variable and function have the same name?

Question

I have a variable named foo and function named foo.

//variable followed by function declaration
var foo="bar";
function foo(){
  return "bar";
}
//function declaration followed by variable
function foo(){
  return "bar";
}
var foo="bar";
//When I call foo it returns string bar;
//When I enquired foo() it throws error

What's happening here?Why does the variable name override function declaration?

Answer 1

When I call foo it returns string bar;

Function declarations are hoisted to the top of their scope. The function definition are moved above by the compiler. And then the variable is overwriting to string.

Code is equivalent as

function foo() {
    return "bar";
}
// Overwriting the value
var foo = "bar"

So, in both the cases, the output will be 'bar'.

Note that function expressions are not hoisted.

For more information on function hoisting, see Javascript function scoping and hoisting

When I enquired foo() it is undefined

foo here is not a function, it's a string. So, foo() will throw an error

Uncaught TypeError: a is not a function(…)

Answer 2

In a clearer and more explicit way of declaring variables, the latter will take account:

    var foo = "bar";
    var foo = function () {
        return "bar";
    };
    console.log(foo);

output is a function

and the reversal:

var foo = function () {
    return "bar";
};
var foo = "bar";
console.log(foo);

has "bar" as output.

Answer 3

In JavaScript, functions are processed upon entering the corresponding scope. The variables are processed when the interpreter gets to their declaration. Therefore in your example, the functions are processed first, the name foo is used by the last function and then overwritten by the variables.

Note that if you declare your function like this

var foo = function() {}

it is actually not processed at the beginning and also overwriting the variables declared beforehand.