Function and variable with the same name

Question

The following code-snippet is a test to see what happens when a function and a variable share the same name in the same scope. In Chrome it appears the variable definition has precedence in reference.

Can the named function be executed, or is it completely obscured by the variable declaration?
Is it the standard behavior in Javascript that variables take precedence over functions with the same name?

Sorry for the two part question, but it seemed wasteful to ask two separate questions.

Code:

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>

            var overlapping = function() { return 'this is a var holding an anonymous function' };

            function overlapping()
            {
                return 'this is a function definition';
            }

            output( overlapping, 'overlapping' );
            output( overlapping(), 'overlapping()' );

            function output( expression, description )
            {
                document.writeln( '<li>' + ( description ? ('<i>' + description + '</i>: ') : '' ) + expression + '</li>' );
            }
        </script>
    </body>
</html>

I'm guessing that Javascript hoists functions to the top, making the variable definition occur after the function definition. Therefore the last definition — the variable — is the used one. — Waleed Khan, Feb 24 '13 at 22:55

score 18 · Accepted Answer · answered Feb 24 '13 at 22:57

18

In JavaScript, function definitions are hoisted to the top of the current scope. Your example code therefore reads as:

var overlapping = function() { return 'this is a function definition' };
var overlapping = function() { return 'this is a var holding an anonymous function' };

This is some good read about this topic: http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

answered Feb 24 '13 at 22:57

Niko

25,682
7
85
108

2

Great article. The fact that you can overwrite a named function with any value seems really problematic, although there must be some design advantage. Going into this question I assumed that the variable and function were held as two discreet items because no error was thrown. – Mark Fox Feb 24 '13 at 23:46
2

Also useful: 1) http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname 2) http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ – Mark Fox Feb 25 '13 at 04:01

SridharKritha · Answer 2 · 2020-09-01T13:26:49.827

Can the named function be executed, or is it completely obscured by the variable declaration?

Function declaration will not be executed there. Because of the same name usage the function expression overrides the function declaration.
Is it the standard behavior in Javascript that variables take precedence over functions with the same name?

Is not about preferring one over other. In JavaScript, function declarations are hoisted to the top of the enclosing function or global scope. Function expression of same variable name overrides the function declaration.

Example:

   foo(); // Function Declaration - will be hoisted
   foo = function() { console.log("Function Expression  - will NOT be hoisted"); };
   function foo()   { console.log("Function Declaration - Will be hoisted"); }
   foo(); // Function Expression  - will NOT be hoisted

Function and variable with the same name

2 Answers2

Linked

Related