Javascript: Function expression over function declaration

Question

I have two functions name init

One is declared using function declaration and another using function expression, like this:

function init() {
    alert ('init 1'); 
}

var init = function(){
    alert('init 2');
}

init();

When i call the init function it alerts init 2.

Demo

My question is:

1- Why javascript does not throw error as both functions have same name.

2- How can i call the first function?

Answer 1

Why javascript does not throw error as both functions have same name.

They don't have the same name. The second is a variable init containing an anonymous function. The first is a function named init .

You can test this by doing the following on both:

console.log(init.name);

You'll see that the first does indeed have a name init , whereas the second has no name.

How can i call the first function?

In this example the first can't be called after using init for your variable for the second. Unless you have another reference to the first like so:

function init() {
        alert ('init 1'); 
}
var original = init;

Answer 2

There is nothing fundamentally different between what you are doing and

var i = 1;
var i = 2;

No, JS does not throw an error, and no, once you've redefined i you can't get the old value back.

In ES6 and some modern browsers, you can say

const i = 1;

and then the engine will complain if it's redefined.

Answer 3

Declarations in JavaScript are hoisted. A function declaration is one type of a declaration. Hence your program is equivalent to:

 var init = function init() { alert("init 1"); }; var init = function () { alert("init 2"); }; init();

If you call init before your second definition then it would alert init 1 :

 function init() { alert("init 1"); } init(); var init = function () { alert("init 2"); };

Because of hoisting you can even call init before it appears in the program:

 init(); function init() { alert("init 1"); } var init = function () { alert("init 2"); };

Just remember than no matter in what order they appear in the program, the function declaration always comes first:

 init(); var init = function () { alert("init 2"); }; function init() { alert("init 1"); }

Hope that helps.

Answer 4

Javascript gets the last defination of function. You can rename it unique or you can "use strict" to make it local function.

function functions(){
    "use strict"
    var init = function(){
        console.log("b");
    };

    return {
        start : init
    }
};

var fn = new functions();
fn.start();

Answer 5

You can make kind of namespace:

 var p1 = { init: function() { alert('init 1'); } }; var p2 = { init: function() { alert('init 2'); } }; var init = function() { p1.init(); p2.init(); }; init();

 Running ...

Answer 6

This works:

function init() {
    alert ('init 1'); 
}

var init = (function(oldInit) { return function() {
  oldInit(); // Call the first definition this way
  alert('init 2');
}; })(init);

init();

The trick is to have the second init() remember the previous init. Javascript doesn't throw an error because it's often useful to redefine functions.