Malice Malice - 5 months ago 8
jQuery Question

JavaScript examples, clarify the langue pattern design for functions with-in functions

I am learning JavaScript and becoming confused by the logic of the code examples. From codecademy. Why are there function set-ups in function calls?
I'm quite confused. I am moving from a simplified C-like langue.

The JavaScript example

var main = function(){
$('.article').click(function(){
$('.description').hide();

$(this).children('.description').show();
});
};


My understanding:
- main is a function name with a return type of var.


  • $('.article')
    is a element/object/or class object.

  • .click()
    is a call to a member function

  • But:



???:

.click(function(){
$('.description').hide();
$(this).children('.description').show();
});


This seems to be a newly on the spot created function to run When/If
click()
is activated or run.

The way I used to think is like this:

var *p_obj = $('.article');
var *p_obj = $('.description');

var do_click()
{
p_obj2.hide();
p_obj.children(p_obj2).show();
}

var main(){
p_obj.click(do_click);
}


Function
main()
looks at
p_obj
and calls
click()
.

Click()
evaluates to
true
/
false
and run the pointer_to function
do_click()
.

Function
do_click()
looks at the
p_obj2
and calls
hide()
, which performs an action of hiding the
p_obj2
.

Function
do_click()
also looks at
p_obj
and uses children to scope focus to
p_obj2
, then it runs
show()
, which preforms an action of displaying
p_obj2
.

I do realize my C-like example is wrong and odd. I realize my terminology is wrong or otherwise used incorrectly.

The way this design looks seems like I must write extended functionality on-the-spot for every call to
.click()
, so if-then
.click()
is run on 3 different items, I'm creating different extended functionality for each object. But I would normally create a single function that varies it's internal execution based on the object or condition
click()
calls it by.

This set-up seems alright if the code a relatively simple or short, but on-the-spot functional seems like overworking for longer code and code where the functionality repeats but the objects change.

Am I thinking about JavaScript functions with-in functions correctly and is this a design goal of the langue to add long repeating extended functions with-in functions?

Answer

Here, you should understand 2 things:

  1. passing functions as arguments
  2. anonymous functions

The first concept is particulary important because callbacks are popular in JavaScript, so let me explain it for callbacks. Imagine we have 2 functions getStuffFromWeb and processStuff. You probably expect that they are used like this:

var result = getStuffFromWeb();
processStuff(result);

But the issue here is waiting for getStuffFromWeb may take some time (the server is busy), so instead they are usually used in a "when you finish, call this function" manner, which is:

var getStuffFromWeb = function(params,callback) {
    ...
    callback(result);
};
getStuffFromWeb(someParams,processStuff);

Well, in fact the structure of getStuffFromWeb will be different, most likely something like this:

var getStuffFromWeb = function(params,callback) {
    requestObject.make_request(params)
                 .onSuccess(callback);
};

So when getStuffFromWeb is called, it starts to listen to response while the code after getStuffFromWeb(someParams,processStuff); goes on evaluating. When the response comes, it calls the callback function to process the data further using the procedure we have defined (processStuff).

The second concept is rather simple: you may of'course write smth like

var processStuff = function() {...};
var getStuffFromWeb = function(params,callback) {
    requestObject.make_request(params)
                 .onSuccess(callback);
};
getStuffFromWeb(someParams,processStuff);

but if you use processStuff only once, why define a named function? Instead, you can just put the very same expression inside the onSuccess param like this:

var getStuffFromWeb = function(params) {
    requestObject.make_request(params)
                 .onSuccess(function() {...});
};
getStuffFromWeb(someParams);

This looks exactly like if we took the value of processStuff and put it directly to the onSuccess's argument (and that's called anonymous function). And also we got rid of an extra argument of getStuffFromWeb.

So basically that's it.