What happens when JavaScript variable name and function name is the same?

Question

I have the following code, where I declare a function and after it, a variable with the same name as the function:

function a(x) {
    return x * 2;
}

var a;
alert(a);

I expected this to alert undefined, but if I run it, the alert will display the following:

function a(x) {
    return x * 2
}

If I assign a value to the variable (like var a = 4), the alert will display that value (4), but without this change a will be recognized as a function.

Why is this happening?

Olivenite

What is it you would expect? Variables and functions share the same namespace in JavaScript, so they override each other. – Rein

@Rein I would expect a to be undefined – Olivenite

if function name and variable name are same then JS Engine ignores the variable. – Kuykendall

With var a you create a new variable. The declaration is actually hoisted to the start of the current scope (before the function definition). Afterwards the name is used up by the function of the same name. This is what you get when using alert(). – Rein

The engine first hoists variables (to undefined). then it hoists function declarations. – Brawny

Answer 1

Functions are a type of object which are a type of value.

Values can be stored in variables (and properties, and passed as arguments to functions, etc).

A function declaration:

• Creates a named function
• Creates a variable in the current scope with the same name as the function (unless such a variable already exists)
• Assigns the function to that variable
• Is hoisted

A var statement:

• Creates a variable in the current scope with the specified name (unless such a variable already exists)
• Is hoisted
• Doesn't assign a value to that variable (unless combined with an assignment operator)

Both your declaration and var statement are hoisted. Only one of them assigns a value to the variable a.

Henning

Answer 2

In JavaScript both function declaration and variable declarations are hoisted to the top of the function, if defined in a function, or the top of the global context, if outside a function. And function declaration takes precedence over variable declarations (but not over variable assignment).

Function Declaration Overrides Variable Declaration When Hoisted

First you declare a variable:

var a; // value of a is undefined 

Second, the value of a is a function because function declaration takes precedence over variable declarations (but not over variable assignment):

function a(x) {
  return x * 2;
}

And that is what you get when you call alert(a);.

But, if instead of declaring a variable you make variable assignment: var a = 4; then the assigned value 4 will prevail.

Ought

Function declarations are hoisted too. – Henning

Yes @Henning but expressions are not or named expressions – Tangelatangelo

Yes @Quentin: Both function declaration and variable declarations are hoisted to the top of the containing scope. And function declaration takes precedence over variable declarations (but not over variable assignment). – Ought

Answer 3

If you use a function name as variable name, its value is replaced by function body. So var a becomes your function a and thus your alert displays function a.

Edit But if you assign value to a like var a = "xya";. Then it function will be replaced by variable. As per Order of precedence

1. Variable assignment takes precedence over function declaration
2. Function declarations take precedence over variable declarations

Lagas

Answer 4

You should also remember that var a is hoisted, which makes it more like this

var a; // placed

function a(x) {
  return x * 2;
};

var a; // removed
alert (a); // a is replaced by function body

Remember that var a is hoisted, so if you assign 4 to a:

var a; // placed

function a(x) {
  return x * 2;
};

var a = 4; // removed
a = 4 // added

alert (a); // a is now 4

Tangelatangelo

Answer 5

First hoisting takes place. Function declaration takes precedence over variable declaration during hoisting.

During execution of the code, if variable is assigned at any point, then it is replaced, otherwise it remains the same function.

(Note: First read the code from Line 4 to Line 8. Then again read from beginning to end.)

console.log(a); // f a(){...} - Executed just after hoisting
console.log(b); // f b(){...} - Executed just after hoisting

var a = 100; // here variable is assigned
function a(x) {...};

function b(x) {...};
var b; // only a declaration here

console.log(a); // 100
console.log(b); // f b(){...}

Tip

Answer 6

ES6 comes with a better solution by defining SyntaxError: Identifier (?) has already been declared when using let / const instead of var.

let

function foo () {}
let foo;
// => SyntaxError: Identifier 'foo' has already been declared

const

function foo () {}
const foo = 1;
// => SyntaxError: Identifier 'foo' has already been declared

Note that const foo; does not work. It will cause SyntaxError: Missing initializer in const declaration

Photoelasticity