'Outer function argument not displayed when debugging inner function in chrome

I have function like:

const outer = payload => dispatch => {
   debugger;
return 0;
}

chrome devtools screenshot

Should I see payload variable when debugging it in chrome devtools? I was looking for it in closures as you can see in the screenshot. There is no payload there or I cannot find it. However when I change the code to:

const outer = payload => dispatch => {
   console.log({ payload });
   debugger;
return 0;
}

I can see payload variable appearing under one of the closure boxes on the right side when debugging.

I think I don't fully understand the behaviour of closures(?) Could you please tell me in short how these two codes work behind the scenes?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source