I can do a hack like this:
function exec(fn){
setInterval(fn,0);
}
exec("newfn()");
But looking for a cleaner way.
As already mentioned in the comments, the best way to pass a function to another function is to pass a reference to it, not a string containing its name.
Example:
function foo() {
console.log('Inside foo');
}
exec(foo);
To execute the function inside exec, you just have to put () after the function reference:
function exec(fn) {
fn();
}
But while you can absolutely do this, I don't see any advantage of using exec(foo) over foo().
You can do this:
function exec(fn){
window[fn]();
}
exec("newfn");
provided that functions are in global scope.
simply pass function name:
function exec(fn){
setInterval(fn,0);
}
exec(newfn);
Related
Is it possible to pass a javascript function with parameters as a parameter?
Example:
$(edit_link).click( changeViewMode( myvar ) );
Use a "closure":
$(edit_link).click(function(){ return changeViewMode(myvar); });
This creates an anonymous temporary function wrapper that knows about the parameter and passes it to the actual callback implementation.
Use Function.prototype.bind(). Quoting MDN:
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
It is supported by all major browsers, including IE9+.
Your code should look like this:
$(edit_link).click(changeViewMode.bind(null, myvar));
Side note: I assume you are in global context, i.e. this variable is window; otherwise use this instead of null.
No, but you can pass one without parameters, and do this:
$(edit_link).click(
function() { changeViewMode(myvar); }
);
So you're passing an anonymous function with no parameters, that function then calls your parameterized function with the variable in the closure
Or if you are using es6 you should be able to use an arrow function
$(edit_link).click(() => changeViewMode(myvar));
Yes, like this:
$(edit_link).click(function() { changeViewMode(myvar) });
You can do this
var message = 'Hello World';
var callback = function(){
alert(this)
}.bind(message);
and then
function activate(callback){
callback && callback();
}
activate(callback);
Or if your callback contains more flexible logic you can pass object.
Demo
This is an example following Ferdinand Beyer's approach:
function function1()
{
function2(function () { function3("parameter value"); });
}
function function2(functionToBindOnClick)
{
$(".myButton").click(functionToBindOnClick);
}
function function3(message) { alert(message); }
In this example the "parameter value" is passed from function1 to function3 through function2 using a function wrap.
I have question about the fundamentals of JS.
So, in JS we all agree that a function is an object. So lets suppose this:
const mainFunction = () => { //Do stuff };
mainFunction.nested = () => { //Do other stuff };
So I have two functions:
a main function which I can call like this: mainFunction()
and a nested function I can call like this: mainFunction.nested()
I quite understand that I can access to the nested function, because she is inside an object and I'm accessing it with . like JS syntax wants to.
But I'm wondering how can JS understand which code to run when I just call mainFunction() ?
Let me know if I'm clear enough, Its kind of a silly question...
Thanks
and a nested function I can call like this: mainFunction.nested()
It's not a nested function. This is a nested function:
function example() {
function nested() {
}
}
It's just a function assigned to a property.
But I'm wondering how can JS understand which code to run when I just call mainFunction() ?
Because there's no ambiguity, you're referring to mainFunction. If you wanted to use the other function, you'd refer to it itself (the way you showed, mainFunction.nested()). It's exactly how there's no ambiguity between obj and obj.prop; the former refers to the object, the latter refers to the object's property.
*Is there a way to call a function defined inside another function in javaSCRIPT? For example:
window.onload() = function() {
function my_function(){
print("Blah");
};
};
function function_two(){
my_function();
};
Is there a way to do something like the above (calling my_function in function_two even though it's defined inside the window.onload() function)? In my actual code, which also uses the raphael.js library, I'm trying to write a button in HTML, which using the onClick function, calls a function(like function_two) that runs the function defined in window.onload() (like my_function). However the console says that the my_function is undefined.
The scope of the function is the core issue here, as Zeychin and Trevor have said. I thought I'd offer another way of handling it. Basically, you can set your function to a variable that's in a higher scope (that is, accessible to both the onload and function_two functions), while defining it inside the onload function as you originally have:
var myFunction; //This is the placeholder which sets the scope
window.onload() = function() {
myFunction = function() { //Assign the function to the myFunction variable
print('blah');
}
}
function function_two() {
myFunction();
}
This might be handy if you only know the information you need for myFunction once you're in the onload event.
You can not do what you are asking to do.
The function my_function()'s scope is only within the anonymous function, function(). It falls out of scope when the method is not executing, so this is not possible.
Trevor's answer is the way to do this.
window.onload = function() {
my_function()
};
function my_function(){
alert("Blah");
};
function function_two(){
my_function();
};
Is it possible to pass a javascript function with parameters as a parameter?
Example:
$(edit_link).click( changeViewMode( myvar ) );
Use a "closure":
$(edit_link).click(function(){ return changeViewMode(myvar); });
This creates an anonymous temporary function wrapper that knows about the parameter and passes it to the actual callback implementation.
Use Function.prototype.bind(). Quoting MDN:
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
It is supported by all major browsers, including IE9+.
Your code should look like this:
$(edit_link).click(changeViewMode.bind(null, myvar));
Side note: I assume you are in global context, i.e. this variable is window; otherwise use this instead of null.
No, but you can pass one without parameters, and do this:
$(edit_link).click(
function() { changeViewMode(myvar); }
);
So you're passing an anonymous function with no parameters, that function then calls your parameterized function with the variable in the closure
Or if you are using es6 you should be able to use an arrow function
$(edit_link).click(() => changeViewMode(myvar));
Yes, like this:
$(edit_link).click(function() { changeViewMode(myvar) });
You can do this
var message = 'Hello World';
var callback = function(){
alert(this)
}.bind(message);
and then
function activate(callback){
callback && callback();
}
activate(callback);
Or if your callback contains more flexible logic you can pass object.
Demo
This is an example following Ferdinand Beyer's approach:
function function1()
{
function2(function () { function3("parameter value"); });
}
function function2(functionToBindOnClick)
{
$(".myButton").click(functionToBindOnClick);
}
function function3(message) { alert(message); }
In this example the "parameter value" is passed from function1 to function3 through function2 using a function wrap.
How can I call the Jquery Function From other javaScript Function (Not
from jquery function)
i.e
I have written some Jquery code like below
$(document).ready(function()
{
function func1(){
// Do Something.
}
});
Now I want to call the func1() function from other JavaScript Function
i.e Say an Example
function callJqueryFunction(){
**func1();**
}
The above javaScript function calling not work
but If do the same code inside a
$(document).ready(function()
{
function func1(){
// Do Something.
}
**func1();**
});
Its Work fine.
So what can I do for call the function which is inside a Jquery code
format.
this has nothing to do with jquery in general, it's just a scoping issue
function foo()
{
function bar() {
....
}
bar() // Ok
}
bar() // Not OK
function 'bar' is "local" in foo and is not visible outside of it.
if you want a function to be used in different contexts, declare it globally.
Isn't func1 scoped inside that ready function? If you declare func1 outside of ready it should be available to other javascript code just as any other function.
So:
$(document).ready(function()
{
func1();
});
function func1()
{
// Do something
}
function SomeOtherJavascriptFunction()
{
func1();
}
The function func1 is defined in the scope of the parent function. If you don't need this, you can simply move the definition outside (I expect in case of $(document).ready you don't really need it). Otherwise you will need to pass/store the function reference somewhere, and use that to call it.
You can do something like this
var funcToCall;
$(document).ready(function()
{
funcToCall = function func1(){
// Do Something.
}
});
funcToCall();