CodingForums.com - issues understanding code

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - issues understanding code (http://www.codingforums.com/showthread.php?t=284161)

coffeecup

12-15-2012 12:39 AM

issues understanding code

Hello,

I have some issues to understand how parts of the following code are working:

demo:
http://devfiles.myopera.com/articles/649/example2.html
source:
http://devfiles.myopera.com/articles/649/example2.js

this is the part I have issues with:

Code:

var func = tool[ev.type];

    if (func) {

      func(ev);

    }

I don't quite get the idea behind this :confused: How does it work/what does it to?

Any help is welcome, thanks in advance!

Old Pedant

12-15-2012 02:53 AM

Functions in JavaScript *ARE* objects.

So you can get a reference to a function just as you can get a reference to any other kind of object.

And, if you indeed you *have* a reference to a function, then you can invoke the function via that reference.

Perhaps a simple example will help:

Code:

function demo(arg) { alert("demo called with argument " + arg); }



var dummy = {

     "name" : "dummy object",

     "func" : demo

};



var functionReference = dummy.func;



functionReference( "tada!" );

Try it! Does that help?

coffeecup

12-15-2012 11:28 AM

thanks this indeed got me somewhat closer. I still have issues with the following though:

Quote:

var func = tool[ev.type];
if (func) {
func(ev);
}

I'm still confused with the tool array, how does it work? Could you give me an example what value "func=tool[ev.type]" can have? Is there a simpler approach?

Thanks in advance

felgall

12-15-2012 07:45 PM

Presumably there is more code than what you posted and the tool[] array is being defined somewhere in the rest of the code.

From just the portion of code you supplied we can say that tool[ev.type] can be either a function or code that returns a function.

coffeecup

12-15-2012 07:49 PM

Quote:

Originally Posted by felgall (Post 1300159)

link to source is on first post :) yes tool is defined + instanced previously, but I don't get the whole idea of why tool[ev.type] is an array :confused:

AndrewGSW

12-15-2012 08:04 PM

Code:

but I don't get the whole idea of why tool[ev.type] is an array

In JavaScript, objects are associative arrays.

Code:

var myObject = { "name": "Bob" };

// can be referred to as either

myObject['name'] // or 

myObject.name

But functions are also objects and can be assigned as attributes (properties) of an object:

Code:

myObject.func = function () { alert("Hello!") };



var anOther.func = myObject['func'];

anOther.func();  // Hello!

ev is the event object which, I assume, will have the 'type' of onclick, onmouseover, etc.. which is, in turn, a function. So,

Code:

func(ev);

triggers the event-handler of this name (handing over the current event object as a parameter).

These are general details - I didn't examine the page in detail.

Old Pedant

12-15-2012 09:49 PM

Quote:

Originally Posted by coffeecup;1300161but I don't get the whole idea of why tool[ev.type

is an array :confused:

It's not.

It never was and still isn't.

It is an object.

Let's say that we *KNOW* that ev.type is "mouseup".

That means that doing tool[ev.type] is of course equivalent to doing tool["mouseup"] (no mystery there, right?).

But...and here may be the surprise to you...tool["mouseup"] is equivalent to tool.mouseup !!!

SO...

If we have an object such as this:

Code:

var tool = {

     zam : "whomp",

     size : 88.88176,

     mouseup : function(x) { alert("mouse up called with argument" + x); }

};

And if we have an event , ev that indeed has its type (ev.type) equal to "mouseup", then doing this:

Code:

var func = tool[ev.type];

becomes

Code:

var func = tool["mouseup"];

becomes

Code:

var func = tool.mouseup;

becomes

Code:

var func = function(x) { alert("mouse up called with argument" + x); }

and do now we can do

Code:

func( ev );

and we are *actually* effectiively doing

Code:

alert("mouse up called with argument" + ev);

Okay?

coffeecup

12-15-2012 09:57 PM

excellent ^^ thanks this indeed helped me alot. I was not aware of the whole objects <=> associative array thingie and will look into it. it makes perfect sense now thanks to your explanation.

just a last small question out of curiousity:
is there another way to write tool[ev.type]? I don't think tool.ev.type would work, would it? :)

AndrewGSW

12-15-2012 10:18 PM

Quote:

is there another way to write tool[ev.type]? I don't think tool.ev.type would work, would it?

I don't believe that would work, although I haven't studied the code in depth. But this probably will:

Code:

tool[ev['type']]

Old Pedant

12-15-2012 10:43 PM

Quote:

Originally Posted by coffeecup (Post 1300199)

is there another way to write tool[ev.type]? I don't think tool.ev.type would work, would it? :)

The problem is that what you are trying to do is choose *ONE* of the posslble properties of the tool object.

Suppose you had:

Code:

var tool = {

    mouseup : function( ) { ... },

    mousedown : functiion( ) { ... },

    keyup : function( ) { ... },

    keydown : function( ) { .. }

};

You could *certainly* use either

Code:

    tool["mouseup"]

or

    tool.mouseup

But in this case, you don't *KNOW* what the value of ev.type is, do you?

It might be "mouseup" or it might be "keyup" or ...

You just know (or at least you hope!) that ev.type is *ONE* of the properties of the tool object.

You *COULD* do

Code:

eval( "tool." + ev.type );

but I'm sure you have heard how evil it is to use eval( ) and for how many reasons.

So, realistically, the best way *IS* to use simply

Code:

tool[ ev.type ];

Oh, you could write some ugly code like this:

Code:

    switch ( ev.type )

    {

        case "mousedown" : tool.mousedown(ev); break;

        case "mouseup" : tool.mousedown(ev); break;

        case "keyup" : tool.keyup(ev); break;

        case "keydown" : tool.keydown(ev); break;

   }

But once you understand it all, isn't it really easier to just do

Code:

tool[ev.type]( ev );

(or the equivalent).

All times are GMT +1. The time now is 07:42 AM.