What is the correct way to pass parameters to function in JavaScript?

Question

In my javascript code i have the following:

function foo(param1) {
    setInterval( bar(param1), 3000 );
}

function bar(msg) {
    alert(msg);
}

function set() {
    foo('hello');
}

And on page load i call set(), it gives the alert message only once. Why it does not work as i would expect.? I think the problem is with the parameter that i am passing the foo() function, but what it is exactly, i am not able to figure out.

If the problem is with the parameter, what can be an alternate way to achieve the desired result.?

Thanks.

Community · Accepted Answer · 2017-05-23 12:07:47Z

2

The best way is to use a closure to access the parameter from a function that you pass to setInterval:

function foo(param1) {
    setInterval(function () {
        bar(param1);
    }, 3000);
}

function bar(msg) {
    alert(msg);
}

function set() {
    foo('hello');
}

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Jan 16, 2013 at 16:54

Phil Booth

4,9371 gold badge36 silver badges36 bronze badges

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

7 Comments

jbabey Over a year ago

For my daily dose of pedantry, there are no closures in this code. From the question you linked to: "That is not a closure. A closure is when you return the inner function. The inner function will close-over the variables of foo before leaving."

Phil Booth Over a year ago

@jbabey Fair enough, I stand corrected. :) So I can correct the answer, what's the proper term for a function accessing variables from its parent context?

jbabey Over a year ago

@PhilBooth it's just an anonymous function declaration declared inside a named (foo) function declaration.

Phil Booth Over a year ago

@jbabey Actually, having read the comments to that answer, the other answers to that question and the article about closures on wikipedia, I disagree. :) It's not necessary to return the function for it to be a closure, only that the function runs and has access to the enclosing context after the parent function has already returned. Which it does, in this case.

Phil Booth Over a year ago

@pratik That scenario is fine. The way to think about it is that you are defining a brand new function every time you invoke foo and those functions all have perpetual, dynamic access to their context. A second invocation of foo in your case will create a second closure, which accesses a second context. The scenario to be careful of is when you want to define a closure inside the body of a loop. In that case you must call a function outside the body of the loop, fixing the context of each loop iteration, otherwise every closure will refer to a single context (the terminal loop iteration).

|

jbabey · Accepted Answer · 2013-01-16 16:58:43Z

1

You need to pass a function to setInterval, you are executing a function and passing it's return value (undefined since the function executed does not have a return value).

Try using an anonymous function instead:

function foo(param1) {
    setInterval(function () {
        bar(param1);
    }, 3000);
}

function bar(msg) {
    alert(msg);
}

param1 never changes here, so there is no need for anything more complicated. Here's a working example.

answered Jan 16, 2013 at 16:58

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

1 Comment

pratik Over a year ago

Thanks. So its Anonymous function, not a closure.

Matías Fidemraizer · Accepted Answer · 2013-01-16 16:51:14Z

1

setInterval expects a function while you're giving the return value of calling the whole function.

A modified version that should work:

var msg = null;

function foo(param1) {
   // When foo is called, its argument is set to msg variable, so the function called 
   // by setInterval will have access to the message that must show in a window.alert
    msg = param1;
    setInterval(bar, 3000 );
}

function bar() {
    alert(msg);
}

function set() {
    foo('hello');
}

answered Jan 16, 2013 at 16:51

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

7 Comments

pratik Over a year ago

While this will work with the global variable, i want bar(msg) to alert exactly the parameter msg's value that i have passed to it.

Matías Fidemraizer Over a year ago

@patrik You're not right. This approach does what you want. Other discussion is that the closure approach is better, but I just wanted to show you were your code was wrong and a basic hint on how to get it working.

pratik Over a year ago

Yes, your answer is right and it does the job, but what if i do not want to create a global variable.? So in that case i will have to use the anonymous function approach.

Matías Fidemraizer Over a year ago

@pratik In my devs, I would never use global vars. I thought you could

pratik Over a year ago

Nope, even i do not want to use global vars. I should have been more specific about that in the question.

|

Collectives™ on Stack Overflow

What is the correct way to pass parameters to function in JavaScript?

3 Answers 3

7 Comments

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related