3

I was reading this on MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

In a section titled "No binding of arguments" I saw the following and tried it on the browser console. Works.

No binding of arguments

Arrow functions do not have their own arguments object. Thus, in this example, > arguments is simply a reference to the the arguments of the enclosing scope:

When I tried to debug the arrow function, the value of arguments is different and unexpected. Is this a bug in DevTools or am I overlooking something?

In the example below, arguments.length printed in the console is 1. (The value being 1)

However, when execution stops at a breakpoint, arguments.length is 4. (The values being 1, 6, 7, 8)

(function() {

    var obj = {
        fn: function(a) {
            var f = v=> { 
                debugger; 
                console.log("Arguments length " + arguments.length);
            };
            return f(a, 6, 7, 8);
        }
    };
    obj.fn(1);
}
)();

jsFiddle here - https://jsfiddle.net/3Lb640aq/

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
xadhix
  • 174
  • 15
  • 1
    Also weird: in the console, `this` evaluates to `undefined` (in strict mode) at the breakpoint and is shown in the scope inspector, but logging it yields `obj` (as expected). – Bergi Nov 04 '17 at 09:47
  • Are you using Babel, or native ES6? Seeing `4` in the debugger does indeed seem like a bug. – loganfsmyth Nov 04 '17 at 23:00
  • @loganfsmyth native ES6. Chrome and Firefox both have this behavior. – xadhix Nov 05 '17 at 02:13
  • @Bergi where did you put the "use strict"? Line 2 or 5 or 6? I'm not able to repro what you said. Could you please update the fiddle if and when you have time? – xadhix Nov 05 '17 at 08:44
  • @xadhix Line 2, in the outer IIFE – Bergi Nov 05 '17 at 12:05
  • @Bergi I updated the https://jsfiddle.net/3Lb640aq/2/ with a `console.log(this);` I get the same value while debugging and logging. What am I missing? Maybe if logged and debugged at the same time, it wouldn't happen. Maybe related to this awesome bug/optimization from V8 - https://stackoverflow.com/questions/28388530/why-does-chrome-debugger-think-closed-local-variable-is-undefined screenshot : https://imgur.com/a/9R1VP – xadhix Nov 05 '17 at 14:28
  • @xadhix Right, it does work when evaluating `this` in the console, but the [scope pane](https://developers.google.com/web/tools/chrome-devtools/javascript/reference#scope) shows `undefined` – Bergi Nov 05 '17 at 14:40
  • 2
    Chrome's debugger has always been a bit wonky with regard to evaluating things that aren't used in the current immediate scope. A few more observations: If I run this code as-is in sloppy mode, the Scope pane says that `this` is Window, but if I enter `this` in the console and hit Enter, it says `undefined`. If I add `this;` after the `console.log` line and repeat the above, the Scope pane continues to say that `this` is Window, but if I enter `this` in the console and hit Enter, it correctly logs a representation of `obj`. – JLRishe Nov 05 '17 at 15:15
  • 3
    I'd say the moral of the story is, (1) don't trust the Chrome debugger regarding anything that's not utilized in the current immediate scope unless you're evaluating it w.r.t. some global variable (`window.something.somethingElse`) and (2) `arguments` is unreliable even if it's used in the current immediate scope. – JLRishe Nov 05 '17 at 15:18
  • @Bergi Got it. Thanks for pointing it out. – xadhix Nov 05 '17 at 15:56

0 Answers0