-1

can anyone help me understand what the following code does?

$(function($) {
    $.supermodal();
});

I see it's very similar to "wait for document to finish loading before running supermodal". But I don't understand the 2nd and 3rd dollar signs (I realize they could be any arbitrary variable names).

FWIW, this is from here, where author has an additional usage for changing default values.

Sorry, seems like it should be simple, but it's one of those things that's hard to search for when you don't know what it's doing (e.g., this isn't right).

Thanks!

vogelito
  • 28
  • 4
  • 1
    Does this answer your question? "[What does the '$' means in this code?](/q/19136418/90527)", "[explain this javascript function declaration "jQuery\(function\($\){}"](/q/13102699/90527)" – outis Oct 10 '22 at 21:58
  • Yes, thanks! Failsafe alias, got it. – vogelito Oct 10 '22 at 23:28
  • The `$` in the `function($)` is to handle when `$` has been redefined. The use of `$(function($)` is superfluous as, if $ has been redefined, then this won't work; which is why you would normally see this as `jQuery(function($)..` – freedomn-m Oct 11 '22 at 07:50

3 Answers3

2

The first $ is the global variable to which jQuery is assigned.

The second $ is a function argument. It defines a variable called $. When you pass a function to jQuery it will be called when the DOM is ready or immediately (whichever is later) and jQuery (specifically the instance of jQuery which was passed the callback function) will be passed to the first argument. This is useful when you are dealing with multiple things which might be assigned to the global $ variable (including multiple versions of jQuery with different plugins … which does happen occasionally).

The third $ is making use of that argument.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

It seems that jquery executes the function it receives as argument. Calling it with first argument as the reference to jquery itself.

Now the only question is why. From the docs it is to have a failsafe $ alias

jQuery(function( $ ) {
  // Your code using failsafe $ alias here...
});
IT goldman
  • 14,885
  • 2
  • 14
  • 28
  • Worth noting from other answers: *"it will be called when the DOM is ready or immediately (whichever is later)"* – IT goldman Oct 10 '22 at 21:07
  • Interesting. I'm going to need to process that. What I meant by replacing the dollar signs was that this: `$(function(foo) {foo.supermodal();});` still works, so I was assuming it wasn't a reference to jQuery. I also should have added that just running `supermodal()` doesn't work, nor does `$(function(f) {supermodal();});` – vogelito Oct 10 '22 at 21:13
  • It isn't much to process really. You were right it can be any variable name. If you want to refer to jquery you can use `$`, `jQuery` or as the first argument of a callback function passed to jquery. All of this regardless of `supermodal` which relies on jquery – IT goldman Oct 10 '22 at 21:18
0

From the documentation:

Use both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.

jQuery(function( $ ) {
  // Your code using failsafe $ alias here...
});
Konrad
  • 21,590
  • 4
  • 28
  • 64