Foundation: Call stack and memory heap, Stack overflow, Garbage Collection and Memory Leaks Flashcards
What is call stack?
A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.
const number = 610;
Is it a memory heap or call stack?
Call stack helps us keep track of where we are in the code.
So once the call stack runs through the line, it’s stored in the memory heap.
The above code is saying, please allocate memory for the number variable and have it point to the value 402 in our memory heap.
How does javascript read code?
The call stack helps us keep track of where we are in the code so that we can run the code in order.
Where is the variable stored?
We need the memory heap as a place to store and write information
When is a call stack called?
Every time we run a function we use a call stack.
We can think of a call stack as a region in memory that operates in a first-in-last-out mode. (FILO)
How does Javascript Call stack and Memory Heaps differ from other languages?
Simple variables can be stored on the stack
and Complex data structures arrays, objects are stored in the memory heap.
What is Stack Overflow?
Let’s take an example of a recursive function.
Stack overflow happens when we call functions nested inside each, other over and over again. If we just keep adding functions to the stack without popping them off, we will have a stack overflow.
How does Javascript do garbage collection?
Garbage collection in Javascript uses the Mark and sweep algorithm; when a reference to a variable is removed, its deleted.
Javascript is a garbage-collected language. This means that if Javascript allocates memory, let’s say within a function we create an object and that object gets stored somewhere in our memory heap, automatically when we finish calling that object and if we don’t need that object anymore, and there is no reference to it in our program, Javascript is going to clean it up for us.
So, automatically Javascript frees this memory or, to put it literally — it collects our garbage.
What is a memory leak?
Let’s take a for/while loop example or runs infinity and push a array variable to the parent block.
Eventually the browser will run out of memory and crash the page.
Why is it a bad idea to use global variables?
Since it’s in the memory, it’s being used all the time.
Ways for memory leak?
Global Variables
Event Listerners
setIntervals()
What eventListeners use memory?
Because they are not removed once they are used.
They will stay in the background, and you have a memory leak before you know it.
How to handle events in React? How do they take memory leaks?
All React events are what they call Synthetic Events.
onClick={handleEvent}
When using React, you generally don’t need to call addEventListener to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
this.handleClick = this.handleClick.bind(this) Bind is necessary in a class based function or just using arrow function if we don’t want bind.
What is SyntheticEvent in React?
SyntheticEvent is a wrapper that forms part of React’s Event System.
These systems should generally use pooling to reduce the frequency of garbage collection.
SyntheticEvent allows events in React to quickly adapt to different browsers, solving an issue that has caused unnecessary frustration for developers.
How does setInterval() impact memory?
setInterval will never be garbage collected unless we remove the setInterval itself.
We use clearInterval to remove setInterval
