Passing variables in a JavaScript callback

Question

I'm having trouble finding some information, and it's almost certainly because I don't know the correct terminology for what I'm doing. When I search for info about variables in a callback function, the code not the same as what I am trying to do here.

I have some JavaScript code, this is part of it:

var myNotification = new Notify('Notification Title', {
    body: 'message goes here',
    icon: "/icon.png",
    tag: 'for app use',
    notifyClick: functionNameHere,
    timeout: 10
});

The "functionNameHere" part is the name of another function, that is called when the notification created by this script is clicked.

I need to be able to pass a variable along with it, so essentially what i need to do is:

var myNotification = new Notify('Notification Title', {
    body: 'message goes here',
    icon: "/icon.png",
    tag: 'for app use',
    notifyClick: functionNameHere('variableContentWouldbeHere'),
    timeout: 10
});

However, when I do it like that it doesn't work properly.

How would I achieve this?

Research 'currying' -- basically using some variant of Maxx's comment — Software Engineer
– Software Engineer, Commented Oct 20, 2016 at 9:32

VadimB · Accepted Answer · 2016-10-20 09:36:13Z

2

You can achive this with changing function scope or using closures.

1st:

notifyClick: functionNameHere.bind('variableContentWouldbeHere');

And your context inside "functionNameHere" implementation is your argument.

function functionNameHere() {
   console.log(this === 'variableContentWouldbeHere'); //true
}

2nd:

Using closures

notifyClick: function() { functionNameHere('variableContentWouldbeHere'); }

edited Oct 20, 2016 at 9:36

answered Oct 20, 2016 at 9:33

VadimB

5,7213 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anders Bornholm Over a year ago

Better answer than mine ;-)

Sherwin Flight Over a year ago

I ended up using closures, your second method. Since you were the first to answer with this solution, I'm accepting your answer.

Mamdouh Saeed · Accepted Answer · 2016-10-20 09:37:40Z

1

var myNotification = new Notify('Notification Title', {
    body: 'message goes here',
    icon: "/icon.png",
    tag: 'for app use',
    notifyClick: function(){
    functionNameHere('variableContentWouldbeHere');    
    },
    timeout: 10
});

answered Oct 20, 2016 at 9:37

Mamdouh Saeed

2,3251 gold badge12 silver badges11 bronze badges

2 Comments

Sherwin Flight Over a year ago

Your solution to use closures is what I ended up doing. However, someone else answered with the same solution before you, so i accepted their answer. I did give you an upvote though. Thanks for your help :)

Mamdouh Saeed Over a year ago

Glad to Thank you too :)

Sohel · Accepted Answer · 2016-10-20 09:38:53Z

1

I am not totally sure what you are trying to do, but I guess may be you need something like this:

var myVariable = {};
var myNotification = new Notify('Notification Title', {
   body: 'message goes here',
   icon: "/icon.png",
   tag: 'for app use',
   notifyClick: function(e){
      functionNameHere(myVariable);
   },
   timeout: 10
});

answered Oct 20, 2016 at 9:38

Sohel

813 bronze badges

2 Comments

Sherwin Flight Over a year ago

Your solution to use closures is what I ended up doing. However, someone else answered with the same solution before you, so i accepted their answer. I did give you an upvote though. Thanks for your help :)

Sohel Over a year ago

Thanks @SherwinFlight

Anders Bornholm · Accepted Answer · 2016-10-20 09:34:18Z

0

You can't affect how the callback is invoked, the code in the Notify class determines that. If you try to pass it like in your second example, the function "functionNameHere" will be called immediately and the result of it is passed to the Notify constructor as the callback function - which is not what you want.

What you could do is make your functionNameHere function be a wrapper that returns another function that will be used as the callback.

edited Oct 20, 2016 at 9:34

answered Oct 20, 2016 at 9:30

Anders Bornholm

1,3368 silver badges18 bronze badges

2 Comments

Sherwin Flight Over a year ago

So, basically, unless the Notify class allow variables to be passed, it won't work?

Maxx Over a year ago

Just use bind and you can bind context and arguments to function

Stefan Negele · Accepted Answer · 2016-10-20 09:36:03Z

0

You could pass an anonymous function which calls your function like this:

var myNotification = new Notify('Notification Title', {
    body: 'message goes here',
    icon: "/icon.png",
    tag: 'for app use',
    notifyClick: () => functionNameHere('variableContentWouldbeHere'),
    timeout: 10
});

answered Oct 20, 2016 at 9:36

Stefan Negele

1,10210 silver badges10 bronze badges

Collectives™ on Stack Overflow

Passing variables in a JavaScript callback

5 Answers 5

2 Comments

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related