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);
#JavaScript Functions are Objects! They are not objects, don't have methods and they are stored in memory by value. Non-Primitives (functions, arrays and objects): these are mutable data types. They are objects and they are stored in memory by reference.
Per the specification there's only one undefined value but the specification does not require the implementation to hold a unique representation of undefined in memory. So any implementation can hold multiple copies of the value so long as the language semantics can be guaranteed.
While the stack is a place where JavaScript stores static data, memory heap is a place where JavaScript stores objects and functions. So, remember, when you create with primitives, you are working with static data. JavaScript stores these static data in the stack. These data has always fixed allocated memory.
In short, use function declarations when you want to create a function on the global scope and make it available throughout your code. Use function expressions to limit where the function is available, keep your global scope light, and maintain clean syntax.
Using memory in JavaScript Using the allocated memory in JavaScript basically, means reading and writing in it. This can be done by reading or writing the value of a variable or an object property or even passing an argument to a function. Release when the memory is not needed anymore
Most of the time, you can probably get by fine not knowing anything about memory management as a JavaScript developer. Afterall, the JavaScript engine handles this for you. At one point or another, though, you'll encounter problems, like memory leaks, that you can only solve if you know how memory allocation works.
Memory life cycle In JavaScript, when we create variables, functions, or anything you can think of, the JS engine allocates memory for this and releases it once it's not needed anymore. Allocating memory is the process of reserving space in memory, while releasing memory frees up space, ready to be used for another purpose.
Storing data in global variables is probably the most common type of memory leak. In the browser, for instance, if you use var instead of const or let —or leave out the keyword altogether—the engine will attach the variable to the window object. The same will happen to functions that are defined with the function keyword.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With