Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In what scenario would you use a function that returns another function (Javascript)?

Thanks to this question I understand how a function may take two sets of parentheses and how a function may return another function which fires immediately after being returned.

What I do not understand is why this is good to know? How could this be applied to solve a problem?

The example of:

function add(x){    
  return function(y){
    return x + y;
  };
}

add(3)(4) === 7; // true

Works fine - sure. But why not just write it like this instead?

function add(a, b) {
  return a + b;
}

add(3, 4) === 7; // true
like image 254
VoA Avatar asked Dec 18 '15 05:12

VoA


People also ask

Can a function return another function in JavaScript?

Function as Return Value of FunctionA JavaScript function can be passed as a return value from another function.

What is the use of return function in JavaScript?

When a return statement is used in a function body, the execution of the function is stopped. If specified, a given value is returned to the function caller. For example, the following function returns the square of its argument, x , where x is a number. If the value is omitted, undefined is returned instead.

How do I return a value from one function to another in JavaScript?

function firstFunction() { // do something return "testing 123"; } var test = firstFunction(); // this will grab you the return value from firstFunction(); alert(test); You can make this call from another function too, as long as both functions have same scope. Save this answer.

Can a function return another function?

Properties of first-class functions: A function is an instance of the Object type. You can store the function in a variable. You can pass the function as a parameter to another function. You can return the function from a function.


2 Answers

Lets take the same code which you have mentioned.

    function add(x) {    
      return function(y) {
        return x + y;
      };
    }

    var adder3 = add(3); //Forming adder3
    var op1 = adder3(4)  // 7
    var op1 = adder3(5)  // 9

    // Now adder 10:
    var adder10 = add(10);  //Forming adder3
    var op1 = adder10(4)  // 14
    var op1 = adder10(5)  // 15;

Hope you understand!!

Revert me if you need more info on closure.

like image 66
Raja Sekar Avatar answered Nov 14 '22 20:11

Raja Sekar


Your example called as closures

  • Closures’ Rules and Side Effects

  1. Closures have access to the outer function’s variable even after the outer function returns:

One of the most important and ticklish features with closures is that the inner function still has access to the outer function’s variables even after the outer function has returned. Yep, you read that correctly. When functions in JavaScript execute, they use the same scope chain that was in effect when they were created. This means that even after the outer function has returned, the inner function still has access to the outer function’s variables. Therefore, you can call the inner function later in your program. This example demonstrates:

function celebrityName(firstName) {
    var nameIntro = "This celebrity is ";
    // this inner function has access to the outer function's variables, including the parameter​
    function lastName(theLastName) {
        return nameIntro + firstName + " " + theLastName;
    }
    return lastName;
}​​
var mjName = celebrityName("Michael"); // At this juncture, the celebrityName outer function has returned.​
​​ // The closure (lastName) is called here after the outer function has returned above​
​ // Yet, the closure still has access to the outer function's variables and parameter​
mjName("Jackson"); // This celebrity is Michael Jackson



  1. Closures store references to the outer function’s variables; they do not store the actual value. 
Closures get more interesting when the value of the outer function’s variable changes before the closure is called. And this powerful feature can be harnessed in creative ways, such as this private variables example first demonstrated by Douglas Crockford:

function celebrityID() {
    var celebrityID = 999;
    // We are returning an object with some inner functions​
    // All the inner functions have access to the outer function's variables​
    return {
        getID: function() {
            // This inner function will return the UPDATED celebrityID variable​
            // It will return the current value of celebrityID, even after the changeTheID function changes it​
            return celebrityID;
        },
        setID: function(theNewID) {
            // This inner function will change the outer function's variable anytime​
            celebrityID = theNewID;
        }
    }​
}​​
var mjID = celebrityID(); // At this juncture, the celebrityID outer function has returned.​
mjID.getID(); // 999​
mjID.setID(567); // Changes the outer function's variable​
mjID.getID(); // 567: It returns the updated celebrityId variable

Reference site : http://javascriptissexy.com/understand-javascript-closures-with-ease/

like image 24
Keval Bhatt Avatar answered Nov 14 '22 22:11

Keval Bhatt