What is difference between these two functions?

Question

I have tried folllowing two ways of referring a function:

First

let a = function() {
   somefunction();
}

Second

let a = somefunction;

Where somefunction is the following in both cases:

function somefunction() {
  alert("hello");
}

Is there any difference between these two ways?

Answer 1

Yes, there is a difference between your two examples.

In the first case, you are defining a new anonymous (unnamed) function which calls somefunction. You are then assigning your new function definition to the variable a. a holds a reference to your new function.

In the second case, you are simply assigning your original function of somefunction to the variable a. The variable a then holds a reference to somefunction. You are not creating a new function as you are in the first case.

Answer 2

I think this example may make the difference clear. arguments is an array like object that contains each of the arguments passed to a function.

Try running each of these lines on your favorite browser console.

var somefunction = function() { console.log(arguments); };

Your first example demonstrates defining a named function a that closes around the named function somefunction.

var a = function() { somefunction(); };

Your second example makes a reference, b, directly to somefunction. This makes invoking b the same as invoking somefunction.

var b = somefunction;

Now if you call each of these a and b with some arguments you will see the difference.

=> a('a', 1);
[]

=> b('a', 1);
['a', 1]

In the first case the arguments object is empty. That's because the arguments that were passed to a were not forwarded onto somefunction.

In the second case the arguments are available to somefunction, because some function is being called directly.

Here is how you could redefine a so that it were functionally equivalent using apply

var a = function() { somefunction.apply(this, arguments); }

Running this at your console prints the argument array.

=> a('a', 1);
['a', 1]