CODEWITHSUNDEEP
javascript
user6004361
user6004361

Reputation:

What is the difference between a function declaration and a function expression argument?

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?

Upvotes: 4

Views: 83

Answers (2)

serraosays
serraosays

Reputation: 7889

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.

Upvotes: 0

J. Titus
J. Titus

Reputation: 9690

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);
        //...
    }
};

Upvotes: 1

Related Questions