javascript function into variable - javascript

Happy Holidays to all.
I'm trying to execute a function that I have saved in a variable, as I could do this?
I tried this.
funcVar = 'function (a, b) {c = a + b; alert (c);}';
document.write (funcVar);
but has no functionality, I want to use that function that is in the variable at some point.

You need to:
Write it as a function, not a string
Call it, not write it to the document as if it were a string of HTML
Pass arguments as it doesn't make sense to add undefined to itself
You should:
Not use globals
Such:
var funcVar;
funcVar = function (a, b) {
var c = a + b;
alert (c);
};
funVar(1,2);

That's not a function, that's a string. You need to remove the quotes. And you need to execute it, not print it:
var funcVar = function (a, b) {c = a + b; alert (c);};
funcVar(23, 42);

This works. Thank you all.
var funcVar;
funcVar = 'function stop() {alert ("Test");}';
eval(funcVar);
stop();

Related

How to dynamically change the contents of a function using JavaScript

To help understand this the function is in the html page and it is generated, I cannot change the generated code:
function Update_qu7260() {
var newVal = ''
for( var idx = 0; idx < 2; idx++ )
{
var test
if( idx == 0 ) test = text7263
else if( idx == 1 ) test = text7265
if( test.matchObj ) newVal += test.leftSel + "-" + test.matchObj.rightSel + ","
}
newVal = newVal.substring( 0, newVal.length-1 )
VarQuestion_0001.set( newVal )
qu7260.hasBeenProcessed=false;
doImmFeedback('qu7260');
}
var qu7260 = new Object();
...
qu7260.updFunc = Update_qu7260;
var qObj=[qu7260];
Note in the above the number "7260", the numbers start at 1 so there are lots of them and each Update_###() will be different so I cannot re-write them with "hard wired" code. My code is in an external JavaScript file and is executed onLoad:
...
var updFunc = qObj[0].updFunc.toString();
if(updFunc.indexOf('doImmFeedback(')!=-1){
updFunc = updFunc.replace('doImmFeedback','doImmQuestionFeedback'); // do my function
updFunc = updFunc.replace('function ',''); // remove the word function
var funcName = updFunc.substr(0,updFunc.indexOf('(')); // get the function name e.g. Update_qu7260
updFunc = "window['" + funcName + "']=function" + updFunc.replace(funcName,'');
eval(updFunc);
}
...
When I change the eval() to alert() I can see the that it's correct, however, the eval() is not raising any errors and my function doImmQuestionFeedback is not being called. When I subsequently do an alert(qObj[0].updFunc.toString()) I see the original function.
It would seem that I have provided information that is too complex, so the following code is a better example:
function hi(){alert('hi');}
function changeHi(){
hi(); // I get an alert box with hi
newHi = "function hi(){alert('hi there');}"
eval(newHi);
hi(); // I get an alert box with hi
window.setTimeout('hi()',500); // I get an alert box with hi
}
window.setTimeout('changeHi()',500);
The following is the original question:
I have a predefined function that I did not create, however, I know it's name so I can get the function itself and then I change it by doing:
var funcText = window.updateFunc.toString();
funcText = funcText.replace('doSomeOtherFunction(','doMyFunction(');
How do I update the actual function so it will do all that it did before except it will now call doMyFuntion()?
The following is an example to help visualize what I want to do, the actual function I need to change is very complex. I have:
function updateFunc(whatToUpdate,true){
... - do lots of stuff.
var retVal = doSomeOtherFunction(whatToUdate);
... - do lots of stuff based on retVal
}
I need to change this to:
function updateFunc(whatToUpdate,true){
... - do lots of stuff
var retVal = doMyFunction(whatToUdate);
... - do lots of stuff based on retVal, I have had a chance to change retVal
}
Then the first thing my function will do is call doSomeOtherFunction() check/change the returned value and subsequently return the value to the updateFunc().
I have tried to manipulate the funcText above to:
funcText = 'window.updateFunc = function(...';
eval(funcText);
Without success.
This may be closed enough to what you are looking for.
Assuming you have this original function:
function originalFunc(val) {
// this function converts input string to upper case
return val.toUpperCase();
}
Now you want to override it to something either before or after you execute that function (in this example, we execute before, of course before or after doesn't matter in this case).
// we preserve orignal function
var originalFunc_save = originalFunc;
// now we override the original function with this block
var originalFunc = function(text) {
// lets call the orignal function
text = originalFunc_save(text);
// now do our custom thing
return text.split('').reverse().join('');
}
So our test should work.
var text = 'This is a test';
console.log(originalFunc(text));
Output:
TSET A SI SIHT
This method also works if you have to override functions inside a class. The only thing we have to be careful of is to choose a saved name that doesn't interfere with the original class code. _save may not be good enough, but you get the idea.
UPDATE: I'm updating this code above to use a string variable pointing to the original function. I think this is what the OP wanted.
Original code which defined by some library
function originalFunc(val) {
// this function converts input string to upper case
return val.toUpperCase();
}
Now we use the func string variable to point to that function and execute it.
var text = 'This is a test';
var func = 'originalFunc';
text = window[func](text);
console.log(text);
Output: Of course we get the original intended result because we haven't overridden it.
THIS IS A TEST
Now we write our code to override the original function behavior using a string pointing to the function.
// let's define a new function string
var funcSaved = func + '___saved';
// now preserve the original function code
window[funcSaved] = window[func];
// override the original function code block
window[func] = function(text) {
// lets call the orignal function
text = window[funcSaved](text);
// now do our custom thing
return text.split('').reverse().join('');
}
// let's test the code
text = 'This is a test';
text = window[func](text);
console.log(text);
Output:
TSET A SI SIHT
You can make a clone of updateFunc function, edit it at your discretion and work with it in what follows.
function updateFunc(whatToUpdate, param){ // the initial function
...
var retVal = doSomeOtherFunction(whatToUpdate);
return retVal;
}
// formation of unnamed function as string
var newfunc = updateFunc.toString().replace('function updateFunc', 'function ').replace('doSomeOtherFunction(', 'doMyFunction(');
function doMyFunction(whatToUpdate){ // your new function, just for example
console.log(parseInt(whatToUpdate) * 10);
}
var newUpdateFunc;
// declaring new version of 'updateFunc' function
// which is stored in 'newUpdateFunc' variable
eval("newUpdateFunc = " + newfunc);
newUpdateFunc(3); // outputs '30'
I believe this is a valid use case for the forgotten JavaScript with feature.
Basic idea: you call original updateFunc supplying your own version of doSomeOtherFunction to it using with namespace injection:
function updateFunc(whatToUpdate,true){
... - do lots of stuff.
var retVal = doSomeOtherFunction(whatToUdate);
... - do lots of stuff based on retVal
}
function patchUpdateFunc() {
var original_doSomeOtherFunction = window.doSomeOtherFunction;
var original_updateFunc = window.updateFunc;
function doMyFunction() {
// call original_doSomeOtherFunction() here,
// do your own stuff here.
};
window.updateFunc = function() {
with ({doSomeOtherFunction: doMyFunction}) {
return original_updateFunc.apply(this, arguments);
}
}
}
patchUpdateFunc();
I think you are going at this way too complicated.
If you only have doMyFunction and doSomeOtherFunction to switch between, you could just create a flag somewhere telling you to use one or the other when used in an if-statement.
If you want to call a function with a name you do not know beforehand and you only get a name during runtime, you could either accept the function to call as a parameter or accept the name of the function as a parameter and call it like so: var retVal = window[functionName](); (assuming functionName is a property of the window object).
I would highly recommend directly accepting a function as a parameter since the function may not be defined in a global scope.
EDIT:
After your clarification, I think, I can give you a satisfying answer:
if you have a string like var functionString = "function updateFunc(whatToUpdate){var retVal = doMyFunction(whatToUpdate);}";
You can define a function using a Function object:
window.updateFunc = new Function("whatToUpdate", "return (" + functionString + ")(whatToUpdate)");
This will replace the already existing function and you can give it any valid function string you want as long as you know and specify the arguments.
If I understood correctly, you want to override the external function. You can achieve that with the following code
//Someone else's function
function externalFunction(foo){
return "some text";
}
//Your function
function myFunction(value){
//Do something
}
//Override
var externalFunction = (function(){
var original = externalFunction; //Save original function
return function(){
var externalFunctionReturnValue = original.apply(this, arguments);
return myFunction(externalFunctionReturnValue);
}
})();
I strongly sugest not to use eval, but since you want to parse javascript from string:
function hi(){alert('hi');}
function changedHi(){
hi(); // I get an alert box with hi
newHi = "window['hi'] = function(){alert('hi there');}"
eval(newHi);
hi(); // I get an alert box with hi there
window.setTimeout('hi()',500); // I get an alert box with hi there
}
window.setTimeout('changedHi()',500);
UPDATE:
This code snippet works which is your original code:
<script type="text/javascript">
function doImmFeedback(foo){
console.log("DoImmFeedback: " + foo);
}
function Update_qu7260() {
console.log("Some code")
doImmFeedback('qu7260');
}
</script>
<script type="text/javascript">
var qu7260 = new Object();
qu7260.updFunc = Update_qu7260;
var qObj=[qu7260];
var updFunc = qObj[0].updFunc.toString();
if(updFunc.indexOf('doImmFeedback(')!=-1){
updFunc = updFunc.replace('doImmFeedback','doImmQuestionFeedback'); // do my function
updFunc = updFunc.replace('function ',''); // remove the word function
var funcName = updFunc.substr(0,updFunc.indexOf('(')); // get the function name e.g. Update_qu7260
updFunc = "window['" + funcName + "']=function" + updFunc.replace(funcName,'');
console.log(updFunc);
eval(updFunc);
}
function doImmQuestionFeedback(foo){
//Your function
console.log("doImmQuestionFeedback: " + foo);
}
Update_qu7260(); //This executes your doImmQuestionFeedback
</script>
So if your function isn't running, your function isn't in the global scope, or something else is happening, and we can't know if don't have any more info. Check your developer's console for javascript errors.

is there a toSourceString() kind of function for Function in Javascript?

So, I'm looking for toSourceString() method for Function object which will return the source code of the Function object in String format.
For example, If I have
(function(a, b) {
function useThis(c,d) {
return 'hello' + c + d;
}
console.log(useThis('Jenny', 'Jim'));
}).bind(this);
kind of function, then I wish if I run toSourceString(), I will just get the inner source part of the function like:
function useThis(c,d) {
return 'hello' + c + d;
}
console.log(useThis('Jenny', 'Jim'));
Is there any default function that works across browsers? Or is there any Regex way to find some string and replace/remove the first and the end?
Try this:
myFunction.toString().replace(/^function[^{]+{/,'').slice(0,-1)
Gets the function, strips the beginning and end.

Recursion function not defined error

Hi i have a problem with recursion.
i followed this example from wc3 http://www.w3schools.com/jsref/met_win_settimeout.asp
But mine seems to not work at all.
function rotateImages(start)
{
var a = new Array("image1.jpg","image2.jpg","image3.jpg", "image4.jpg");
var c = new Array("url1", "url2", "url3", "url4");
var b = document.getElementById('rotating1');
var d = document.getElementById('imageurl');
if(start>=a.length)
start=0;
b.src = a[start];
d.href = c[start];
window.setTimeout("rotateImages(" + (start+1) + ")",3000);
}
rotateImages(0);
Firebug throws the error :
rotateImages is not defined
[Break On This Error] window.setTimeout('rotateImages('+(start+1)+')',3000);
However if i change the timeOut to :
window.setTimeout(rotateImages(start+1),3000);
It recursives but somehow the delay doesn't work and gives me too much recursion(7000 in a sec)
There are many reasons why eval should be avoided, that it breaks scope is one of them. Passing a string to setTimeout causes it to be evaled when the timer runs out.
You should pass a function instead.
window.setTimeout(rotateImages(start+1),3000);
This calls rotateImages immediately, then passes its return value to setTimeout. This doesn't help since rotateImages doesn't return a function.
You probably want:
window.setTimeout(rotateImages,3000,[start+1]);
Or create an anonymous function that wraps a closure around start and pass that instead:
window.setTimeout(function () { rotateImages(start + 1); },3000);
The latter option has better support among browsers.
Be wary of code from W3Schools.
The other answers give a solution. I'll just add that you're recreating the Arrays and repeating the DOM selection every time the rotateImages function is called. This is unnecessary.
You can change your code like this:
(function() {
var a = ["image1.jpg","image2.jpg","image3.jpg", "image4.jpg"];
var c = ["url1", "url2", "url3", "url4"];
var b = document.getElementById('rotating1');
var d = document.getElementById('imageurl');
function rotateImages(start) {
b.src = a[start];
d.href = c[start];
window.setTimeout(function() {
rotateImages( ++start % a.length );
}, 3000);
}
rotateImages(0);
})();
Try this syntax:
window.setTimeout(function() {
rotateImages(start+1);
},3000);
setTimeout() expects a function reference as the 1st parameter. Simply putting a function call there would give the return value of te function as the parameter, this is why the delay did not work. However your first try with evaluating a string was a good approach, but it is not recommended.

Run a json string function

I have a json string like this:
json = "{'run': 'function() { console.log('running...'); }'}"
How do I run that function inside of the json string?
You're going to have to use the eval() (doc) function. A lot of people have a lot of feelings about this function. JSON is best for transporting data, not functions (see JSON). The functions ought to lay in the script on the page.
Also there's a syntax error in your posted code (function is wrapped in single quotes ('), and so is console.log's first parameter).
But...
json = "{\"run\":\"function() { console.log('running...'); }\"}"; //Fixed, thanks
obj = JSON.parse(json);
eval(obj.run); //Logs "running..."
Update:
Oh, and I was mistaken. Eval doesn't seem to like anonymous functions. With the revised code, it will parse json into an object with a run property that is a String, with value "function() { console.log('running...'); }". But when you eval(obj.run);, you will get a SyntaxError declaring an unexpected (. Presumably, this is the ( in function ().
So, I can think of two ways of dealing with this:
Remove the anonymous function in your actual JSON string (so, make your PHP forget about function () {), and eval it. This means it will be called as soon as you eval it.
What I think you want, is to be able to evaluate it to an anonymous function, that will be called when you want. So, you could write a wrapper function (you would need to follow option 1 for this as well):
function returnEval(str) {
return function () { eval(str); }
}
This would allow you to call it. So:
obj = JSON.parse(json);
obj.run = returnEval(obj.run);
obj.run(); //Logs "running..."
Hope this helps!
JSON is not really intended for that, but here seems to be a good example.
This works for me in Firefox:
var json = "{'run': 'function() { console.log(\\'running...\\'); }'}";
eval('var j = ' + json);
eval('var r = ' + j.run);
r();
Try this, it works:
var JS = { "function" : "alert( new Date().getTime() );" };
new Function ( "", JS["function"] )();
for nested functions you also can use something like this:
jQuery.each( JS, function( method, value ) {
new Function ( "a, b", "if ( a == 'function' ) { new Function ( '', b )(); }" )( method, value );
} );
I know that thread is old but i want to share with you guys. You can make string a json and parse it easily with these functions.
function makeString(val){
return JSON.stringify(val, function (key, value) {if (typeof value == 'function') {return value.toString();}return value;});
}
function parseIt(val){
return JSON.parse(string, function (key, value) {if (value.toString().search("function")>-1) {eval("var func = " + value);return func;}return value;});
}
Without using eval('function()') you could to create a new function using new Function(strName). The below code was tested using FF, Chrome, IE.
<html>
<body>
<button onclick="test()">Try it</button>
</body>
</html>
<script type="text/javascript">
function test() {
try {
var myJSONObject = {"success" : true, "jsFunc" : "myFunction()"};
var fnName = myJSONObject.jsFunc;
var fn = new Function(fnName);
fn();
} catch (err) {
console.log("error:"+err.message);
}
}
function myFunction() {
console.log('Executing myFunction()');
}
</script>

Javascript: return function with predefined arguments

I have a function like
function a (p1, p2) { /* ... */ }
and in some scope want to get something like this:
function b (/* no params! */) { return a (my1, my2) }
where my1 and my2 are defined somehow in this scope. So I should get a parameterless function b, which when called calls a with fixed parameters my1 and my2. Now, the question is, why this is not right, and which is :)
UPD: Ok, I had some callbacks in those params, now found out, how to process them all. What I missed was to apply the technique twice. Thank you.
Just make a function that returns a new function b:
function getB(my1, my2) {
return function() {
a(my1, my2);
}
}
and use it like this:
var b = getB(my1, my2);
Write a function that takes my1 and my2 and creates function b:
function make_b(my1, my2){
return function b(){ return a(my1, my2);};
}
I'm not sure if I understood you correctly, but you can look at a concept called currying. It is possible to curry a function in Javascript such that you can obtain another function with some or all of the parameters preset.
You can look at an implementation here.
If you are using Prototype, you can obtain the function b this way.
var b = a.curry(arg1, arg2);
now calling b() is the same as calling a(arg1, arg2)
Why is this not right? Are you getting an error? I tried to reproduce a working sample based one your description and what I have works so perhaps you could post a more detailed sample:
<script>
function a(p1, p2)
{
return 'hello ' + p1 + ' and ' + p2;
}
function b(my1,my2)
{
return function()
{
return a(my1,my2);
}
}
var wrapper=b();
alert(wrapper());
</script>
Edit
Based on your comment to another answer I updated my sample to show how you can wrap a function.
Edit 2
Ok so I replaced them with variables;-)
Put the values in an array (or JSON) and return the array.
function a (p1,p2) {
var my = []
my[0] = p1
my[1] = p2
return my
}
function b () {
return a(my1,nmy2)
}
Maybe I'm missing the point in your example, I don't know.
There appear to be three parts:
Defining a:
function a(M, N) {
return M + N;
}
Defining b:
var X = 10;
var Y = 25;
var b = function() {
return a(X, Y);
}
Using b:
var thirtyFive = b(); // thirtyFive = 35
This example uses the assignment of an onclick event handler
during page load to demonstrate how to create a function
reference containing embedded references to then local
values in the setup function.
<html>
<head>
<title>Scope passing Test</title>
<script type="text/javascript">
// Your target function
function a(p1,p2) { alert("p1="+p1+ " p2="+p2); }
function yourSetupFunction()
{
// Declare some local variables that your "a()" function cannot see to test.
var my1 ="Look Ma" ;
var my2 ="No hands" ;
// Snag a reference to the <a id="testA"></a> element
var oAelement=document.getElementById("testA");
oAelement.addEventListener( "click" ,
(function(scopePass_My1,scopePass_My2)
{
return function()
{
a(scopePass_My1,scopePass_My2)
}
})(my1,my2) ,true);
}
</script>
</head>
<body onload="yourSetupFunction()">
<a id="testA" href="#" onclick="return false;">Click to Test</a>
</body>
</html>
The actual magic is just a few lines
(function(scopePass_My1,scopePass_My2)
{
return function()
{
a(scopePass_My1,scopePass_My2)
}
})(my1,my2)
The first set of parens cause the contents to be evaluated to a function reference.
The second set of parens ... (my1,my2) ... cause the function reference to be called
which returns another function reference which can see the parameters passed in
... scopePass_My1,scopePass_My2 ... and is able to pass these to your target function a(p1,p2)
Hope that helps.

Categories

Resources