Confusing JavaScript nested execution result

Question

I try following simple JavaScript nested code, while the result is confusing.

Anyone can give a detail explanation? Thanks very much.

I am waiting...

<script>
  // args = [];

  function foo (param) {
    args= [];
    if (param <= 1) {
      args.push(foo(2));
    } else {
      return param;
    }
  }

  foo(1)
</script>

The final args is [], I guess the outer args (is [2]) is overwritten by the nested inner args (which is []). Who can give a detail explanation about the result? How is the execution sequences? Thanks.

What do you mean by "The final args is []", I tried the example and the value of args after calling foo(1) is [2]. Take a look at the console output of this JSFiddle — Alvaro Flaño Larrondo
– Alvaro Flaño Larrondo, Commented Mar 28, 2016 at 16:56
I have to say this: you do know you are using a global? Every call to go will work on the same global array. Unsure what is your question, if you debug they code yourself, it will be very clear. Don't post a question without explaining actual versus expected behaviour — Ruan Mendes
– Ruan Mendes, Commented Mar 28, 2016 at 17:27
@Juan Mendes, sorry, I edit the code, args should be inside the foo function for my question, I wrongly pasted another test code section. — Hong Wang
– Hong Wang, Commented Mar 29, 2016 at 0:00

VinhNT · Accepted Answer · 2016-03-29 01:44:22Z

1

your code call foo function twice 1. foo(1) is the first call, when foo run the statement

if (param <= 1) {
  args.push(foo(2)); // run here for the first call of foo 
} else {
  return param;
}

That's similar as

if (param <= 1) {
  var foo2= foo(2); // -> trigger the second call of foo
  args.push(foo2); // first element is pushed in args
} else {
  return param;
}

In second call of foo(2) param=2 then, foo2=2 on above code, Finally, you got an array with only an item and args[0]=2

EDIT:

args is not overwrite, you have declare args as local variable of foo function, then when foo(1) was called, it creates a args variable. when foo(2) is called, another args is created.

edited Mar 29, 2016 at 1:44

answered Mar 28, 2016 at 16:58

VinhNT

1,1119 silver badges14 bronze badges

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

Comments

sdfsdf · Accepted Answer · 2016-03-28 18:37:07Z

0

args = [];

  function foo (param) { // param is 1
    if (param <= 1) { // param <= 1 is true
      args.push(foo(2)); // so args is now [foo(2)]
    } else { // ignored
      return param;
    }
  }

  /*
    This is foo(2) is computed
    function foo (param) { // param is 2
    if (param <= 1) { // param <= 1 is false, so this if statement is ignored
      args.push(foo(2));
    } else {
      return param; // returns 2
    }
  }
  */

  foo(1) // args is [2]

answered Mar 28, 2016 at 18:37

sdfsdf

5,69010 gold badges50 silver badges82 bronze badges

Comments

Hong Wang · Accepted Answer · 2016-06-14 10:32:37Z

From @Dmitry, thanks.

The args is a global binding (since you don't use var). In first call foo(1), you set it to:

args -----> [];

Then you add 2 to it by a recursive call. However, when you recursively call foo it rebinding global foo identifier to a new array in memory, still keeping the old one.

args -----> []  // new array

     -----> [] // old one

So you add 2 to the old one when return from recursion:

args -----> []  // new array

     -----> [2] // old one

After exit, args is bound to the new one which is empty, and the reference to the old one is missed (it will be GC'ed).

See binding and mutation topics: http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-1-lexical-environments-common-theory/#name-binding

Collectives™ on Stack Overflow

Confusing JavaScript nested execution result

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related