Why does Chrome debugger think closed local variable is undefined?
I've found a v8 issue report which is precisely about what you're asking.
Now, To summarize what is said in that issue report... v8 can store the variables that are local to a function on the stack or in a "context" object which lives on the heap. It will allocate local variables on the stack so long as the function does not contain any inner function that refers to them. It is an optimization. If any inner function refers to a local variable, this variable will be put in a context object (i.e. on the heap instead of on the stack). The case of eval
is special: if it is called at all by an inner function, all local variables are put in the context object.
The reason for the context object is that in general you could return an inner function from the outer one and then the stack that existed while the outer function ran won't be available anymore. So anything the inner function accesses has to survive the outer function and live on the heap rather than on the stack.
The debugger cannot inspect those variables that are on the stack. Regarding the problem encountered in debugging, one Project Member says:
The only solution I could think of is that whenever devtools is on, we would deopt all code and recompile with forced context allocation. That would dramatically regress performance with devtools enabled though.
Here's an example of the "if any inner function refers to the variable, put it in a context object". If you run this you'll be able to access x
at the debugger
statement even though x
is only used in the foo
function, which is never called!
function baz() {
var x = "x value";
var z = "z value";
function foo () {
console.log(x);
}
function bar() {
debugger;
};
bar();
}
baz();
Why this has a value of undefined in the scope tab of google chrome dev tools? I was expecting this: window
You're using an arrow function, which have some differences compared to normal functions. Arrow functions don't have a this value.
If you replace the arrow function
(acc, item) => {
with a normal function,
function (acc, item) {
then 'this' will be set to 'Window'.
--
Code example and more info here:
let user = {
name: "GFG",
gfg1:() => {
console.log("hello " + this.name); // no 'this' binding here
},
gfg2(){
console.log("Welcome to " + this.name); // 'this' binding works here
}
};
user.gfg1();
user.gfg2();
--
EDIT: your code actually works, just the assignment to const itself doesn't have a return value, so prints "undefined" on the console. To print out the value in the const, just add it to the end:
const flattened = [
[0, 1],
[2, 3],
[4, 5]
].reduce(
(acc, item) => {
return acc.concat(item)
}, []);
flattened
Output:
(6) [0, 1, 2, 3, 4, 5]
Chrome Dev Tool: watch variable not available(fails to detect in closure-scope)
Looks like it may be a bug. I created an issue so that someone on the DevTools team will look at it: https://crbug.com/762265
Related Topics
How to Connect to SQL Server Database from JavaScript in the Browser
How to Detect Internet Speed in JavaScript
JavaScript Add Leading Zeroes to Date
How to Provide Named Parameters in a Function Call in JavaScript
How to Change Fontsize by JavaScript
CSS Selector for Targeting Only Immediate Children and Not Other Identical Descendants
Vue.Js - Add Class to Clicked Button
React Native: Getting the Position of an Element
JavaScript Es6 Promise for Loop
How to Count String Occurrence in String
Indexof Method in an Object Array
How to Chain and Share Prior Results With Promises
Read :Hover Pseudo Class with JavaScript
Changing Background Based on Time of Day (Using JavaScript)