Can Javascript function replace own body - javascript

function decode(s) {
decode = function (s) {
return s + '!'
}
return s+'?'
}
console.log(decode("asd"))//outputs asd?
console.log(decode("qwe"))//outputs qwe!
This code will replace function body from within a function. But unfortunately this is not very clean. Because first decode is module function scope and second decode is global variable scope. Is there another, cleaner way to replace the function body from inside the function?
The usage case example would be that the first time function called it might need to initialize some data. And subsequent calls will only do a decoding.

You can use something like this to make a variable that tracks the number of times the function has been called and do some initialization the first time it's called:
var decode = (function(){
var numCalls = 0;
var potatos;
return function(){
if(numCalls++ == 0){
// Initialize some stuff here
potatos = 7;
}
// Use stuff here
console.log(potatos);
potatos += 3;
}
})();

The pattern you are using is well known as Self-Defining Functions (or possibly lazy function definition).
Instead, why not use an object with a constructor function,
var Decode = function(s){
var that = this;
that.property = s;
that.decode = function(){
return that.property + "!";
};
};
var decode = new Decode("asd");
decode.property //"asd"
decode.decode() //"asd!"

Related

JS Function returning function for later use - arguments undefined

I am trying to create a function that can then return many functions based on an input. Here is an example of the problem I am facing.
var giveFunction = function(text) {
return function(text) {
console.log(text)
}
}
var test = giveFunction('this is a test');
test()
Running test() at the end prints undefined instead of 'this is a test.' Is there any way around this problem?
The inner function should not contain any parameter,
var giveFunction = function(text) {
return function() {
console.log(text)
}
}
Let it create a closure. If it has a parameter then that would be read during execution and undefined would be printed as you are not calling that function with any arguments.
If you want your code to be working then you have to use bind for that,
var giveFunction = function(text) {
return function(text) {
console.log(text)
}.bind(null, text)
}
var test = giveFunction('this is a test');
test(); //'this is a test'
Lets go one step further and ask why?
var outerFunction = function(outerParameter) {
return innerFunction function(innerParameter) {
// in here we have access to anything in this function and the outer function
// all the way to out the the global scope
// therefore, we dont need to pass innerParameter in again as a parameter! ( in your case we 'next')
}
/// now over here, outside of innerFunction, we do NOT have access to innerParameter!
}
So applying the above principles to your code we have:
var giveFunction = function(text) {
return function() {
console.log(text)
}
}
var test = giveFunction('this is a test');
test()
which now works!
Finally, checkout the most upvoted post under the javascript tag:
How do JavaScript closures work?

Only jQuery function syntax works in specific scenario

Take a look at the anonymous jQuery function from the jfiddle snippet below. There are other libraries as external references to this jfiddle, so I'm just guessing this is jQuery syntax.
http://jsfiddle.net/LEt4Q/12/
Code snippet:
$(function() {
var canvas = new draw2d.Canvas("gfx_holder");
var x = 20,
y = 20;
addArrowToConnection();
injectSetPosition();
var previousRec, newRec;
for (var i = 1; i <= 64; i++) {
newRec = addRec(canvas, i, x, y);
if (i / 8 == Math.floor(i / 8)) {
y = y + 80;
x = 20;
} else {
x = x + 80;
}
if (previousRec != null && newRec != null) {
var conn = new draw2d.Connection();
conn.sourcePort = previousRec.port;
conn.targetPort = newRec.port;
var label = new draw2d.shape.basic.Label({
text: "Label"
});
label.setColor("#0d0d0d");
label.setFontColor("#0d0d0d");
label.setStroke(0);
var arrow = new draw2d.decoration.connection.ArrowDecorator(10, 6);
conn.setTargetDecorator(arrow);
conn.setRouter(new draw2d.layout.connection.DirectRouter());
conn.add(label, new draw2d.layout.locator.ParallelMidpointLocator());
canvas.add(conn);
}
previousRec = newRec;
}
});
All of the other functions within this jfiddle are using one of the JavaScript standard function notations (var functionName = function() {} vs function functionName() {}) except the one above. If you try replacing the syntax with the other three notations, the code doesn't work. What is significant about this notation? Why does only the last syntax work?
var fun = function() { ... } // doesn't work
function fun() { ... } // doesn't work
(function() { ... })(); // doesn't work
$(function() { .. }); // works!!!!!!!!!!!!!!!
Because they are not the same thing. You are confusing the shorthand for the ready event in jQuery, and an IIFE:
$(document).ready(function(){})
Is the same as:
$(function(){})
But it is not the same as:
(function(){}())
The latter is an immediately invoked function expression; it has no relation to the ready event. It is simply a function that executes itself, for the purpose of creating a closure.
This is not a syntactic issue. If you call the global jQuery function ($) and pass it a function, it means exactly the same thing as
$(document).ready(function() { ... });
In other words, the setup you posted makes that function invocation be delayed until the browser has finished assembling the DOM. The function is probably in the <head> of your page (or imported there), so it won't work unless it runs when the DOM is ready because it wouldn't otherwise be able to locate that "gfx_holder" element.
var fun = function() { ... } // doesn't work
This syntax defines variable to refer to function object, does not call the function.
function fun() { ... } // doesn't work
This sytax defines a function, does not call the function
(function() { ... })(); // doesn't work
This syntax defines an anonymous function and calls it immediately, before the DOM is ready

Return value to a function

How does one pass a variable to one function and then return a value to another function?
I have simple example here where I am trying to work it out. The first function accepts the argument 'currpage', returns it to the second function correctly as a number, but then when I call the second function, console.log shows NaN. Not sure what I might be doing wrong.
$(document).ready(function () {
var currpage = 1;
$('p').click(function () {
var xyz = passfrom(currpage); //pass var to function and return value
console.log(xyz); //returns correct value
var abc = passto();
console.log(abc); //NaN
})
})
function passfrom(currpage) {
var newpage = parseInt(currpage) * 1000;
return newpage;
}
function passto() {
var newcurr = passfrom();
var newcurr = newcurr * 1000;
console.log(typeof (newcurr)); //number
return newcurr;
}
How does one pass a variable to one function and then return a value to another function?
A variable is just a little container where you store a value. When you pass a variable to a function, you really pass the value of that variable to it. So in your case:
passfrom(curpage);
and
passfrom(1);
are the same.
Within a function, variable names are used to access these values. These names are totally independent of whatever name was attached to the value outside the function (if it even had a name). They are more like aliases. To distinguish them from variables, we call them parameters. So this one:
function passfrom(currpage) {
var newpage = parseInt(currpage)*1000;
return newpage;
}
and this one:
function passfrom(myownname) {
var newpage = parseInt(myownname)*1000;
return newpage;
}
are exactly the same. And if we were to write out what actually happens, we'd get this:
// var xyz = passfrom(currpage);
var xyz = value-of(passfrom(value-of(currpage))
So all you have to do to pass a value to some function, is to make sure that it has such a parameter name available by which it can use that value:
function passto(myalias) {
console.log(myalias);
}
passto(xyz); // writes 1000 to the console.
The above is the actual answer to your question.
To make things a little bit more complicated, there are two more things to take into account:
Scope. The parameter names only work within your function. If they are the same as some variable name outside the function, that outside variable is hidden by the parameter. So:
var currpage = 1;
function plusOne(currpage) { curpage += 1; }
plusOne(currpage);
console.log(currpage); // 1, as the variable currpage was hidden
function plusTwo(othername) ( currpage += 2; }
plusTwo(currpage);
console.log(currpage); // 3, as currpage was not hidden
This all works for strings, integers, and other simple types. When you're dealing with more complex types, the parameter name isn't an alias for the value passed to the function, but for the location of the original value. So in that case, whatever you do with the parameter within the function will automatically happen to the variable outside the function:
var arr = [ 0, 1 ];
function plusOne(somearr) { somearr[0] += 1; }
plusOne(arr);
console.log(arr[0]); // 1, as somearr references arr directly
This is called "pass-by-value" and "pass-by-reference."
You're dealing with two different currpage variables, causing one to be undefined when you try to perform arithmetic on it, resulting in a NaN result. See my inline code comments below for further explanation:
$(document).ready(function() {
var currpage=1; // Local to this function, because of the var keyword.
...
})
}) // I'm assuming this extra closing brace and paren is a typo.
// Otherwise, your code example has a syntax error or is incomplete.
function passfrom(currpage) {
// currpage is the name of the parameter to passfrom.
// It happens to have the same name as a local var in
// the document.ready callback above, but the two are
// not the same.
var newpage = parseInt(currpage)*1000;
return newpage;
}
function passto() {
// passfrom is called with an implicit 'undefined' argument.
// Thus, undefined will be used in the arithmetic ops and produce NaN.
var newcurr = passfrom();
// Don't need the var keyword below.
var newcurr = newcurr * 1000;
console.log(typeof(newcurr)); //number
return newcurr;
}
You need to make the same currpage variable accessible from both passfrom and passto by putting it in a higher/more global scope or move those functions into the same scope that the original currpage is in. Something like this:
var currpage;
$(document).ready(function () {
$('p').click(function () {
var xyz = passfrom(1); //pass var to function and return value
console.log(xyz); //returns correct value
var abc = passto();
console.log(abc); //NaN
})
})
// Rename the param so there isn't a naming conflict.
function passfrom(currpageParam) {
// If the param is a number, reset the global var.
if (typeof currpageParam == 'number') { currpage = currpageArg; }
var newpage = parseInt(currpage) * 1000;
return newpage;
}
function passto() {
var newcurr = passfrom();
newcurr = newcurr * 1000;
console.log(typeof (newcurr)); //number
return newcurr;
}
Be careful though. You'll probably want to take steps to protect your currpage var from outside modification. Also, I suspect that there's a better way to do what you're trying to do, but it isn't clear exactly what that is, so I can't suggest anything.

Function Definitions as Arguments

var cancel = setTimeout(function(){clearTimeout(cancel);}, 500);
var cancel = setTimeout(clearTimeout(cancel), 500);
Scholastic question: The first of these two expressions work, while the second does not. The setTimeout() method is accepting a function and a duration as its arguments and both of these examples are clearly providing that. The only difference is that the first is a function definition while the second is a function invocation.
If functions designed to take a function as an argument can only handle function definitions, how do you go about providing that function with the variables it may need? For example:
stop = function(y){clearInterval(y)};
count = function(x){
var t = 0,
cancel = setInterval(function(){console.log(++t);},1000);
setTimeout(stop(cancel),x);
};
count(5000);
The function above doesn't work because it's invoking the function
stop = function(){clearInterval(cancel)};
count = function(x){
var t = 0,
cancel = setInterval(function(){console.log(++t);},1000);
setTimeout(stop,x);
};
count(5000);
The function above doesn't work because the stop() doesn't have access to the cancel variable.
Thank you in advance for attempting to educate me on the work-around for this type of issue.
The setTimeout() method is accepting a function and a duration as its
arguments and both of these examples are clearly providing that. The
only difference is that the first is a function definition while the
second is a function invocation.
Yes but when you invoke a function you return the result which could be a string, integer, etc..., so you are no longer passing a function pointer but some string, integer, ... which is not what the setTimeout function expects as first argument.
Think of the second example like this:
var result = clearTimeout(cancel); // result is now an integer
setTimeout(result, 500); // invalid because setTimeout expects a function pointer
If functions designed to take a function as an argument can only
handle function definitions, how do you go about providing that
function with the variables it may need?
You could use closures:
var stop = function(y) { clearInterval(y); };
var count = function(x) {
var t = 0,
var cancel = setInterval(function() { console.log(++t); }, 1000);
setTimeout(function() { stop(cancel); }, x);
};
count(5000);
or simply:
var count = function(x) {
var t = 0,
var cancel = setInterval(function() { console.log(++t); }, 1000);
setTimeout(function() { clearInterval(cancel); }, x);
};
count(5000);
You get around it exactly as you have in the first line of code by wrapping the function call with an anonymous function.
Try passing in the cancel variable to the anonymous function.
stop = function(cancel){clearInterval(cancel)};
count = function(x){
var t = 0,
cancel = setInterval(function(){console.log(++t);},1000);
setTimeout(stop(cancel),x);
};
count(5000);
Local variables are always injected into nested scopes, for example those introduced by function declarations via function () { }. This is what is commonly called a closure and it forms an important tool in Javascript programming.
Therefore, setTimeout( function() { stop(cancel); },x); will do, the inner function has access to the cancel variable defined in the outer scope (it can even change its value).

Wrapping a function in Javascript / jQuery

If I have an arbitrary function myFunc, what I'm aiming to do is replace this function with a wrapped call that runs code before and after it executes, e.g.
// note: psuedo-javascript
var beforeExecute = function() { ... }
var afterExecute = function() { ... }
myFunc = wrap(myFunc, beforeExecute, afterExecute);
However, I don't have an implementation of the required wrap function. Is there anything that already exists in jQuery like this (I've had a good look through the docs but cannot see anything)? Alternatively does anybody know of a good implementation of this because I suspect that there are a bunch of edge cases that I'll miss if I try to write it myself?
(BTW - the reason for this is to do some automatic instrumentation of functions because we do a lot of work on closed devices where Javascript profilers etc. are not available. If there's a better way than this then I'd appreciate answers along those lines too.)
Here’s a wrap function which will call the before and after functions with the exact same arguments and, if supplied, the same value for this:
var wrap = function (functionToWrap, before, after, thisObject) {
return function () {
var args = Array.prototype.slice.call(arguments),
result;
if (before) before.apply(thisObject || this, args);
result = functionToWrap.apply(thisObject || this, args);
if (after) after.apply(thisObject || this, args);
return result;
};
};
myFunc = wrap(myFunc, beforeExecute, afterExecute);
The accepted implementation does not provide an option to call wrapped (original) function conditionally.
Here is a better way to wrap and unwrap a method:
/*
Replaces sMethodName method of oContext with a function which calls the wrapper
with it's list of parameters prepended by a reference to wrapped (original) function.
This provides convenience of allowing conditional calls of the
original function within the wrapper,
unlike a common implementation that supplies "before" and "after"
cross cutting concerns as two separate methods.
wrap() stores a reference to original (unwrapped) function for
subsequent unwrap() calls.
Example:
=========================================
var o = {
test: function(sText) { return sText; }
}
wrap('test', o, function(fOriginal, sText) {
return 'before ' + fOriginal(sText) + ' after';
});
o.test('mytext') // returns: "before mytext after"
unwrap('test', o);
o.test('mytext') // returns: "mytext"
=========================================
*/
function wrap(sMethodName, oContext, fWrapper, oWrapperContext) {
var fOriginal = oContext[sMethodName];
oContext[sMethodName] = function () {
var a = Array.prototype.slice.call(arguments);
a.unshift(fOriginal.bind(oContext));
return fWrapper.apply(oWrapperContext || oContext, a);
};
oContext[sMethodName].unwrapped = fOriginal;
};
/*
Reverts method sMethodName of oContext to reference original function,
the way it was before wrap() call
*/
function unwrap(sMethodName, oContext) {
if (typeof oContext[sMethodName] == 'function') {
oContext[sMethodName] = oContext[sMethodName].unwrapped;
}
};
This is the example I would use
<script type="text/javascript">
var before = function(){alert("before")};
var after = function(param){alert(param)};
var wrap = function(func, wrap_before, wrap_after){
wrap_before.call();
func.call();
wrap_after.call();
};
wrap(function(){alert("in the middle");},before,function(){after("after")});
</script>
You could do something like:
var wrap = function(func, pre, post)
{
return function()
{
var callee = arguments.callee;
var args = arguments;
pre();
func.apply(callee, args);
post();
};
};
This would allow you to do:
var someFunc = function(arg1, arg2)
{
console.log(arg1);
console.log(arg2);
};
someFunc = wrap(
someFunc,
function() { console.log("pre"); },
function() { console.log("post"); });
someFunc("Hello", 27);
Which gives me an output in Firebug of:
pre
Hello
27
post
The important part when wrapping this way, is passing your arguments from the new function back to the original function.
Maybe I'm wrong, but I think you can directly create an anonym function and assign it to myFunc:
myFunc = function(){
BeforeFunction();
myFunc();
AfterFunction();
}
In this way you can control the arguments of every function.

Categories