Different ways to invoke functions - Javascript

Question

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.

@v́̎̈́̀̽̏̿̏͋—in jQuery, *$* is an identifier used to reference the jQuery function. The $ in *$scope* is simply a character in an identifier, it has no other meaning. — RobG, Jan 03 '17 at 05:34

score 2 · Answer 1 · answered Jan 03 '17 at 05:05

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>

score 1 · Answer 2 · answered Jan 03 '17 at 05:05

1

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.

answered Jan 03 '17 at 05:05

31piy

23,323
6
47
67

score 0 · Answer 3 · answered Jan 03 '17 at 05:08

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.

score 0 · Answer 4 · answered Jan 03 '17 at 05:16

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.

They're both "anonymous" functions since neither has a name. ;-) — RobG, Jan 03 '17 at 05:29

score 0 · Answer 5 · edited May 23 '17 at 11:46

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.

Different ways to invoke functions - Javascript

5 Answers5