Functions with same names in JavaScript

Question

I tried to write a function on a JS file and another function with the same name in the page.
I expected an error but no error came and I got only the function from the JS file to execute.

How is this possible? Even if I write a function in a separate JS file, everything is rendered in a single html file. Then how come it is possible?

<script type="text/javascript" language="javascript" src="JScript.js"></script>
<script language="javascript">
  function Boo() {
    alert("Hai new");
  }
</script>

<button onclick="Boo();">Click</button>

and in the JS file

function Boo() {
  alert("Hai");
}

Because you've redefined the original function?

tttppp
– tttppp

2010-05-26 09:43:34 +00:00
Commented May 26, 2010 at 9:43 — tttppp
– tttppp, Commented May 26, 2010 at 9:43

Emil Sierżęga · Accepted Answer · 2019-10-29 12:43:40Z

39

One aspect that not many people ever think about with JavaScript is that if you define multiple functions with the same name then the last one defined will be the one that actually runs. JavaScript functions are not polymorphic the way that functions in many other languages are in that JavaScript doesn't care if the actual arguments defined for the functions are different as it can't distinguish between them on that basis. Where in other languages you might have myfunc(oneparm) and myfunc(parmone, parmtwo) as two separate functions with the one that gets run depending on the number of parameters passed, in JavaScript the last one defined will always be the one run regardless of the number of parameters.

http://javascript.about.com/library/blpolyfunc.htm

edited Oct 29, 2019 at 12:43

Emil Sierżęga

2,1413 gold badges35 silver badges41 bronze badges

answered May 26, 2010 at 9:44

LiamB

18.6k19 gold badges79 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

want2learn Over a year ago

not sure if both of these are same author or not. But if you copy you should recognize original author. forums.asp.net/t/…

KiKMak Over a year ago

@want2learn, its seems both the answers are from about.com JS page. So ideally its not a copy.

Paul Butcher · Accepted Answer · 2010-05-26 09:47:18Z

4

Named functions in javascript are more like variables. If you change the value of a variable, no error occurs, the variable simply has a new value. The same can be said of a function in javascript.

answered May 26, 2010 at 9:47

Paul Butcher

6,95630 silver badges40 bronze badges

Comments

Sandesh Adhikari · Accepted Answer · 2022-07-31 13:33:16Z

2

Case 1: Internal JS has higher priority than External JS, that s why the function written in internal JS override/replaces the other function(with same name) written in external JS file. Example Below:

Internal JS file:

<script type="text/javascript" language="javascript" src="JScript.js"></script>


   <script language="javascript">

     function Boo()
     {
       alert("Hai Internal");//this function will simply override the one 
                             //written in external JS file
     }

   </script>

<button onclick="Boo();">Click</button>

External JS file: JScript.js

function Boo()
     {
       alert("Hai External");
     }

Case 2: If two function with same name exits in the same file, the one that is declared last(close to the bottom of the file) will override the function above of it. Example below:

<script language="javascript">

  function test() {
    alert("test 1");
  }

  function test() { // this will override/replaces the above function
    alert("test 2");
  }

</script>

edited Jul 31, 2022 at 13:33

answered Jul 23, 2022 at 8:44

Sandesh Adhikari

314 bronze badges

2 Comments

Saeed Zhiany Over a year ago

Please read How do I write a good answer?. While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others.

deathrace Feb 28 at 8:01

@SaeedZhiany, at least he attempted to answer. what you did except criticizing?

Quentin · Accepted Answer · 2010-05-26 09:46:01Z

0

In JS you can redefine functions. A subsequent function with the same name as another function will overwrite it. (Subject to scope)

answered May 26, 2010 at 9:46

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Jujjuru · Accepted Answer · 2010-05-26 09:47:05Z

0

Because it gets overwritten by the latest one.

answered May 26, 2010 at 9:47

Jujjuru

6614 silver badges9 bronze badges

2 Comments

biju Over a year ago

Which is the latest one...the one we write in page or the one in the js file.Which one will be called first..?

Nielsvh Over a year ago

@biju Whichever one is last in the page source. In your example, the javascript file is included before your new definition of Boo in the document and therefore overwritten by the new definition in your document.

Amarghosh · Accepted Answer · 2010-05-26 09:47:11Z

0

JavaScript is highly forgiving in these aspects (like redeclaring a variable or function). The latest one hides or override the previous ones.

In your case, I assume that the js file was loaded after the function Boo inside the html was parsed. Thus when you click on the button, the definition of Boo in js file is the only Boo available.

answered May 26, 2010 at 9:47

Amarghosh

59.5k11 gold badges95 silver badges122 bronze badges

Collectives™ on Stack Overflow

Functions with same names in JavaScript

6 Answers 6

2 Comments

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related