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

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.

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 -

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.

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.

This one was very informational! Great work Kyle!

Maybe hint in the title Wtf the video is about?

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

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.

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.

Great video & explanation on garbage collection in Js!

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

08:00 - Golden tip!

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

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

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

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.

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

For example, in react. can we view the data stored in memory under the Memory?

Thank you, Kyle.

Really appreciate this video. Is possible to have another video to talk about how to find memory leak efficiently in Node JS service ?

Really good video and very informative one. Thank you!

Thanks Kyle ! Its very informative

I really needed this. Thanks 👍

Not really what I would call a memory leak, but we get the concept. Nice video

You hair looks amazing, how do you do your hair? tell me the brand of the wax or spay you are using if it is okay.

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.

Perfect timing! Thanks for this.

Oh yay that means I’m one of the best developers! 🎉

Exelent explanation! Thanks.

Thanks for your awesome videos, dude!

Can you please make GC video for backend. And please make another video where we can use GC in real application. Thanks.

Could you create a video about Atlassian's new framework-agnostic, low-level dnd library called "pragmatic-drag-and-drop"?

You can expose the GC and then trigger it with the little broom icon. That way, your snapshots are always "clean". I am currently struggling with a memory leak with Nuxt SSR - a small example like yours is easy, but as soon as you have a whole enterprise app, it gets really difficult to isolate things 😑

nice, we need for network too!

WeakMap i only use, when for example i want to figure out if data is duplicated or already added or not. But i could also just use a normal map, and clear it after the function. Or the map also get's cleared if initialized inside of the same scope

Great video !!!, Thank you

Sure, only the best, and I am glad that I and you are the best.

Damn! This was extremely informative.

recently learned Javascript, is it possible to make a pixelated multiplayer game, sandbox style or top down

In Chrome, is there a difference between opening an “incognito” window and just opening a Guest profile window? Both seem to give you no extensions, a clean history, and empty cache?

what do you think about SolidJS

05:10 what about strings that don't exist in source code but created dynamically like `Date()`?

ok does that affect local storage?

Thanks for the upload. ))

I have been using JavaScript for about 4 years and never knew there was a WeakMap class

This is why I started using web assembly instead of js

Isn't it a bit misleading to say that "primitives stay in memory forever?" True, they aren't stored in the exact way objects are. If you're declaring them on the global scope (or maybe even within the {} scope as you created in this video), then yes, they will likely stay in memory, but declaring them inside of a function (which is after all a specialized object) will reallocate their memory when the function's scope is popped off of the stack. Assuming the function isn't alive for the entirety of your running application, the primitives won't live forever.

Try wearing a neck brace.

dark mode plz, luv ur content btw

The engine does GC before taking heap snapshot, you need to look at the retain path to see why there are three Test objects in memory. This video has multiple mistakes and inaccurate information. Please double check.

It's best tutorial but can you make another js master like challenge or exercise even to master it 😊😊😊

Thank you! I had a blank spot in my knowledge.

I never noticed how much you move your head when speaking, but now I can’t unsee it

Really interesting

Okay. Now I think I'm one of the best developers.

The way how you look for memory leaks doesn't have a lot of sense. You know that you have problem with map. But what if you don't?

OK yo, I've been an JS engineer for years, I legit did not know you could just use curly braces by themselves to make a scope.

why does anyone ever talks about memory leaks in JS?

Gold

Lots of wrong things Your strings were kept in memory because they were string literals in the code, not because they were strings. Numbers are also collected, but don't have memory anyway, since they are raw pointers. You actually didn't talk at all about how garbage collection works in the section for "how garbage collection works".....

Hi

Tile "Best Developer". Me as a backend: ???

So you're the best is it now?

"You must know this!" "Only The Best Developers Understand How This Works" I think its called clickbait and alot of people know how it works.

you have a dog? 🤩

enough of the clickbait titles. please just say WHAT your video is about. I'd hate to unsub after all these years but i don't play that clickbait bullshit.

I might be disliking every one I click on just because I hate the vague nondescript clickbait titles. So unbecoming.

ClickBait!

I always lose concentration on your videos when you pronounce the W in known and own etc. I just can't. I start googling trying to find out which dialect does this, and I'm told that none do. It;s just you. lol

Bro, just buy another guitar stand.

[].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

Awesome video thank you so much!

[].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

[].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

[].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

[].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );