Скачать или смотреть Understanding Memory Management in JavaScript

This guide explains memory management in JavaScript, focusing on garbage collection and closures. Learn how references, objects, and the garbage collector work together in the world's most used programming language.
---
This video is based on the question https://stackoverflow.com/q/64451024/ asked by the user 'Ali Nauroze' ( https://stackoverflow.com/u/13775370/ ) and on the answer https://stackoverflow.com/a/64453339/ provided by the user 'jmrk' ( https://stackoverflow.com/u/6036428/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Memory Management in Javascript

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Memory Management in JavaScript

JavaScript is an essential programming language that powers the web. One of its critical features is memory management, particularly how it handles variables and objects in memory. In this post, we'll explore a common question regarding memory management in JavaScript and delve into the concept of garbage collection.

The Problem: Why Isn't My Object Being Cleaned Up?

Imagine the following scenario in your JavaScript code:

[[See Video to Reveal this Text or Code Snippet]]

In this function, an object passed as a parameter seems to linger in memory even after it should have gone out of scope. At a glance, one might expect the object to be destroyed after the function exits. Yet, when the setTimeout function fires two seconds later, it logs the object as if it were still available.

What Happens in Your Code:

A block-scoped variable obj is created at 0 ms.

The printAfter2 function is called, passing obj as an argument.

Once the function runs, at 0 ms, obj goes out of scope, and it appears it would be destroyed.

However, at 2000 ms, the object still exists and is logged to the console.

This leads us to the question: Why does the object persist despite being out of scope?

The Solution: Understanding Garbage Collection

When a variable goes out of scope, it doesn’t mean that the memory is freed right away. Instead, it becomes eligible for garbage collection under certain conditions. Let’s break this down further:

Key Concepts of Garbage Collection

References: When you pass objects in JavaScript, you're actually passing references, not copies. This means multiple variables can point to the same object.

Eligibility for Garbage Collection: An object is eligible for garbage collection only when there are no references pointing to it. If any references persist, the object remains in memory.

Example of Garbage Collection

Let’s examine a simpler example without closures:

[[See Video to Reveal this Text or Code Snippet]]

In this code, we create an object and assign it to o1. When we call f1, both o1 and obj reference the same object.

After the function call ends, the variable obj goes out of scope, but o1 still holds a reference to the object, preventing it from being garbage collected.

Only when o1 is set to null does one reference go away. However, the object still remains alive because o2 references it. Complete eligibility for garbage collection only happens when all references are gone.

The Role of Closures

In your initial scenario, a closure is created inside the setTimeout function:

[[See Video to Reveal this Text or Code Snippet]]

This closure keeps a reference to obj, ensuring it stays in memory until the setTimeout function executes. It will only be eligible for garbage collection once this callback is executed and the closure is no longer referenced.

Conclusion

In JavaScript, understanding memory management and garbage collection is crucial for effective coding. The key takeaway is that variables, references, and closures work together in a complex way, affecting when and how memory is cleaned up. Thus, it’s essential to consider these aspects when writing JavaScript code, especially in the presence of asynchronous functions like setTimeout or promises.

By comprehending how references and garbage collection function, you can avoid memory leaks and ensure your applications run smoothly.

Feel free to reach out with any questions or thoughts on memory management in JavaScript!