Need some help understanding this js

Question

Hello, I have the following strange looking code in a js file and i need some help in understanding whats going on. What im confused about is why is the whole thing put in paranthesis ?. What does that mean ?

(function() {
  var someobj = window.someobj = [];
  var parentId = '#wrapper';

  $(document).ready(function() {
    //some code here
    });


  $(document).ready(function() {
    //some code here    
      }
    });

Please help. Thank You.

Answer 1

I'm going to assume that this is actually part of an anonymous function definition and that's why it's in parenthesis. I could see doing this if there was some sort of logic going to make window.someobj change based on different conditions, but have code further along do the same thing.

Answer 2

The parenthesis aren't actually necessary as far that this code goes. This code doesn't seem complete though. The function initializes by setting a variable to some object on the page and then setting another constant. Then there are two seemingly identical triggers that will trigger some code on page load.

Doesn't seem like a very useful piece of code. Is there some larger portion that might shed some light on this?

Answer 3

In JS, You can declare a function and automatically call it afterwards:

( function Test() { alert('test'); } )();

Answer 4

The outer parentheses are redundant here (there is a typo in your code though, I think you're missing the closing );). Sometimes people will wrap a function in parentheses for clarity when invoking the function immediately, e.g.

(function($) { 
    //some jQuery code    
})(jQuery);

Within the function above, the parameter $ will have the value of the outer jQuery variable. This is done within jQuery and jQuery plugins to prevent the $ symbol clashing with other frameworks.

Answer 5

The parentheses define a temporary scope. It is sometimes useful to do so in JavaScript. There are a number of examples and further explanation in John Resig's excellent guide to learning advanced JavaScript:

http://ejohn.org/apps/learn/#57

Answer 6

If the code that you provided is complete (with the exception of what is inside the two $(document).ready(function() {}); statements), than this code does nothing and the function is never executed. It's the same with or without the wrapping parenthesis.

By wrapping a function in parenthesis, you can create an anonymous function. However, the function must be executed immediately, or stored in a variable (which would negate the anonymous part). You'll often see this technique to avoid polluting the global scope with variables that are temporary or only used for initialization of a larger application. For example.

(function() {
  // Do initialization shtuff
  var someLocalVariable = 'value';
})(); 
// Notice the `();` here after the closing parenthesis.  
// This executes the anonymous function.

// This will cause an error since `someLocalVariable` is not 
// available in this scope
console.log(someLocalVariable);

So then, what your code is missing is the (); after the closing parenthesis at the end of the function. Here is what your code should (presumably) look like:

(function() {
  var someobj = window.someobj = [];
  var parentId = '#wrapper';

  $(document).ready(function() {
    //some code here
  });


  $(document).ready(function() {
    //some code here    
  });
})();

Answer 7

It does not look like this code is complete. As written, this code will do nothing at all. Are you missing a close paren and an extra set of parentheses at the end?

In JavaScript, there is no module system, and thus no way to create a module with its own top-level definitions that don't conflict with other modules that might be used.

In order to overcome this, people use anonymous function definitions to avoid name conflicts. What you do is create an anonymous function, and execute it immediately.

(function () { /* do stuff */ })();

This creates a function, and then executes it immediately with no arguments. Variables defined using var within that function will not conflict with variables defined anywhere else, and thus you get the equivalent of your own, private namespace, like what a module system would provide.