**Closures in JavaScript** are created when a function retains access to variables from its lexical scope, even after the outer function has finished executing. This allows **inner functions to "remember"** variables from their parent scopes

**Example:**
```js
function outer() {
  const message = "Hello from the outer scope!";
  return function inner() {
    console.log(message); // still has access to `message`
  };
}

const greet = outer(); 
greet(); // Output: "Hello from the outer scope!"

```



## Why are closures useful?

**1.Closures  Encapsulate Data and Avoids Global Scope Pollution**
 By creating variables inside a function and exposing only selected methods to interact with them, you avoid putting those variables in the global scope. This means:

-  **don’t pollute the global namespace** with variables that could conflict with others.
-   **avoid name collisions**
- **control access** to your variables, preventing unintended modification from outside code.

```js
function createUser(name) {
  let loginCount = 0; // private variable

  return {
    getName() {
      return name;
    },
    login() {
      loginCount++;
      console.log(`${name} has logged in ${loginCount} times`);
    }
  };
}

const user1 = createUser("Alice");
user1.login(); // Alice has logged in 1 times
user1.login(); // Alice has logged in 2 times

console.log(user1.loginCount); // undefined – it's private!
```

**2.Function Factories**

Function factories return customized functions based on input.

```js
function makeMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = makeMultiplier(2);
const triple = makeMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15
```

**3.Persistent Data Storage (Private State)**

Closures allow you to store and access private data that persists across function calls.

```js
function createCounter() {
  let count = 0;

  return {
    increment() {
      count++;
      console.log(count);
    },
    decrement() {
      count--;
      console.log(count);
    },
    getValue() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
console.log(counter.getValue()); // 2
```
**4.Delayed Execution**

Closures preserve data for use in asynchronous operations, such as timers or events.

```js
function delayedGreeting(name) {
  setTimeout(function() {
    console.log(`Hello, ${name}!`);
  }, 1000);
}

delayedGreeting("Alice"); // Outputs "Hello, Alice!" after 1 second

```



Closures in Javascript

The concept of closures in JavaScript, how closures work and why they’re essential for writing effective, modern JavaScript. 

Javascript

Closure Fundamentals

When you run code in Javascript it operates within an **Execution Context**. The execution Context is responsible for keeping track of what is going on: figuring out **which variables and functions are accesible** at a given point in time, determining the **value of this**, applying **hoisting rules** and setting up the **scope chain**.

## Types of Execution Context

1. Global Execution Context:
     - Is Created when Javascript engine starts executing the code
     - It sets up the global this (In the browser refers to the window object)
     -  There's only one global context

2. Function Execution Context:
     -  Created every time a function is invoked
     -  Each functuion has its own execution context (separate from the global context)
     -  A new execution context is created for each call, even if it's the same function  

## Phases of Execution Context:

1. **Creation Phase**:
    - Creation of the **Variable Environment**
    - Creation of The **Lexical Environment**
    - Establishing the **Scope Chain**
    - Determination of **this Binding**
    - **Hoisting**

2. **Execution Phase**
   - This phase runs the code line by line: Variables are assignet to their actual values, function are executed (if they are called)
    


## Lexical environment and Scope Chain:

Using the **lexical environment** javascript knows where a piece of code was **declared** (this is known as lexical scoping).
Each execution context's lexical environment gets **linked to its outer environment**, forming the **scope chain**. 
Javascript uses the scope chain to determine the variable accessibility (it starts from the current context and works its way to the global context)


         
 ```js
const globalVariable = "Global Variable";

function a() {
  return globalVariable; // 'a' accesses variable from the global lexical environment
}

function b() {
  connst bVariable = "Inside b function variable";

  function c() {
    return bVariable+ " and " + globalVariable; // 'c' accesses variable from 'b's lexical environment
  }

  return c();
}

console.log(a()); // Outputs: Global Variable
console.log(b()); // Outputs: "Inside b function variable and Global Variable"

```

**Explanation**:  a accesses a variable declared in the **global lexical environment** , c accesses a variable declared in the **lexical environment of b and global lexical environment**. The scope chain links c's environment to b's then to global

**Types Of Scopes:**

1. Global Scope:
A variable declared **outside all functions or blocks** is in the **global scope** and accessible anywhere in your code.
```js
const globalVariable = "I'm in global scope";

function showGlobal() {
  console.log(globalVariable); // Accessible here
}

showGlobal(); // Output: I'm in global scope
```
2. Function Scope: 
A variable declared **inside a function** using var, let, or const is only accessible ** within that function**.
```js
function functionScopeExample() {
  const a = "Function Scope";
  console.log(a); // Works here
}

functionScopeExample();

console.log(a); // Error: a is not defined

```

3. Block scope: 
 Variables declared inside a block (e.g., an if, for, or {} block) using let or const are only accessible within that block. Variables declared with var aren't block scoped they are function scoped.
 
 ```js
{
  let blockLet = "I'm a block-scoped let variable";
  const blockConst = "I'm a block-scoped const variable";
  var blockVar = "I'm declared with var inside a block";
  console.log(blockLet);   // Accessible here
  console.log(blockConst); // Accessible here
}

console.log(blockLet);   //  Error: blockLet is not defined
console.log(blockConst); //  Error: blockConst is not defined
console.log(blockVar); //  Still accessible here — var is not block-scoped



```
 
## Variable environment:

   During the creation phase of an execution context, the variable enviroment  is responsable for creating memory space   for all the variables and functions declared in that scope applying hoisting. Hoisting allows certain declarations to be accesed before their line of code is actually reached.  

 Example:
 
 ```js

function one(){
var variable;
}

function two(){
var variable = true;
one(); // new Execution Context
}

var variable = false

two();

// Execution Contexts:
// one --> 'variable' is undefined in the 'one' functions local scope
//two() -->'variable' is true in the two functions local scope
//global() --> 'variable' is false in the global scope

// Each execution context has its own **Variable Environment**, the same variable can exist in all three without conflict.
```

## Hoisting

Hoisting is the behaviour of "moving" the variables or function declarations to the top of their respective environments during the creation phase. Variables declared with **var** are **partially** **hoisted**, **functions are fully hoisted**, variables declared with **let and const**  are **hoisted but not initialized** (They reimain in a Temporal Dead Zone and accessing them before declaration causes a RefrenceError) . 

Example2:
```js
console.log(partialyHoisted);
console.log(fullyHoisted);

var partialyHoisted = "partialyHoisted";

function fullyHoisted(){
   console.log("Fully Hoisted");
}

// Logs: 
// undefined
// "Fully hoisted"
```

## This binding

**What is  _this_  ?**

**This** is the object that the function is a property of

Example:

```js

function example() {
  console.log(this); // Global object
}



const user = {
  name: "Marko",
  example() {
    console.log(this);
  }
};

user.example(); 

// {
//   name: "Alice",
//   greet: [Function: greet]
//  }

```

JavaScript Execution Context, Scope, Hoisting, this keyword

How Javascript creates and manages execution context