Understanding some jsfiddle code in looking at - need some explanation

Question

I'm looking at some code in JSFiddle around Firebase authentication

http://jsfiddle.net/firebase/a221m6pb/

but there are some things that im not quite getting looking at the code... the function declared at the top

(function (jQuery, Firebase, Path) {

Is this some way of injecting services/libraries into jsfiddle?, havent seen an example like it before...also can anyone tell me what Path in this method signature is?... I understand its used in the routing in this example but im not exactly sure what it is.. Is its some sort of Routing framework... apologies if these are obvious question, im relatively new to playing around with jsfiddle + javascript

Answer 1

Way down at the bottom you can see whats passed to those parameters.

(window.jQuery, window.Firebase, window.Path)

It's just a way of making sure that those variables reference the correct objects in the desired scope.

And yes, Path is for routing. Look around line ~300, you'll see.

There's lots of comments & annotation, you should just keep reading the script.

Side note, this has nothing in particular to do with JSFiddle. JSFiddle is just a code editor platform, there are many, many like it: JSBin, CodePen, WebDevOut, Plunker - the list goes on.

---

Expanding on this answer, in regards to your comments. If you click the External Resources tab on the left side, you get a list of all the scripts and resources that have been added to the environment. Most of the time, scripts will create some kind of namespace object on the global object - in the browser the global object is window - so you end up with window.jQuery, window.Path, window.Firebase, and so on. Since every scope has access to the global scope, usually you'll just see jQuery (or $) used freely inside functions, since it's assumed that global reference won't change - but what if it does? What if another library or tool writes over that namespace in the middle of your program? That would break all your references!

The whole point of the function where you pass window.jQuery to a parameter called jQuery is to simply make sure that in the scope of that function jQuery always means what you think it should, since the global reference (window.jQuery) might be written over by some other library unknowingly. You don't care that the namespace has or might be written over now, because you've already established a reference to that original object.

The Path object is provided by this library: pathjs

Some further reading:

• Variable scope
• Function scope
• Immediately Invoked Function Expressions

Answer 2

This is called Immediately-Invoked Function Expression (IIFE), these are paremeters (jQuery, Firebase, Path), and they are sent at the end of the call :

}(window.jQuery, window.Firebase, window.Path))

For more information about immediately invoked functions check the following link

http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Answer 3

That is an anonymous function which is immediately invoked. The parameters are set at the end of the function. Here is a really simple example:

(function(a, b, c) {
     // a = 1, b = 2, c = 3
})(1, 2, 3);

This is used to avoid populating the global namespace / to avoid exposing of functions/parameters.

On that jsfiddle page, if you go to the sidebar and click "External Resources", then you will see where the parameters come from.