I am a Javascript Developer and I need a bit of help. This is my first time in a very long time contacting technical support. Please bare with me as I explain my situation. I recommend that someone that is familiar with Javascript and the browser console help test this issue.
I try to create a function in the browser console on a very blank html file. I created a function using the following code “const $ = $ => $”. When I called the function with the following code “$(‘test’)” I would get a return of “null”. What is expected to return is “test”. I have tested other browsers and it would seem to work perfectly fine. These browsers include: Edge, Chrome, Epiphany. I have also tried creating a function like so “const a = a => a”. Then I called the function like this “a(‘test’)”. The result would be “test”.
I had also asked a developer friend of mine to test this out and nothing is wrong on his end. I cannot recall what machine my friend runs but I know it does not run Linux. I wouldn’t know well enough but my suspicions lie with the Linux version of Firefox. I have also tried uninstalling and reinstalling Firefox from my computer the results seem to remain the same.
I will attach images for a visual of the situation. I will also leave some specs that might be of concern down below.
I confirm that I see the problem in Firefox ESR (v78), but it seems fixed in more recent versions. I doubt we’ll fix this in v78 so I can only suggest to use latest stable version instead.
The underlying problem is likely that $ has a special handling in the console. Maybe some devtools developer will be able to give some more background story.
I may have been confused, indeed I don’t see a difference with const now. This works if the page defined $ (for example by loading jQuery), so this may be my confusion.
Using $ = $ => $ or var $ = $ => $ don’t work for me either.
$ = $ => $: then running $("test") gives null. var $ = $ => $: then running $("test") gives Uncaught TypeError: $ is not a function.
This is a combination of using const/let + overriding the built-in $ helper.
const a = a => a; a("body") // -> "body"
var $ = a => a; $("body") // -> "body"
let $ = a => a; $("body") // -> <body> (we didn’t override the helper)
we have a mechanism to disable helpers when a global with the same name exists (devtools/server/actors/webconsole/eval-with-debugger.js#606-608), so that’s why we don’t use the helper for page defining $
But here, assigning $ with let does not override the global $ (and doesn’t put it on the global, so next calls will still reach for the global one).
I’m not sure how we could fix this, I need to investigate more
