Only The Best Developers Understand How This Works

Managing memory in JavaScript is generally pretty easy because of garbage collection, but it isn’t always easy. In this video I will explain exactly what garbage collection is, how it works, and more importantly show you how you can debug and fix the most common memory related problems in your applications.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:27 - How garbage collection works
08:00 - Memory Management Advanced Tip
09:58 - How To Find Memory Leaks
13:55 - WeakMap & WeakSet

#GarbageCollection #WDS #MemoryManagement

[oscarleon]

I started watching your videos in 2020 as a way to learn. I told myself I'd self-teach myself enough to eventually land a junior job... 4 years later I still learn something new every time I watch one of your videos. And yes, I'm happily employed as a software engineer now :)

[PrincipalDev]

Garbage collection doesn’t happen immediately because it is thread blocking, so the browser may postpone it until an idle frame or until too much memory is used to avoid FPS drops. This is why you absolutely have to manually garbage collect (little icon showing a broom or brush) before testing. Otherwise your tests may be unreliable (as seen in this video when Kyle has to hard refresh).

To check for memory leaks:
1. Manually garbage collect
2. Take snapshot
3. Perform the action that allocates memory (add some todos for example)
4. Perform the action that de-allocates memory (remove all todos)
5. Manually garbage collect
6. Take snapshot
7. Memory allocated between snapshots 1 and 2 should be close to 0.

Better yet, repeat steps 2-6 and check the difference. If the difference increases you have a memory leak.

[nitsanbh]

5:09 "Any time you use a string, a number, a boolean - those [primitive values] will stay in memory forever, because they are not being garbage collected."

Very inaccurate. Let's explain.

Not all primitives are the same: some are stored in the heap, and some are in-place.
Small integers (up to 31 bits) and booleans are in-place. They don't need clean-up (they'll be freed when the thing that holds them is freed).
Larger integers (and floating point numbers) ARE stored in the heap. They are held by a pointer and they do need clean-up.

All strings are stored in the heap!
and hence, they WILL BE cleaned up, unlike what Kyle says.

The reason that "innerString" wasn't cleaned is because V8 employs an optimization strategy called "Interning". Since people use strings pretty-much like enums, V8 keeps small strings in memory for longer, to avoid re-allocating them later.

[NashBrooklyn]

a fun fact - the word null (and its other variations zero, hero, xero, rexo, orex, rex, xer) comes from arabic word for a hole in the ground which used to imprison debtors (those who never paid their debt to the king) - ergo the word - hole - you see during the garbage collection - is basically putting garbage into the hole - or nullifying as arabs in the middle ages would say - PS: and yes they did not have a numeric value which would represent a zero - so they used a letter for it - and guess what was the letter? that was the letter O as in owe - the letter resembles rounded edges of the debtor's hole in the ground -

[gkiokan]

Interesting. Keep up the good work. I am doing Enterprise Development for 11 Years now and never had to use this. Following best practices and writing clean code helps for sure. But once you might need to debug your Memory and Performance, this is quite a good Guide as to where to start from. Good Job man.

[NavyCuda]

Would you be willing to do a bit of a deep dive into IndexedDB? I really want to figure out how to use it for state in a react application.

[lakhveerchahal]

This one was very informational! Great work Kyle!

[ninetyseven]

i am learning more and more from your videos. this helps me alot as a beginner! thanks so much kyle!

[TimK]

Great video & explanation on garbage collection in Js!

[neelthakkar]

Great insight about how to debug memory leak. Thanks for the information.

[aeronwolfe]

good info Kyle. I learn something new from you all the time!!!! I appreciate you

[harleyspeedthrust]

some of the comments are a little mean. the title is accurate; only the best developers know how memory works in v8 (and in general). you don't become a great developer by hopping javascript frameworks every week.

[someoneunknown]

Wow, I thought javascript developers don't know that the information requires some memory to be stored in. Glad to see that at least best ones know such a thing.

[dead_holicx]

Really good video and very informative one. Thank you!

[shootingstar]

A bit of misinformation in the video. Values of primitive/scalar types are also subject to garbage collection, not just reference types.

[DevChannel-bi]

Thanks for your awesome videos, dude!

[r.ebenezerpaul]

heyy!! great video... My question is how do you know this?? like where do u get ur info from?

[kirillvoloshin]

by the way, hovering over the grey text starting with @ will show more info. also clicking on a record on a heap shows retainers of this object

[abumusa]

The debugging video and this one are like goldmines for developers. I always wondered why the performance part and debugging in chrome browser is not thought as it makes life so much easier.

[Frexuz]

Maybe hint in the title Wtf the video is about?