How to keep JavaScript function expressions in memory?

Question

let sayBye = function () {
    console.log(`Bye`);
}

let bye = sayBye;   
sayBye = null;    // X

bye();            // Y

Before asking this question, i searched in google and i found this post.

Then i thought, before line X the structure similar like this:


sayBye ---------------                                              
                      |      
                      |  => function() {....}
                      |
bye-------------------

After the x line, I thought it was like this:

sayBye                        MEMORY                                      
                            
                      |  => function() {....}
                      |
bye-------------------

But when i wrote bye in firefox developer tools i saw this

How is it possible? When i wrote let bye = sayBye; is the sayBye coppied?

let sayBye = function () {
    console.log(`Bye`);
}

let bye = sayBye;   
sayBye = null;    // X

bye();            // Y

console.log(bye);

Chrome doesn't show this. Are you sure the snippet you shared is accurate? Can you confirm you didn't name your function, i.e. `function sayBye() {` instead of `function () {` on the first line? — sp00m, Nov 23 '20 at 10:48
You're currently creating a function *without* a name, and no `sayBye` is **not** copied, assignment `x = y` is not copying. — jonrsharpe, Nov 23 '20 at 10:50
Oh wait, I just tried on Firefox, it does show that the function _seems_ named `sayBye` instead... That's odd! — sp00m, Nov 23 '20 at 10:50

sp00m · Accepted Answer · 2020-11-23T11:19:26.810

From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name#Inferred_function_names:

Variables and methods can infer the name of an anonymous function from its syntactic position (new in ECMAScript 2015).

Chrome and Firefox both give "sayBye" when printing bye.name.

From personal experiments, Chrome console shows bye.toString() when asking for bye, while Firefox shows a custom output of theirs, where they display the inferred name of the function (which makes sense indeed, as knowing the name usually helps debugging).

score 3 · Answer 2 · answered Nov 23 '20 at 11:43

Functions are object so assignment x = y is not copied . I tried this Nodejs I got

Bye
[Function: sayBye]

If you don't name a Function JS will automatically add name to it. In ES6 you can check name of function by using myFunction.name ,i.e. 'name' is property of an function object .Important thing is that this is read only property. Good practice is to use const instead of let while using function expression .Also ,if possible, try to name function debugging is easy on call stack

Although the `name` property isn't *writable*, it's *configurable*, so can be changed using `Object.defineProperty`... — FZs, Nov 23 '20 at 12:12

score 2 · Answer 3 · answered Nov 23 '20 at 11:16

You are confused by the function's name.

The memory things happen exactly the same way as you thought.

However, the function didn't have an explicit name, so the browser gave an implicit name to the function, that is the name of the variable or object property it was first assigned to, in this case, sayBye.

Then, it gets assigned to a different variable, but the name doesn't change.

You can see this if you give an explicit name to it:

//  Explicit name ----vvvv
let sayBye = function myFn() {
    console.log(`Bye`);
}

let bye = sayBye;   
sayBye = null;    // X

bye();            // Y

console.log(bye);

How to keep JavaScript function expressions in memory?

3 Answers3