How to limit scope of a function in javascript/ jquery

Question

I have multiple .js file linked on the page that have functions with the same name like following mockup

first.js

function DisplayContent(data,$target) // data is string
{
     $target.html('<span>'+ data +'</span>')
}

second.js

function DisplayContent(data,$target) // data is string
{
     $target.html('<div>'+ data +'</div>')
}

Both the above files are referred to the page.

How to can i fix the above issue without renaming the functions.

Please correct if approach is wrong.

Thanks

Why don't you keep it in one single `js` and identify on one more parameter.? — Guruprasad J Rao, Nov 24 '15 at 06:18
@ Guruprasad I can do that but i don't want to repeat the code. As each js file have their own functionality, the problem is i need to refer both js at the same time. — Mayank, Nov 24 '15 at 06:20
Where are those functions being used (respectively)? Only in the file that they were written in? — Bergi, Nov 24 '15 at 06:21
@Mayank where are you calling these functions in same file or somewhere else?? — Manwal, Nov 24 '15 at 06:23
http://stackoverflow.com/questions/881515/how-do-i-declare-a-namespace-in-javascript — Pradeep Sanjaya, Nov 24 '15 at 06:24

Vibhesh Kaul · Accepted Answer · 2015-11-24T09:27:57.383

you could use namespacing in JavaScript files:

first.js:

var first= {
  DisplayContent: function DisplayContent(data,$target) 
  {
     $target.html('<span>'+ data +'</span>')
  },
     [additional methods in the first object]
};

second.js

var second= {
  displayContent: function DisplayContent(data,$target) 
  {
      $target.html('<div>'+ data +'</div>')
  },
  [additional methods for the second implementation]
};

Then call methods like Namespace.method, i.e. first.DisplayContent()

score 1 · Answer 2 · answered Nov 24 '15 at 06:20

1

It would be better i guess

function DisplayContent(data,$target,htmltag) // data is string
{
     $target.html('<' + htmltag + '>' + data + '</' + htmltag + '>')
}

answered Nov 24 '15 at 06:20

Arif

1,567
8
18

score 1 · Answer 3 · answered Nov 24 '15 at 06:24

If you are calling these function only in that file itself then you can limit scope like this:

First.js

(
  function(){
    function DisplayContent(data,$target) // data is string
    {
         //$target.html('<span>'+ data +'</span>')
         alert("first file");
    }

    DisplayContent('test','test');

    //here you can place other code
}());

Second.js

(
  function(){
    function DisplayContent(data,$target) // data is string
    {
         //$target.html('<div>'+ data +'</div>')
         alert("Second file");
    }

    DisplayContent('test','test');

    //here you can place other code
  }()
);

See a demo

score 0 · Answer 4 · answered Nov 24 '15 at 06:26

Multiple ways.

You can do this in your second.js, if you dont want them to confict. This will let you use second.js independently in a page and this function would fire.
```
 if(typeof DisplayContent !=='function'){
    function  DisplayContent(){

  }
 }
```
You can go for a closure like Manwal rightly pointed.

However, having two functions with the same name, doesn't make much sense. You should avoid this.

score -1 · Answer 5 · answered Nov 24 '15 at 06:19

-1

If you add two JS files to a single page, both files will run in a single javascript context and the functions will be replaced making the result un acceptable. Thus making is impossible to do your requirement.

answered Nov 24 '15 at 06:19

Imesh Chandrasiri

5,428
13
56
101

How to limit scope of a function in javascript/ jquery

5 Answers5