Javascript - keep reference to function before changing it - javascript

My code looks like this:
function x(a,b)
{
return a + b;
}
var f = x;
function x(a,b)
{
return a - b;
}
var res = f(2,1);
I expect that the result is 3 as f is pointing to function x before modifying it, but it isn't the case, how can I keep a reference to a function that is foing to be redefined?

Function declarations are processed before expressions. Therefore, from the point of view of the interpreter, your code is interpreted as this:
function x(a,b)
{
return a + b;
}
function x(a,b)
{
return a - b;
}
var f = x;
var res = f(2,1);
The solution is to re-assign the function using a function expression instead of a function declaration. This is because as I mentioned above expressions are processed after declarations:
function x(a,b)
{
return a + b;
}
var f = x;
x = function (a,b) // <--------- this fixes your problem
{
return a - b;
}
var res = f(2,1);
Note, that since declarations are processed before expressions, the following would work as well:
var f = x;
x = function (a,b)
{
return a - b;
}
var res = f(2,1);
function x(a,b) // this is processed first
{
return a + b;
}

Functions and variable declarations (but not variable assignments) are "hoisted" to the top of their containing scope.
So your code is equivalent to this:
function x(a,b) {
return a + b;
}
function x(a,b) { //this overwrites the previous function declaration
return a - b;
}
var f;
var res;
f = x;
res = f(2,1); //1
It should now be clear why f(2,1) is 1 instead of 2.
You can overcome this by creating functions as variables instead:
var x = function(a, b) {
return a + b;
}
var f = x;
console.log(f(2, 1)); //3
var x = function(a, b) {
return a - b;
}
var f = x;
console.log(f(2, 1)); //1

Assign your functions to variables when creating them:
var f1 = function(a, b) {
return a + b;
}
var f2 = f1;
f1 = function(a, b) {
return a - b;
}
alert( f1(2,1) ); // < Will subtract
alert( f2(2,1) ); // < Will add
This allows you to easily clone the function.

Related

Can I call a function with scope of another function?

See the following code:
function parent(child) {
var a = 4;
var b = 5;
child();
}
parent(function() {
console.log(a + b);
})
Here I understandably get:
Uncaught ReferenceError: a is not defined.
Is there anything I can do to change only the parent function so that the console.log() in the child function has access to a and b so that it can reference it in that way?
I know I can pass a and b into child as arguments, but I'm wondering if I can somehow call the child function with the parent scope injected into it so that I don't need to list the parameters in the child function.
I also looked at .call(), .apply(), and .bind(), but it seemed that would only help if I wrote this.a and this.b in both parent AND the child function.
You could use the window (by referencing this) to add globals to it, but this method isn't very nice, to say the least:
function parent(child) {
var a = 4;
var b = 5;
this.a = a;
this.b = b;
child();
}
parent(function() {
console.log(a + b);
})
Another ugly solution would be to use eval, which I do not reccomend either:
function parent(child) {
var a = 4;
var b = 5;
eval('var f = '+child);
f();
}
parent(function() {
console.log(a + b);
})
You're most likely better of passing through the variables like you mentioned above:
function parent(child) {
var a = 4;
var b = 5;
child(a, b);
}
parent(function(a, b) {
console.log(a + b);
})
Or, you could wrap your child function in a wrapper function (i.e. make it a closure), which can accept parameters a, b, for your child() to use like so:
function parent(child_wrapper) {
var a = 4;
var b = 5;
var child = child_wrapper(a, b);
child();
}
parent(function(a, b) { // wrapper function
return function() { // original child function (untouched, just being returned by the wrapper function)
console.log(a + b);
}
})

Execute Multiple functions in a function

function executeActions(param)
{
if((param != undefined) && (param.length > 0))
{
for(i=0; i < param.length; i++)
{
//eval like function
param[i]();
}
}
}
function clearFields()
{
...
}
function showAbs(param)
{
if(param == 'insert')
{
...
}
else if(param == 'update')
{
...
}
else
{
...
}
}
$("#clearButton").click(function(event)
{
//var functions = ["clearFields()","showAbs('insert')"];
var a = showAbs('insert');
var functions = [clearFields, a];
executeActions(functions);
});
Hello everyone!
How can I execute some functions with parameters in a row in a set of instructions like i've showed above?
If they don't have any parameters, then the functions execute like in chain, but, if one or more of them uses
some parameters, it stops with the error: "param[i] is not a function".
Maybe if you have another elegant solution for this code, i'd appreciate if you share with us.
Thank you all in advance!
You can use partial application for this. Partial application means that you take a given function and fix one or more parameters to it. Example
function sum(a, b){
return a + b;
}
function product(a, b){
return a * b;
}
function doSomething(){
// do something
}
function runFunctions(funcs){
for(var i = 0;i<funcs.length;i++){
funcs[i]();
}
}
var mySum = function(){
return sum(5, 6);
}
var myProduct = function(){
return product(2, 3);
}
runFunctions(mySum, myProduct, doSomething);
The above is using ES 5 syntax. You could make this a bit more concise using ES 6 syntax:
const sum = (a, b) => a + b;
const product = (a, b) => a * b;
const doSomething = () => // do something
const runFunctions = funcs => {
for(func of funcs)
func();
}
var mySum = () => sum(5, 6);
var myProduct = () => product(2, 3);
runFunctions(mySum, myProduct, doSomething);
or you could use the bind function to take care of fixing the vars:
const sum = (a, b) => a + b;
const product = (a, b) => a * b;
const doSomething = () => // do something
const runFunctions = funcs => {
for(func of funcs)
func();
}
runFunctions(sum.bind(null, 5,6), myProduct.bind(null, 2,3), doSomething);
For me a way you want to achieve may be not readable for other developers.
You may create a function that will group all your function executions like:
function groupedFunctions{
return {
A: funcA(param),
B: funcB(param),
C: funcC(param)
}
}
function executeActions(funcObj, params) {
funcObj.A(params.a);
funcObj.B(params.b);
}
let params = {a: 1, b:2}
executeActions(groupedFunction(), params)

Bind only second argument to javascript function

var add = function(a, b) {
return a + b;
}
var addOne =add.bind(null,1);
var result = addOne(4);
console.log(result);
Here the binded value of a is 1 and b is 4.
How to assign the binding value i.e)1 to the second argument of the function without using spread operator(...)
You could take a swap function with binding the final function.
var add = function (a, b) { console.log(a, b); return a + b; },
swap = function (a, b) { return this(b, a); },
addOne = swap.bind(add, 1),
result = addOne(4);
console.log(result);
With decorator, as georg suggested.
var add = function (a, b) { console.log(a, b); return a + b; },
swap = function (f) { return function (b, a) { return f.call(this, a, b) }; },
addOne = swap(add).bind(null, 1),
result = addOne(4);
console.log(result);
You could use the arguments object for reordering the parameters.
var add = function (a, b, c, d, e) {
console.log(a, b, c, d, e);
return a + b + c + d + e;
},
swap = function (f) {
return function () {
var arg = Array.apply(null, arguments);
return f.apply(this, [arg.pop()].concat(arg));
};
},
four = swap(add).bind(null, 2, 3, 4, 5),
result = four(1);
console.log(result);
You can use the following way
var add = function(x){
return function(y){
return x+y;
}
}
add(2)(3); // gives 5
var add5 = add(5);
add5(10); // gives 15
here add5() would set x = 5 for the function
This will help you what you need
var add = function(a) {
return function(b) {
return a + b;
};
}
var addOne = add(1);
var result = addOne(4);
console.log(result);
You can try this
function add (n) {
var func = function (x) {
if(typeof x==="undefined"){
x=0;
}
return add (n + x);
};
func.valueOf = func.toString = function () {
return n;
};
return func;
}
console.log(+add(1)(2));
console.log(+add(1)(2)(3));
console.log(+add(1)(2)(5)(8));

Declare variables and return value in one statement in javascript

In many functions I have noticed the following pattern: function declares variables, combines it to the result and returns result. It is shown in this very simple example:
function fn() {
var a = 1,
b = 2;
return a + b;
}
fn(); // 3
or:
function fn() {
var a, b;
return a = 1,
b = 2,
a + b;
}
fn(); // 3
I would like to minimize this code and reduce it to the one statement. It could look like this:
function fn() {
return a = 1,
b = 2,
a + b;
}
However this code declares variables a, b in global scope which is not acceptable. Is it possible to do this in javascript?
Maybe this works for you, which is not advisable because of using assignment alogn with the comma operator.
function fn(a, b) { // declaration in local scope
return a = 1, b = 2, a + b; // return value with comma operator
}
A newer approach takes default values and returns just the addition of both.
fn = (a = 1, b = 2) => a + b;
What you are trying to do (declare using var and return in same statement) is not possible with JavaScript syntax.
The most concise you can get is your first option:
function fn() {
var a = 1,
b = 2;
return a + b;
}
fn(); // 3

functions return functions that return functions javascript

How do I get this to return a value for x+y+z instead of an error?
function A (x) {
return function B (y) {
return function(z) {
return x+y+z;
}
}
};
var outer = new A(4);
var inner = new outer(B(9));
inner(4);
Like yent said, no "new"s are necessary. "new" returns an instance.
For instance (pun intended):
function foo(a){
return a;
}
foo(4); // this will return 4, but
new foo(); // this will return a 'foo' object
But now on to your question. Like rid said, B is declared within the scope of function A. So, your new outer(B(9)); will throw an error because B doesn't exist in the scope of where you called it.
Secondly, back to what yent said. Since each function is returning a function, we call what was returned.
function A (x) {
return function B (y) {
return function C (z) {
return x+y+z;
}
}
};
var f = A(2); // f is now function B, with x = 2
var g = f(3); // g is now function C, with x = 2, and y = 3
var h = g(4); // Function C returns x+y+z, so h = 2 + 3 + 4 = 9
However, we can use the following 'shortcut':
A(2)(3)(4);
// each recursive '(x)' is attempting to call the value in front of it as if it was a function (and in this case they are).
To sort of explain:
A(2)(3)(4) = ( A(2)(3) )(4) = ( ( A(2) )(3) )(4);
// A(2) returns a function that we assigned to f, so
( ( A(2) )(3) )(4) = ( ( f )(3) )(4) = ( f(3) )(4);
// We also know that f(3) returns a function that we assigned to g, so
( f(3) )(4) = g(4);
I hope that helped!

Categories