Does the callback function create a new scope in javascript

Question

function hello() {
  var result = [];
  var str = 'I am here';
   function inner() {
    var result = [];
     for (var i=0;i<10;i++) {
        result.push(i);
     }
     return result;
   }
}

in the code above when I called the function hello(), the return value was an empty [], also it did not console.log the str from the inner function. However, in the below code set I have used a call back function:

 function forEach(cb) {
   for(var i =0;i<10;i++) {
    cb(i);
   }
}

function hello() {
   var result = [];
   var str = 'I am here';
   forEach(function(num) {
    console.log(str);
     result.push(num);
   }); 
   return result;
}

the question is why both functions reacted, and gave a different output? Note; in both codes there was an inner function which supposed to create a new scope that can access the outer scope ? Does anyone have a good explanation for this issue ? Thanks

In the first example, of course the return value is an empty array - because you never populate it... — Andrew Li
– Andrew Li, Commented Nov 15, 2016 at 5:02
You never called the function named inner. Functions don't run unless you call them. You could try var result = inner(); return result;. — Paul
– Paul, Commented Nov 15, 2016 at 5:06

jfriend00 · Accepted Answer · 2016-11-15 05:23:56Z

2

In the first code block, inner is a new function that is declared inside of hello. It does not execute because you do not call it. It does create a new child scope inside of hello when it is called. But, since hello() doesn't actually return anything and doesn't call inner(), you get undefined when you call hello(). You could fix that by changing to this (you can run this snippet to see the return value):

function hello() {
    var str = 'I am here';

    // declare inner
    function inner() {
        var result = [];
        for (var i = 0; i < 10; i++) {
            result.push(i);
        }
        return result;
    }

    // now call inner() and return its result
    return inner();
}

console.log(hello());

Functions declared inside other functions do create a new scope. Every function declaration and corresponding call in Javascript creates a new scope. If the function is inside another function, then the code inside that inner function has access to both its local scope and to the parent scope and this can nest as deep as your nested function declarations go.

the question is why both functions reacted, and gave a different output? Note; in both codes there was an inner function which supposed to create a new scope that can access the outer scope ? Does anyone have a good explanation for this issue ? Thanks

In the first example, you never called the inner function so it never executed.

In the second example, you pass an inline, anonymous function reference as a function argument to your forEach() function. When that forEach() function executes, it calls your callback function with the line of code cb(i) so that's how your callback function is getting called in the second example. forEach() calls it for you.

Also, in the second example, the locally declared callback function is accessing the parent scope and modifying the result array (which is perfectly allowable). In your first code example, you are declared a new result variable in the inner function scope and then returning that. You are not accessing the parent result variable. When you declare a local variable with the same name as a variable in the parent scope, the local variable overrides the parent variable (essentially hiding the parent variable) and any references to that variable in the local scope only access the local variable.

You could have written the first code example to use a parent scoped result variable like this:

function hello() {
    var result = [];
    var str = 'I am here';

    // declare inner
    function inner() {
        for (var i = 0; i < 10; i++) {
            result.push(i);
        }
        return result;
    }

    // now call inner() and return result
    inner();
    return result;
}

console.log(hello());

edited Nov 15, 2016 at 5:23

answered Nov 15, 2016 at 5:11

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Max Doung Over a year ago

you are right, I got this point, but why does the second scenario when I used the callback it did output the result + console.log the (str) the out without calling the callback function?

jfriend00 Over a year ago

@AhmedZoghayyer - forEach() called the callback function for you with the line cb(i). You passed the inline anonymous function as a function argument to forEach() and then when you executed that function, it called that function for you.

jfriend00 Over a year ago

@AhmedZoghayyer - I added a bunch more explanation to my answer about local and parent scoping.

u_w · Accepted Answer · 2016-11-15 05:52:14Z

You have confused function declaration and calling.

Declaring a function can be done in multiple ways:

function myNewFunction() {}

Now this function exists in the current scope, but will not execute unless called.

You can call the function like this. Now your function will get executed.

myNewFunction();

Functions and their scopes can be compared to variables. Functions defined inside another function can only be accessed from inside the parent function. Let me give you an example.

    function myMegaFunction() {
        console.log("in mega");
        function mySmallFunction() {
            console.log("in small");
        }
    }

    myMegaFunction();

This will only print - 'in mega'. If you call mySmallFunction() inside of myMegaFunction then both lines will get printed.

Now let's take a more complex scenario like this:

    function myMegaFunction() {
        console.log("in mega");
        var str = "car";
        var result = function mySmallFunction() {
            console.log("in a small", str);
        }
        return result;
    }
        
    var resultingFunction = myMegaFunction();
    resultingFunction();

This will first print the following: in mega in a small car

So essentially, this is functions being passed around like variables. They can be executed later on too.

Collectives™ on Stack Overflow

Does the callback function create a new scope in javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related