What is the jQuery equivalent to enclosing functions in () in Vanilla Javascript?

JavaScript
1

I have gotten so used to jQuery that I have completely forgotten about looking more into Javascript. Now, I am trying to fix that. So what exactly is the jQuery equivalent to:

(function() {
   // ...
}());

I have seen this around quite a lot and was wondering what it does exactly and I think the best way for me to understand it is if I see its jQuery equivalent provided that it has one. If there isn’t one, then a brief explanation would suffice or a link pointing to what I should be reading up on to understand what is going on with the code above would do. Thank you in advance.

2

What that is, is an immediately-invoked function expression, or IIFE. Rather than try to explain it, I’ll just quote the MDN explanation.

IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

It is a design pattern which is also known as Self-Executing Anonymous Function and contains two major parts. The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.

The second part is creating the immediately executing function expression (), through which the JavaScript engine will directly interpret the function.

I can’t tell you whether jQuery has an equivalent, as I don’t generally use it an awful lot.

1 Like
3

You might also see it written as follows. Note the positioning of the closing parethesis.

(function() {
    // ...
})();
4

There is none.

1 Like
5

Thank you now I know what I should look up on Google.

6

That is half the battle; knowing what to search for.

7

That is true.

8

Unless you’re supporting old browsers, there’s no reason to use jQuery.

9

I’m not sure why you pointed that out. But I only wanted to see a jQuery example to better understand its uses.

10

I guess I misunderstood the question. The code you pasted was Vanilla JS.

I thought you were asking for the other way around.

11

It’s still a good point for others reading the topic. :slight_smile:

1 Like
12

jQuery makes it pretty easy to not use global variables, hence the lack of an IIFE equivalent.

13

Sorry Alex, but jQuery has no systems in place that are equivalent to IIFE’s, primarily because there’s no simpler way to do IIFE’s than is already achieved natively with vanilla JavaScript.

14

I might add that jQuery is a framework meant for DOM handling, not everything that you could do with JS.

15

That’s okay. At least now I know what to search.

16

Are you sure you are not getting confused with jQuery’s document ready function?

i.e.

// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );
});
17

Yes, that jQuery ready method is quite different from IIFE’s, because the former delays the execution of the code until after the DOM has been loaded, whereas the latter runs immediately. Due to the good-practice technique of placing scripts at the end of the body, just before the </body> tag, no delay is necessary in your code anymore.

2 Likes
18

Yes, I’m pretty sure. IIFEs was what I was looking for.

1 Like
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.