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");
}

Answer 1

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

Answer 2

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.