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
– sp00m, Commented Nov 23, 2020 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
– jonrsharpe, Commented Nov 23, 2020 at 10:50
Oh wait, I just tried on Firefox, it does show that the function seems named sayBye instead... That's odd! — sp00m
– sp00m, Commented Nov 23, 2020 at 10:50

sp00m · Accepted Answer · 2020-11-23 11:19:26Z

5

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).

edited Nov 23, 2020 at 11:19

answered Nov 23, 2020 at 10:53

sp00m

49k31 gold badges152 silver badges263 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ranjeet Thorat · Accepted Answer · 2020-11-23 11:43:20Z

3

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

answered Nov 23, 2020 at 11:43

Ranjeet Thorat

1708 bronze badges

1 Comment

FZs Over a year ago

Although the name property isn't writable, it's configurable, so can be changed using Object.defineProperty...

FZs · Accepted Answer · 2020-11-23 11:16:45Z

2

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);

answered Nov 23, 2020 at 11:16

FZs

18.8k13 gold badges47 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to keep JavaScript function expressions in memory?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related