• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Rob Spoor
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Henry Wong
  • Liutauras Vilda
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Tim Holloway
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Mikalai Zaikin
  • Piet Souris

Calling a function

 
Ranch Hand
Posts: 385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello,

I am reading Secrets of a the JavaScript Ninja (MEAP edition), and it's a very good book - it has been filling in the holes in my knowledge, and we all know that holes in knowledge when it comes to programming = bugs, lots of them! So I am enjoying it.

I am a bit confused though regarding a code listing. Basically, there is a listing showing how the function context can end up being the actual DOM element and not the JS object that you created, and the listing is below (I hope it's ok to reproduce it):
I am confused why we are calling the Button.click method without the parenthesis. I mean, usually if we call a function without the parenthesis, we get the function definition back, so I would expect the above call to be elem.addEventListener("click", button.click()), but this doesn't seem to work.


Any help would be appreciated.

Thanks.
 
Ranch Hand
Posts: 175
17
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
When you do this alert(sayMyName()), you're passing the return value of the sayMyName() function to the alert() function.

When you do this alert(sayMyName), you're passing the sayMyName() function to the alert() function.

When you pass a function to console.log(), it will print the string value of the function to the console.

Similarly, when you pass a function to alert(), it will display the string value of the function.

For example, when you run this code,

it will display an alert box with the message

A callback function is a function that is passed to another function as a parameter and then called in the function at an appropriate time. For example, caller() accepts myCallback() as a parameter and then caller() calls myCallback() at an appropriate time. This typically happens with event handling code like addEventListener() which may accept myCallback() as a parameter and then call myCallback() as a result of an event occurring.

For example, when you run this code,

it will display an alert box with the message
 
Sheriff
Posts: 67590
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Right. Remember that functions are first class objects in JavaScript. When you reference the function without the parens you are not calling the function, you are referencing the function object itself.

In the case of the event listener, we don't want to call the handler function when we establish it as an event handler, we want to pass a reference to the function to the addEventListener method so that it will call the function at some later point when the event occurs.
 
Bear Bibeault
Sheriff
Posts: 67590
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
In fact, in case you haven't gotten to that part of the book yet, the parens are an operator that can make a call to any function referenced by an expression. Frequently, a function to be called is referenced by its name. But it can be any expression that references a function.

Consider:

or
 
Ahmed Bin S
Ranch Hand
Posts: 385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:
In the case of the event listener, we don't want to call the handler function when we establish it as an event handler, we want to pass a reference to the function to the addEventListener method so that it will call the function at some later point when the event occurs.



Thanks for the answers guys, yes, I actually understood all that (as I said, the book is good and explains things well!), I was overlooking the part that we don't want to call the handler function yet!

Do you know when the source code for the listings will be available? I think the one on github is for the old edition, as I can't find things like listing 6.13 (closures) - on github 6.13 is about Promises, which I haven't got to yet. The code would be much appreciated as copying and pasting from the pdf is a right pain in the neck ...

Thanks.
 
Bear Bibeault
Sheriff
Posts: 67590
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I'm not sure -- that is controlled by the publisher.
 
Ahmed Bin S
Ranch Hand
Posts: 385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:I'm not sure -- that is controlled by the publisher.



Grrrr. Publisher should make it available, after all, we have purchased the book, so we already have access to it, it's just annoying to copy and paste all the time.
 
whippersnapper
Posts: 1843
5
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I know I'm late to the game on this, but just the other day I (jokingly) gave a (very experienced) JS programmer grief over this one:

Problem: default sort of array is alphabetical, even for numbers.


Their failed solution: code the comparator, but accidentally pass in the result of calling the function (which happily does nothing) instead of a reference to the function itself


Correct solution: pass in a reference to the callback
 
Bear Bibeault
Sheriff
Posts: 67590
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Or... if the comparator is used only once:



Which actually leaves less margin for error.
 
Blueberry pie is best when it is firm and you can hold in your hand. Smell it. And smell this tiny ad:
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
reply
    Bookmark Topic Watch Topic
  • New Topic