Is this a legit javascript syntax?

Question

I want to ask if the following function is declared correctly and if this syntax is possible.

(function(){



$(document).on("click", ".MyButton", function(event)
{
    if ($(this).attr("id") == "ButtonAuftrag")
    {
        $.mobile.changePage("#pagetwo");

    }
}
)();

THe function should be triggered on a button click. I googled and never found a syntax like this. The first line (function(){ and the closing of the function is confusing me.

Answer 1

There are few things to take care of

(function() {//<-- its function without name
  $(document).on("click", ".MyButton", function(event) {
    if (this.id === "ButtonAuftrag") {//<-- updated this line
      $.mobile.changePage("#pagetwo");
    }
  });//<-- added this line
})();//<-- executing the block declared

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Sample example, with name:

var run = function() { //<-- named as `run`
  console.log('running...');
}; //<-- not invoked

console.log('after run() declared ...');
run(); //<-- invoked
console.log('run() executed ...');

open console... F12

Sample example, without name:

(function() {
  console.log('runner 1 ...');
}); //<-- not invoked

console.log('after runner 1 declared ...');

(function() {
  console.log('runner 2 ...');
})(); //<-- invoked

console.log('after runner 2 declared ...');

(function(x) {
  console.log('runner 3 ...', 'x: ', x);
})(56); //<-- invoked with parameters

console.log('after runner 3 declared ...');

open console... F12

Answer 2

This is called a self calling anonymous function or IIFE (Immediately Invoked Function Expression).

Although there is some slight syntax problems that I'm gonna attribute to a faulty copy paste into the site. Please see other answers that address this issue.

Basically what is happening here is that you are defining the entire function as an expression when it is wrapped in parenthesis; Similar to the expression:

var a = ( 3 == 5 )

This will populate the variable a with the value false. In a similar way, after the function is wrapped with parenthesis, the function is actually being called (). So basically this function is called as soon as it is defined.

Answer 3

http://en.wikipedia.org/wiki/Immediately-invoked_function_expression

Just to fix some errors beforehand

(function(){

  $(document).on("click", ".MyButton", function() { // You don't use any event
    if ( this.id == "ButtonAuftrag"){ // Use this force Luke
        $.mobile.changePage("#pagetwo");
    }
  }); // Close properly

}()); // Close properly

fiddle

It's called IIFE (Immediately Invoked Function Expression)

(function(){
      // Function Scope's Code here...
      // Declared variables become private and
      // not accessible from outside the fn scope
}()); // the () here will expose to execution the function content

Simple example:

(function(){
   console.log("HEYYY");
   a = "a";     // Global variable (in window Object)
}());           // "HEYYY" 
console.log(a); // "a" // accessible


(function(){
  console.log("HEYYY");
  var b = "b";  // Private variable 
}());            
console.log(b); // referenceError : b is not defined

Answer 4

Nope, you aren't closing the outer function. Did you want this?

(function(){
    $(document).on("click", ".MyButton", function(event) {
        if ($(this).attr("id") == "ButtonAuftrag"){
            $.mobile.changePage("#pagetwo");
        }
    })
}());