Define function twice in JS. Indicate which definition to use depending on web page

Question

I have two web pages. They share the same .js file, but the file contains code that I only want to execute for one or the other of the pages.

I thought I could handle it like below, where each page has an element with a unique id, either "page_1" or "page_2". The js then tests for the existence of this element before executing the code.

However, on page_1, even though it doesn't actually execute the code inside the page_2 IF statement, the function runStartFunction() is still overridden because it is defined twice.

How can I avoid this? Obviously I could give all the functions different names, but I have a lot of pages and I could accidentally use the same name at some point.

if (document.getElementById("page_1") != null){
    alert("Page 1"); // executed, as expected
    function runStartFunction(){
        alert("what I want"); // not executed, but should be
    }
}

 if (document.getElementById("page_2") != null){
   alert("Page 2"); // not executed, as expected
   function runStartFunction(){ 
        alert("what I don't want"); // executed, but shouldn't be
   }
 }

runStartFunction();

mixing up the js code for two different webpages? i don't think that's a very good idea. — Manuel Görlich, Jul 25 '13 at 05:40
It's very common. They are pages within the same site and it cuts down on the number of calls to load scipts. — user984003, Jul 25 '13 at 05:42
Let your backend code decide which js files will get loaded based on which view it renders, this will reduce your overall JS that need's to get loaded. — Manuel Görlich, Jul 25 '13 at 05:49

score 3 · Answer 1 · answered Jul 25 '13 at 05:41

In JavaScript, function declaration is hoisted. Your code becomes:

function runStartFunction() {
    alert("what I want");
}

function runStartFunction() { 
    alert("what I don't want");
}

if (document.getElementById("page_1") != null) {
    alert("Page 1");
}

if (document.getElementById("page_2") != null) {
    alert("Page 2");
}

runStartFunction();

The second declaration of runStartFunction overrides the first one, so second one called.

You can use function expression and assignment instead of declaration to solve this problem like this:

var runStartFunction;

if (document.getElementById("page_1") != null) {
    alert("Page 1");
    runStartFunction = function () {
        alert("what I want");
    };
}

if (document.getElementById("page_2") != null) {
    alert("Page 2");
    runStartFunction = function () { 
        alert("what I don't want");
    };
}

runStartFunction();

fiddle: http://jsfiddle.net/nYPME

score 0 · Accepted Answer · edited May 23 '17 at 12:13

Like i stated in my comment, i don't think this is a good idea, but still i'll provide you with a way to solve your problem: Use closures

var runStartFunction;
if (document.getElementById("page_1") != null){
    (function () { 
        alert("Page 1"); // executed, as expected
        runStartFunction = function startFunction(){
            alert("what I want"); // not executed, but should be
        }
    }());
}

if (document.getElementById("page_2") != null){
    (function () { 
        alert("Page 2"); // not executed, as expected
        runStartFunction = function startFunction(){ 
            alert("what I don't want"); // executed, but shouldn't be
        }
    }());
}

runStartFunction();

This works, thanks. I also added an answer based on yours, which shows how I actually ended up doing it. — user984003, Jul 25 '13 at 06:24

score 0 · Answer 3 · answered Jul 25 '13 at 06:22

Based on Manuel Görlich's answer, here is how I ended up doing it. I surround each code set in a closure and then I just leave everything else as it was. The call to runStartFunction() has to be inside each closure.

if (document.getElementById("page_1") != null){(function () { 

   alert("Page 1");
   function runStartFunction(){
        alert("what I want");
    }
    runStartFunction();

}());}

if (document.getElementById("page_2") != null){(function () { 


    alert("Page 2");
    function runStartFunction(){ 
        alert("what I don't want");
     }
    runStartFunction(); 

}());}

Define function twice in JS. Indicate which definition to use depending on web page

3 Answers3