Javascript Scope and local variables

Question

I'm really not sure if this is possible in Javascript. Here's my function:

var tree = function(name, callback) {
  if (this.name) {
    this.name.push(name)
    print(this.name)
  } else {
    this.name = []
  }
  callback()
}

I'd like to use it as follows and print out the heirarchy:

tree("john", function() {
  tree("geoff", function() {
    tree("peter", function() {
      tree("richard", function() {
      })
    })
  })
  tree("dave", function() {
  })
})

Here's the desired output:

// ['john']
// ['john', 'geoff']
// ['john', 'geoff', 'peter']
// ['john', 'geoff', 'peter', 'richard']
// ['john', 'dave']

but unfortunately I'm getting

// ['john', 'geoff', 'peter', 'richard', 'dave']

for the last function call. Is there a way to get the desired outcome?

Kind regards

Adam Groves

Answer 1

I'm not certain what callback does, but you should probably use apply() or call() when you invoke it.

callback.apply( this, arguments );

Answer 2

The reason why the last line is printing all the names is because this.names is never removing the names that are being added to it. You're just appending names onto it. So when the function call is made

callback()  

with the value

function() {
  tree("richard", function() {
})  

this.names = ['john', 'geoff', 'peter'] and after the call this.names = ['john', 'geoff', 'peter', 'richard']. So now when you call

tree("dave", function() {
});

this.names is still ['john', 'geoff', 'peter', 'richard'].

Try the following instead, and notice I changed this.name to this.names to make is easier to read.

var tree = function(name, callback) {
  if (!this.names) {
    this.names = [];
  }
  this.names.push(name);
  print(this.names);
  callback();
  this.names.pop();
}