CODEWITHSUNDEEP
javascriptangularjs
Sha
Sha

Reputation: 1974

Different ways to invoke functions - Javascript

I have some confusion regarding function invokes in javascript. there would be multiple ways to invoke a function on different contexts. Normally I have seen these 2 ways to invoke a function.

Method 1:

 $scope.test = function(){
       alert("function invoked");
 }();

Method 2:

 $scope.test = function(){
       alert("function invoked");
 }
 $scope.test();

However, I would like to know:

There is any difference in the following code with respect to performance?
Other criteria and in what context should I choose these?

I've gone through few of the blogs but couldn't understand it properly.

Upvotes: 0

Views: 105

Answers (5)

H. J. Rhenals
H. J. Rhenals

Reputation: 145

Few things; there is no jQuery usage in this code you pasted.

In the first example you are executing an anonymous function which do not have a return statement so you are assigning an undefined value to the $scope.test property.

In the second example you are assigning a function to the $scope.test property and then executing the function.

go check the MDN docs about Functions if still do you have any question go add a comment.

Upvotes: 0

Vikrant
Vikrant

Reputation: 5036

Method 1 is called, Anonymous function. Let’s look at another anonymous function:

(function() {
    alert('Hello World');
})();

Those last two parentheses are the self-executing part. They cause everything in the preceding parentheses to be executed immediately.

Let’s talk about self-executing anonymous functions inside and outside of objects:

(function() {
    var Person = {
        sayHello: function() {
            alert('Hello World');
        }
    }
})();

Here we have a self-executing anonymous function with an object inside of it that contains its own anonymous function.

Note: It’s short for initializing. That name(Person) however, carries no special meaning.

Method 2, actually stores a reference to the function and you can invoke it later anytime you want.

Upvotes: 0

kevguy
kevguy

Reputation: 4438

I don't really see a lot of people who would use Method 1 in normal cases. But this is how I see the differences between those two:

In Method 1, $scope.test stores the return value of the function invoked, which implicitly returns undefined, so $scope.test is undefined.

In Method 2, $scope.test actually stores a reference to the function and you can invoke it whenever you want using $scope.test(), but you cannot do the same with Method 1.

Upvotes: 0

31piy
31piy

Reputation: 23859

These two are different. The first one will assign the return value of the function to $scope.test, while the second one will assign the definition of the function to $scope.test.

Upvotes: 1

erik258
erik258

Reputation: 16304

There's a big difference.

The first example creates an anonymous function and sets $scope.test to the return value of that function. Since the function doesn't return anything, method one sets $scope.test to undefined.

Method 2 actually sets $scope.test to a function and then calls it. 

var f1 = function(){ 
    alert("You'll see this right away!  the function is called directly after definition")
  }()

alert(f1)

var f2 = function(){
    alert("f2 has been called")
  }

alert("note, f2 hasn't been actually _called_ yet, just defined.");

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

Upvotes: 2

Related Questions