What is the outcome in javascript with multiple librarys that use $

Question

Let's pretend this is in the <head> of your html page.

OOPS this was a bit that was missing before...:

<script type="text/javascript" src="/include/js/billys.js"></script>
<script type="text/javascript" src="/include/js/susies.js"></script>
<script type="text/javascript" src="/include/js/marys.js"></script>

Order of the 3 scripts could vary. What would be the outcome?

Billy defines $ as

function $ () {
 return false;
}

Susie defines $ as

function $ () {
 return document.getElementById('body');
}

Mary defines $ as

function $ () {
 alert('I wrote this');
}

Sorry, see the question now. I'm talking with external js files. Just to be clear. — Doug Chamberlain, May 11 '11 at 19:47
as i said in my answer. whatever is last, is the definition of `$` — Naftali, May 11 '11 at 19:49

score 18 · Accepted Answer · answered May 11 '11 at 19:42

18

Whatever is last is the final definition of $

That is why in (for example) jQuery there is noConflict() which lets you use a different variable than $ for jQuery

answered May 11 '11 at 19:42

Naftali

144,921
39
244
303

So it is ALWAYS [ALWAYS], top down, and whatever is last is what it will use? – Doug Chamberlain May 11 '11 at 19:43
I'm confirming that you are saying the order of the scripts is really all that matters. – Doug Chamberlain May 11 '11 at 19:45
not unless you have a `setTimeout(function(){window.$=undefined;},100);` or `window.onload` defining the function :P – Lime Sep 23 '11 at 01:50

lonesomeday · Answer 2 · 2011-05-11T19:52:36.053

16

Why not try it?

function $ () {
 return false;
}
function $ () {
 return document.getElementById('body');
}
function $ () {
 alert('I wrote this');
}
$(); // alerts "I wrote this"

The later definition overwrites the existing one. This is why it's generally good practice to check whether a function already exists before defining it. e.g.

if (typeof $ !== 'function') {
    function $(){ /* your code */}
}

or to fail in some sensible way.

edited May 11 '11 at 19:52

answered May 11 '11 at 19:44

lonesomeday

233,373
50
316
318

1

If the function exists, overwrite it with a blank function? I think you need to change your last example a bit. – Ry- May 11 '11 at 19:46
@minitech Um, yeah, `!==` is what I meant. Comment added for clarity. – lonesomeday May 11 '11 at 19:47
@Joel Good stuff- added to the answer. – lonesomeday May 11 '11 at 19:52
I didn't use Jsfiddle since my question had to do with multiple external js files. I had accidentally posted the question with that bit missing at first.. – Doug Chamberlain May 11 '11 at 19:55
@Doug Well, it's all the same thing. Multiple script tags are parsed sequentially, whether they're inline or external, and they are effectively one file. – lonesomeday May 11 '11 at 20:18

score 5 · Answer 3 · answered May 11 '11 at 19:43

5

The last function with the same name wins.

answered May 11 '11 at 19:43

Ry-

218,210
55
464
476

What is the outcome in javascript with multiple librarys that use $

3 Answers3