## What is Garbage Collection ? 

**Garbage Collection** is the process that **automatically frees up memory** that's no longer needed or accessed by the program. 

When you create variables, objects, or other data structures, memory is automatically allocated to store them. **Primitive variables** (like numbers, strings, and booleans) are stored in the **call stack**, and their memory is automatically managed when they go out of scope. **Non-primitive** data structures (like objects, arrays, and functions) are stored in the **heap**, and when these items are no longer needed — for example, after a function finishes running or an object becomes unreachable — the garbage collector automatically identifies and cleans them up from the heap.

To summarize:
- **Allocation** happens automatically when you create things .
- **Deallocation** (clean-up) happens automatically through garbage collection (only what is saved on the memory Heap)

## How Does JavaScript's Garbage Collector Work?

Javascript enginees typically use **"reachability"** to determine if an object is still needed. An object is considered **reachable**  if:

- It is accesible from the roots of execution, suc as global variable, local variables in function on the stack or active closuers. If an object cannot be **reached** from the roots, it’s considered "garbage" — and eligible for collection.

The most common strategy is **Mark-and-Sweep**, and it works like this:

1. **Mark Phase:** The garbage collector starts from the roots and travels all the references. It **marks** everything it can reach.
2. **Sweep Phase:** Anything not marked is considered unreachable. The garbage collector **sweeps** that from memory space.

## Example


```js

function createProfile(name, gender) {
  const profile = {
    name: name,
    gender: gender
  };

return profile;
}

const userProfile = createProfile('Marko', 'male');

```

- **createProfile()** creates an object and returns it.
-  **userProfile** now holds a reference to the **{ name: 'Alice' }** object.
-  as long as **userProfile** exists and references the object, it stays in memory.
-  If **userProfile** is set to null or goes out of scope, the object becomes unreachable and will eventually be collected.


## Why Understanding Garbage Collection Matters?

**Memory** leaks can still happen if you create references that never get cleaned up — leading to excessive memory usage and slow applications.

Common causes of leaks:
- Global variables
- Closures holding on to objects
- Forgotten event listeners
- built in functions such as setInterval (if it is not cleared)



Garbage Collection in Javascript

How Javascript automatically manages memory and what happens under the hood during Garbage Collection

Javascript

JavaScript Internals

 **JavaScript** is a prototype-based language. This means that inheritance is handled via prototypes, not classical classes (although ES6 classes are just syntactic sugar over prototypes).

**Prototypal inheritance** is a feature in JavaScript where objects can inherit properties and methods from other objects. Each object has an internal link to another object called its **prototype**. This prototype object can also have a prototype, forming a chain known as the **prototype chain**.

When you try to access a property or method on an object, JavaScript looks for it on the object itself. If it's not found, the search continues up the prototype chain until it finds the property or reaches the end of the chain (null)

**The Prototype Chain**

```js
const base = { isAlive: true };

const animal = Object.create(base);
animal.eats = true;

const dog = Object.create(animal);
dog.barks = true;

//When you access a property on dog, JavaScript walks up the chain:

dog.barks      //  Found on dog itself
dog.eats       //  Inherited from animal
dog.isAlive    // ✅Inherited from base


```

**Everything in JavaScript is an Object**

Almost everything in JavaScript is derived from an object — including arrays and functions.


```js
typeof []        // "object"
typeof function(){}  // "function" (but it's a callable object)
typeof {}        // "object"
```

**What are __ proto __, [[Prototype]] and .prototype**

**1. [[Prototype]] (Internal Slot)**

Every object in JavaScript **has an internal** slot called **[[Prototype]]**. It **points to another object** that it inherits from (or **null** if it's the end of the chain). You can think of this as the actual **inheritance link** between objects. **[[Prototype]]** is not directly accessible, but it’s visible via **__ proto __** or **Object.getPrototypeOf()**.

**2. __ proto __**
A **legacy getter/setter** for **[[Prototype]]** , mainly for convenience. It is **not recommended** for production code, but useful for learning and inspection.

```js
const obj = {};
const anotherObj = {}; 

console.log(obj.__proto__);    // Outputs: Object.prototype
console.log(Object.getPrototypeOf(obj));  // Same output, modern equivalent

const newProto = { hello: "world" };

// Old way to set prototype (not recommended anymore)
anotherObj.__proto__ = newProto;

// Modern way to set prototype
Object.setPrototypeOf(obj, newProto);

console.log(anotherObj.hello);  // Outputs: "world"
console.log(obj.hello);         // Outputs: "world"

```

**3. .prototype: The Blueprint for Instances**
The .prototype **exists only on constructor functions** (like Function, Array, or your custom constructors). It is the **object that will be assigned as the [[Prototype]]** of instances created by that constructor using new.

```js
function Person(name) {
  this.name = name;
}

Person.prototype.sayHi = function () {
  console.log(`Hi, I'm ${this.name}`);
};

const alice = new Person("Marko");

console.log(alice.__proto__ === Person.prototype); // true
alice.sayHi(); // "Hi, I'm Marko"

```

**In JavaScript, all objects ultimately inherit from Object.prototype. This means Object is the base object in the prototype chain.**

```js
const obj = {};
console.log(obj.__proto__ === Object.prototype);  // true
console.log(Object.prototype.__proto__);  // null

const arr = [1, 2, 3];

console.log(arr.__proto__ === Array.prototype);         // true
console.log(Array.prototype.__proto__ === Object.prototype); //true
console.log(Object.prototype.__proto__);                // null

function example() {}

console.log(example.__proto__ === Function.prototype);         // true
console.log(Function.prototype.__proto__ === Object.prototype);  // true
console.log(Object.prototype.__proto__);   // null
```


Prototypal Inheritance

JavaScript uses prototypal inheritance to build objects, share behavior, and enable code reuse

When you run Javascript code it's processed by a javascript engine. At a high level, the engine performs two key tasks:

-    **Manages Execution(Call Stack)**: it determines what piece of code to run and when
-    **Manages Memory(Memory Heap):** It allocates memory for variables and objects, and cleans up memory that is no longer needed.

## What is the Call Stack?

The **Call Stack** is a data structure where the JavaScript engine keeps track of where your code is during execution. Every time a function is called, it gets **pushed** onto the stack. Once a function finishes executing, it’s **popped** off the stack. When the stack is empty, it indicates that the engine has finished executing the script. You can think of the call stack like a stack of plates where you can only remove the plate on top (first in,last out). Newer function calls are placed on top, while older ones stay lower until they’re done. If functions keep calling each other endlessly (like a recursive function without an exit condition), a **"Stack Overflow"** error occurs because the stack grows too large for the engine to manage.

## How the Call Stack Works? (Example) 

```js
function secondFunction() {
  console.log('End of the stack');
}

function firstFunction() {
  secondFunction();
}

firstFunction();

```

## Execution step by step:

1.  firstFunction() is called → pushed onto the stack.
2.  Inside firstFunction, secondFunction() is called → pushed onto the stack.
3.  Inside secondFunction, console.log('End of the stack') is called → pushed onto the stack.
4.  console.log('End of the stack') executes and returns → popped off the stack.
5.  secondFunction() finishes → popped off the stack.
6.  sayHi() finishes → popped off the stack.

## What is the Memory Heap?

The **Memory Heap** is a large region of memory where objects, functions, and variables are stored. Whenever you create objects, arrays, or even functions, they are allocated in the memory heap (primitive constants are stored in the call stack or in the global execution context -ex: window in the browser-).

## Example of Memory Allocation:

```js

const person = {
  name: 'Marko',
  gender: 'male'
};
```

When this code runs:

- The object  **{name: 'Marko', gender: 'male'}** is stored in the heap.
- The variable **person** holds a reference (a pointer) to that location in memory.

## Example of Call Stack and Memory Heap usage:


```js

function createProfile(name, gender) {
  return {
    name: name,
    gender: gender
  };
}

const userProfile = createProfile('Marko', 'male');

console.log(userProfile);

```

## What happens:

- **createProfile('Marko', 'male')** is called → pushed onto the **call stack**.
- a new object is created in the **memory heap** (the function is still on the stack)
- **createProfile** returns a reference to the object -> poped of the **call stack**
- reference is stored in the **userProfile** variable
- **console.log(userProfile)**  logs the object, accessing it via the reference.


## How the Call Stack and Memory Heap Interact

- The **call stack** manages where you are in the code and what function is currently running (keeps track of function calls)
- The **memory** heap manages where your data lives in memory (stores actual data during function calls)


Call Stack and Memory Heap

How Javascript manages execution and memory, focusing on the call stack and memory heap.

## What is a single-threaded language?

A **shingle-threaded** language is one that can execute only **one task at a time**. It executes the tasks one after the other, and each task has to finish before the next task starts. There is only one call stack, no parallel execution like in multhithreaded languages such as Java and C++

## How works the Call Stack in a single-threaded language?

The **Javascript call stack** works on a **"last in, first out"**. Only one function runs at a time. When a function finishes, it's removed of the stack. If something takes too long to finish, it blocks the stack, which means nothing else can run until it's done. For more information about how the call stack works, you can see my [post](http://localhost:3000/blog/article/call-stack-and-memory-heap) about the call stack.

## How can we prevent long running tasks from blocking our code?

There are several approaches to **prevent long-running tasks from blocking our code**. Some of these include using **asynchronous programming** techniques, such as Web API's callbacks, promises, async/await or **web workers**.

Web workers don't block our code because they run on a **separate thread** in the browser.

Asynchronous programming doesn't block our code because it uses the **event loop**,

## How does the event loop work?

1. The event loop starts by executing the code that is on the call stack. When it encounters asynchronous operations, it sends them to the Web Api, which is responsible to place them in the right queue. once the stack is empty (all synchronous tasks are completed), it checks the queues (callback queue, microtask queue )  to decide what will execute next. 
2.  Microtask queue has higher priority than the callback queue. The event loop will process all microtasks such as (promises resolutions, .then . catch) before moving to the callback queue.
4.  After microtask queue is emptied, the event loop will start procesing the calback queue (callbacks from web Api such as setTimeout, setInterval, event listeners)
5.  Will repeat this cycle over and over again

## Example:

```js
console.log('1: Start');

setTimeout(() => {
  console.log('2: setTimeout callback');
}, 0);

Promise.resolve().then(() => {
  console.log('3: Promise resolved');
});

console.log('4: End');

```

## The output will be:

1. Start
2. End
3. Promise resolved
4. setTimeout callback



The Single-Threaded Nature of Javascript

Understand how Javascript, being single-threaded, handles asynchronous operations using the call stack and event loop

Javascript internals

Garbage Collection in Javascript

Prototypal Inheritance

Call Stack and Memory Heap

The Single-Threaded Nature of Javascript