Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why are my JavaScript function names clashing?

I wrote the following script just to see what happens when a variable and a function that has a function assigned to it have their names clash:

var f = function() {     console.log("Me original."); }  function f() {     console.log("Me duplicate."); }  f(); 

The output I'm getting is "Me original." Why was the other function not called?

Also, if I change my original assignment to var f = new function() {, I get "Me original", followed by a TypeError saying object is not a function. Can someone please explain?

like image 583
ankush981 Avatar asked May 27 '14 12:05

ankush981


People also ask

What happens if we have two functions with same name in JavaScript?

JavaScript supports overriding not overloading, meaning, that if you define two functions with the same name, the last one defined will override the previously defined version and every time a call will be made to the function, the last defined one will get executed.

Can function name and variable name be same in JavaScript?

Variables and functions share the same namespace in JavaScript, so they override each other. if function name and variable name are same then JS Engine ignores the variable. With var a you create a new variable. The declaration is actually hoisted to the start of the current scope (before the function definition).

Can function names have numbers JavaScript?

JavaScript Function SyntaxFunction names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...) Function parameters are listed inside the parentheses () in the function definition.

What is fname in JavaScript?

Definition and UsageThe name attribute specifies the name of a form. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.


2 Answers

Function declarations are hoisted (moved to the top) in JavaScript. While incorrect in terms of parsing order, the code you have is semantically the same as the following since function declarations are hoisted:

function f() {     console.log("Me duplicate."); } var f = function() {     console.log("Me original."); }   f(); 

Which in turn, with the exception of the function's name is the same as:

var f = function() {     console.log("Me duplicate."); } var f = function() {     console.log("Me original."); }   f(); 

Which in turn, because of variable hoisting is the same as:

var f; f = function() {     console.log("Me duplicate."); } f = function() {     console.log("Me original."); }  f(); 

Which explains what you're getting, you're overriding the function. More generally, multiple var declarations are allowed in JavaScript - var x = 3; var x = 5 is perfectly legal. In the new ECMAScript 6 standard, let statements forbid this.

This article by @kangax does a fantastic job in demystifying functions in javascript

like image 187
Benjamin Gruenbaum Avatar answered Sep 18 '22 16:09

Benjamin Gruenbaum


If doesn't look like anyone answered your follow-up question so I'll answer it here, though you should generally ask follow-up questions as separate questions.

You asked why this:

var f = new function() {     console.log("Me original."); }  function f() {     console.log("Me duplicate."); }  f(); 

prints out "Me original." and then an error.

What is happening here is that the new causes the function to be used as a constructor. So this is equivalent to the following:

function myConstructor() {     console.log("Me original."); } var f = new myConstructor();  function f() {     console.log("Me duplicate."); }  f(); 

And thanks to the function hoisting that Benjamin explained, the above is essentially equivalent to this:

var myConstructor = function() {     console.log("Me original."); }; var f = function() {     console.log("Me duplicate."); };  f = new myConstructor();  f(); 

This expression:

var f = new function() {     console.log("Me original."); } 

causes a new object to be constructed and assigned to f, using an anonymous function as the constructor. "Me original." is printed out as the constructor executes. But the object that is constructed is not itself a function, so when this eventually executes:

f(); 

you get an error, because f is not a function.

like image 44
JLRishe Avatar answered Sep 19 '22 16:09

JLRishe