Question 53812 in Javascript Question posted in
A very good W3school tutorial can be found here.

Calling a nested javascript function

Im trying to call a nested function. Console error in Chrome dev tools says "f1 is not defined".
Whats wrong?

<!DOCTYPE html>
<html>
<body>
<h2>nested function test</h2>
<p>javascript nested functions</p>
<p id="demo"></p>
<script>
    (function (f1){
    (function (f2) {
    
        function f3(c) {
        return c + 2;
      }
    
    })
  
 } )
 let answer = f1.f2.f3(4);
 document.getElementById("demo").innerHTML = "fred is " + answer
</script>
</body>
</html>
Tags:

3

Answers


  1. 0

    The compiler is correct. In this declaration:

        (function (f1){
    (function (f2) {
    
        function f3(c) {
        return c + 2;
      }
    
    })
  
 } )

    f1 is an argument passed to an unnamed function. I suggest you review function declarations and scope. For this line to work:

     let answer = f1.f2.f3(4);

    You could define an object within an object that has a function:

    const f1 = {
  f2: {
    f3: (c) => c + 2
  }
};
    Login or Signup to reply.
  2. 0

    With Arrow Functions

    const F1 = () => () => (c) => c + 2;

let ans = F1()()(2);

    With Normal JavaScript Functions

    function f1(b) {
    console.log("This is f1 Function");
    return function f2() {
            console.log("This is f2 Function");
        return function f3(c) {
            console.log("This is f3 Function");
            return c + 2;
        };
    };
}

let answer = f1()()(2);
    Login or Signup to reply.
  3. 0

    f1 and f2 are anonymous functions (functions without a name) so they can’t be called at all (at least the way you have them set up).

    Now, we don’t really nest functions within functions like you’ve done as the only way to execute named and nested functions would be to explicitly call each subsequent function from within its parent. Here’s one example:

    <!DOCTYPE html>
<html>
<body>
<h2>nested function test</h2>
<p>javascript nested functions</p>
<p id="demo"></p>
<script>
   function f1() {
     function f2() {
       function f3(c) {
        return c + 2;
       }
       return f3(4);
     }
     return f2();
   }
   
   let answer = f1();
   document.getElementById("demo").textContent = "Fred is " + answer
</script>
</body>
</html>

    Nested functions are generally used in the following two ways…

    As a return value:

    function foo(user){
  return function bar(){
    console.log("Hello " + user);
  }
}

// Execute the parent function and capture the returned function
let returnFunction = foo("Scott");

// Now execute the returned function
returnFunction();

    As methods of an object (and aside from the following example, we really don’t "nest" methods within the function declaration, we usually attach them to the function prototype and do so from outside of the function):

    // This is a "function declaration" and can be used directly
// or, in this case, as an object to instantiate.
function Cat(color, sound){
  this.color = color; // This creates a property of the Cat object
  
  // Here the nested function creates a method of the Cat object
  this.makeNoise = function(){
    console.log("Your " + this.color + " cat just made a " + sound + " sound.");
  }
}

// Make a new instance of a Cat object by using a function constructor
let tabby = new Cat("grey", "meow");

// Call the nested function as a method
tabby.makeNoise();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search