Search...
FAQs Subscribe
Pie
FAQs
Recent topics Flagged topics Hot topics Best topics
Search...
Search within HTML Pages with CSS and JavaScript Search Coderanch
Advance search Google search
Register / Login
thread boost granny polymorphism advertise on coderanch book review grid
Win a copy of Java Persistence with Spring Data and Hibernate this week in the Spring forum!
  • 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
thread boost book review grid meaningless drivel advertise on coderanch building better world book
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Tim Cooke
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Jeanne Boyarsky
Saloon Keepers:
  • Stephan van Hulst
  • Carey Brown
  • Tim Holloway
  • Piet Souris
Bartenders:

Calling a function

 
Ahmed Bin S
Ranch Hand
Posts: 385
6
posted 7 years ago
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
    Send
  • 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.
 
Joe Bishara
Ranch Hand
Posts: 175
17
posted 7 years ago
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
    Send
  • 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
 
Bear Bibeault
Sheriff
Posts: 67699
173
I like...
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
posted 7 years ago
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
    Send
  • 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.

[Asking smart questions] [About Bear] [Books by Bear]

 
Bear Bibeault
Sheriff
Posts: 67699
173
I like...
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
posted 7 years ago
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
    Send
  • 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

[Asking smart questions] [About Bear] [Books by Bear]

 
Ahmed Bin S
Ranch Hand
Posts: 385
6
posted 7 years ago
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
    Send
  • 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: 67699
173
I like...
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
posted 7 years ago
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
    Send
  • Quote
  • Report post to moderator
I'm not sure -- that is controlled by the publisher.

[Asking smart questions] [About Bear] [Books by Bear]

 
Ahmed Bin S
Ranch Hand
Posts: 385
6
posted 7 years ago
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
    Send
  • 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.
 
Michael Matola
whippersnapper
Posts: 1843
5
posted 7 years ago
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
    Send
  • 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: 67699
173
I like...
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
posted 7 years ago
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
    Send
  • Quote
  • Report post to moderator
Or... if the comparator is used only once:



Which actually leaves less margin for error.

[Asking smart questions] [About Bear] [Books by Bear]

 
Everybody's invited. Even this tiny ad:
The Low Tech Laboratory Movie Kickstarter is LIVE NOW!
https://www.kickstarter.com/projects/paulwheaton/low-tech
reply
reply
    Bookmark Topic Watch Topic
  • New Topic
Boost this thread!
Similar Threads
More...