Why dev tools don't understand closures?

Question

Can someone explain me why Dev Tools of Chrome (maybe other browsers as well - I haven't bothered with checking) don't see variables up the chain?

so if I have something like this:

function wholeKit(kaboodle) {
    kaboodle.forEach((k)=> {
      k.parts.map((p)=> {
         // console.log(kaboodle, k)    
        debugger;   
      })   
    })  
}

At the breakpoint Chrome will see value of p , but won't see kaboodle and k . They would be undefined . But if I uncomment the line above the breakpoint - magically those variables will be no longer undefined. How so?

jsbin for those who can't mentally digest ES6

upd: apparently that's how browser's garbage collector works, those variables that not being used get scraped. Now I'm curious if there's a way to tweak GC, for when DevTools are open?

Answer 1

Your code has syntax errors. The forEach and map are missing a closing parenthesis and Chrome does not support the ES6 arrow syntax for lambdas.

When I changed the callbacks to regular functions and added the missing parenthesis everything worked just fine.

function wholeKit(kaboodle) {
    kaboodle.forEach(function(k){
        k.parts.map(function(p){
            console.log(kaboodle, k)    
            debugger;   
        });
    });
}