What exactly is the difference between these two javascript functions?

Question

I've come across two types of functions whilst learning javascript I think. I've tried to put them below as I understand them.

function example(arg1, arg2) { //code to do stuff here }

and

thing.method(function(arg) {
  //code to do stuff here
});

My thinking is that the first case is creating a function called example which takes two arguments and stuff happens in the curly brackets. I believe the function can be called and used as long as it is in scope (I think that's the correct word?).

In the second I get confused. My thinking is that we have a thing (an array, object, whatever) a method gets called on that thing (foreach, map, etc) then I get stuck. There is a function, which doesn't have a name? Takes one argument and stuff happens within the curly brackets. Lets say the thing was an array and we called foreach then the stuff inside the function brackets would happen to each element? Why would I use this rather than just creating a function like the first one which I could just call?

Why couldn't I just say:

function example(arg) { //stuff }
thing.method(example(arg));

I may have misunderstood a few things. Would somone be able to clear things up for me?

You could say `function example(arg) {}; thing.method(example);` The second one basically sends the function as the first argument of the method of thing. For the forEach example, `Array.forEach(function(){});` will run that function on every element of the array, since forEach basically means 'use the first argument passed to forEach on each element in my array'. — Shilly, Aug 26 '16 at 12:51
This can be down to design pattern. See https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know for more information. Please note this is not an exhaustive list of patterns; it does not include Factory pattern for example. — IronAces, Aug 26 '16 at 12:52
You are right on the first one. The second one is a little tricky. It is called a call-back. You are passing a function (anonymous function, as you correctly put it) to another function (thing.method) that will call back that anonymous function as part of its code somewhere. — Leandro, Aug 26 '16 at 12:52
To the second: the keyword of the day is: `callback`. And to the first: the function can not be called *"as long as it is in scope (I think that's the correct word?)"*, but as along as you have a reference to it (no matter what you mean with scope). The function will preserve it's scope (#closure) — Thomas, Aug 26 '16 at 12:58

score 1 · Accepted Answer · answered Aug 26 '16 at 12:57

thing.method(function(arg) {
  //code to do stuff here
});

This uses what is called an anonymous function. Like you said, it has no name. It is passed as an argument to thing.method(). thing.method()'s function body would use this function such as:

thing: {
    method: function(callback) {
        //...
        callback();
        //...
    }
};

You cannot write this as

function example(arg) { /* stuff */ }
thing.method(example(arg));

because in this example you are passing the return value of example(arg) into thing.method(), instead of the function itself. You could, however, write it like this:

function example(arg) { /* stuff */ }
thing.method(example);

Now, you could picture method() setting some variable and passing it to the function that you passed in, such as:

thing: {
    method: function(callback) {
        var foo = "bar";
        //...
        callback(foo);
        //...
    }
};

Thanks for your answer, it was really helpful! – Aug 26 '16 at 13:35 — , Aug 26 '16 at 13:35

serraosays · Answer 2 · 2016-08-26T13:01:13.500

Your first function example is a named function that is reusable throughout your entire JS program. It has a global scope. To use it, you need to call it, like so:

example(value1, value2);

This will send value1 and value2 into the function and some action will typically be performed using those values. Often the function returns a value.

The second function is both an anonymous function AND a callback function. It's anonymous because it doesn't have a name, and a callback because it only gets called when an event occurs. You almost always use these functions in conjunction with an event (like click, hover, etc).

A good example might be that your method is a click event on thing in your example. When your user clicks thing, the anonymous function gets fired. The scope is not global, it's only inside of the click event that it can be accessed.

// jQuery callback on a click event
$("#button-in-your-program").click(function() {
  console.log("Your callback function worked");
});

Another topic which is related to all of this is called closures. A closure is the lexical scope created whenever a function gets called. Most of the time you don’t really think about it. But when you nest a function inside of another function, it becomes an important concept. For example, when a child function references a variable in its parent function, the closure is used to provide the variable’s value to the child function.

What exactly is the difference between these two javascript functions?

2 Answers2