Why can I create two functions with the same Javascript signature?

Question

I’m having doubts about a certain issue in Javascript, suppose the following scenario below:

function teste() {
  console.log("teste1");
}

function teste() {
  console.log("teste2");
}

teste();

In that case I realized that my method teste() it was kind of overwritten, I don’t know if that’s really what happens, when we call the same just the teste2 that is displayed. Now the doubts regarding that:

1. This is really the expected behavior when we declare 2 methods with the same name and parameters in js, it will always override and will prevail the last declared?
2. Is there any explanation for this behavior, if yes what it is explanation?
3. Is there any way to do it that causes some mistake or something if someone makes this mistake and declares 2 methods with the same name and parameters?
4. In case 3 has any way of doing, what to do if the functions are in different js files?

Answer 1

I believe you have technically already answered "it overwrites", but another is also necessary to understand a feature of function ... (), then I’ll explain a behavior for two ways to declare a function and then I’ll explain this.

In Javascript you can do:

function x() {
}

x();

And setting in the variable:

x = function() {
}
x();

In both cases it will work, however function x() is different from x = function(), for if I do this:

Will work:

x();

function x() {
}

It won’t work, you’ll accuse how undefined:

x();

x = function() {
}

Now the reason, Javascript, as well as many languages, make a "preprocessing" of some things stated, ie when it does this:

x();

function x() {
}

It will occur before run time and will leave all functions that have been declared so function ...() ready for use prior to actual execution, i.e.:

function teste() {
  console.log("teste1");
}

teste();

function teste() {
  console.log("teste2");
}

teste();

See that appears teste2 twice.

Because this occurs

The "Ecmascript engine" (Javascript) of the browser will process its way (it is likely that although internally they work alike they can still work differently to achieve the same result) and it will probably only consider the newer function, that is, at the time of execution the first teste() probably no longer exists.

Even at runtime probably the Javascript is pre-processed, if you look at the following example, even calling x() before instead of displaying oi, will initially display 11:

function x() {
   console.log("oi");
}

var a = 10;

window.onload = function() {
     document.getElementById("test").onclick = function() {
         x();

         function x() {
             console.log(++a);
         }
     };
};

<button id="test">Teste</button>

---

Note: The link quoted by Virgilo seems to imply that functions with different parameters are supported, but as tests are not possible, see:

function adiciona(a) {
    console.log("função 1 => ", a);
}
function adiciona(b, c) {
    console.log("função 2 => ", b, c);
}

adiciona(1);
adiciona(1, 2);

The example returns:

função 2 =>  1 undefined
função 2 =>  1 2

---

Alternative

According to this response from Soen, a simple example of checking what you want to call would be:

function foo(a, b, c)
{
  if (arguments.length == 2) {
    console.log("foo 1");
  } else if (arguments.length == 3) {
    console.log("foo 2");
  }
}

foo(1, 2);
foo(1, 2, 3);

And there are more even more complex alternatives to achieve the desired "effect", but I really believe that this is something totally unnecessary, probably at the beginning of languages like java you feel some discomfort, but it’s not something you really miss that much.

Answer 2

Complementing the answers, if you don’t want your function to be overwritten, and keep its values, you can create them through the const

const teste = function () {
    console.log("Teste1")
}

teste()

var teste = function teste() {
    console.log("Teste2")
}

teste()

Typeerror: const 'test' has already been declared

Execution Time-70ms

var teste = function() {
    console.log("Teste1")
}

teste()

var teste = function() {
    console.log("Teste2")
}

teste()

Teste1

Teste2

Execution Time-48ms

Answer 3

Succinct response:

This is the "normal" behavior in Javascript. The language has advanced and today it is already possible to use const to declare constants that cannot be superscripted.

Elongated response:

From the beginning Javascript allows you to overwrite variable and function names, and even assign values to variables without declaring them, "declaring them" in global scope, which has generated bugs difficult to detect.

In modern versions of Javascript much of this has been fixed and for your case the fix is to use const, by assigning a function to a variable.

Thus in Ecmascript 2015 (version 6 of Javascript) exists const that starts a variable that can no longer be over-written without generating build error.

Your questions:

1. This is really the expected behavior when we declare 2 methods with the same name and parameters in js, it will always override and will prevail the last declared?

Yeah. Unless you use const (which will generate an error if the names are equal). This is the normal behavior, equal to CSS, the last to be declared.

2. Is there any explanation for this behavior, if yes what it is explanation?

That’s how the language was built, kind of flexible... But it’s being reinforced/corrected in the new versions.

3. Is there any way to do it that causes some mistake or something if someone makes this mistake and declares 2 methods with the same name and parameters?

Yes, using const the problem is fixed. That is, it gives error if a variable is over-written. In this case you can use:

const teste = function(){
    console.log('teste 1');
}

and if you do it then const teste = outra coisa... compiler gives error and does not run.

4. In case 3 has any way of doing, what to do if the functions are in different js files?

Then you have to encapsulate things. Either you use CJS, AMD or ES6 modules. There is not yet a universal specification on the part of language, but there are proposals that are under consideration in this regard. If you use the Babel compiler you can use these modules now.

So there are two answers:

With compiled modules you can declare everything in the "global" scope because the module does not share this scope with other files. All variables are encapsulated and the only thing you can export out of the module is via the reserved word exports. An example:

function teste(){
    console.log(1);
}

module.exports = teste;

in that way teste is not visible to other files.

Using native Javascript, where all files share the global space:

Here you have to encapsulate things yourself. The concept is identical but you have to use Iifes to hide variables from each other.

For example:

// ficheiro A
(function(global) {
  function teste() {
    console.log('teste A');
  }

  global.testeA = teste;

})(this);

// ficheiro B
(function(global) {
  function teste(nr) {
    var res = nr * nr;
    console.log('teste B', res);
  }
  global.testeB = teste;

})(this);

testeA();
testeB(17);