> ## Documentation Index
> Fetch the complete documentation index at: https://interview.anantapoudel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Core Javascript

> This topic will cover all the necessary things required to master basic JS concept

# 1. Variables, Scope & Hoisting

This guide explains JavaScript **variables**, **scope**, and **hoisting** with examples.

### Variables (`var`, `let`, `const`)

JavaScript provides three ways to declare variables.

| Keyword | Scope          | Redeclare | Reassign | Hoisted         | Notes           |
| ------- | -------------- | --------- | -------- | --------------- | --------------- |
| `var`   | Function scope | Yes       | Yes      | Yes (undefined) | Legacy          |
| `let`   | Block scope    | No        | Yes      | Yes (TDZ)       | Modern          |
| `const` | Block scope    | No        | No       | Yes (TDZ)       | Must initialize |

#### `var` Example

```js theme={null}
function variables() {
  var a = 10;
  if (true) {
    a = 15;
    var c = 10;
  }

  var a = 15;
  console.log(a); // 15
  console.log(c); // 10

  console.log(b); // undefined (hoisted)
  var b = 10;
}

variables();
```

#### `let` Example

```js theme={null}
function lets() {
  let a = 10;
  if (true) {
    a = 12;
  }
  console.log(a); // 12

  console.log(b); // ReferenceError
  let b = 10;
}

lets();
```

#### `const` Example

```js theme={null}
function constants() {
  const a = 10;
  console.log(a);

  console.log(b); // ReferenceError
  const b = 12;

  b = 15; // TypeError
}

constants();
```

### Scope

JavaScript has **three scopes**.

#### Global Scope

```js theme={null}
var globalVar = "I am global";
console.log(globalVar); // OK
```

#### Function Scope

```js theme={null}
function checkScope() {
  var functionVar = "Inside function";
  console.log(functionVar);
}

checkScope();
console.log(functionVar); // ReferenceError
```

#### Block Scope

```js theme={null}
if (true) {
  let x = 10;
  const y = 20;
}
console.log(x); // ReferenceError
console.log(y); // ReferenceError
```

### Hoisting

Hoisting moves declarations to the top of their scope.

| Type     | Hoisted? | Value           |
| -------- | -------- | --------------- |
| `var`    | Yes      | undefined       |
| `let`    | Yes      | TDZ             |
| `const`  | Yes      | TDZ             |
| Function | Yes      | Fully available |

#### Hoisting Example

```js theme={null}
console.log(x); // undefined
var x = 10;

console.log(y); // ReferenceError
let y = 20;

console.log(z); // ReferenceError
const z = 30;

hoistedFunction(); // OK
function hoistedFunction() {
  console.log("I am hoisted!");
}
```

***

# 2. Closures and lexical environment

### Lexical Environment

A **lexical environment** is a structure where variable and function identifiers are stored and resolved.\
It is created automatically by JavaScript whenever code is executed.

A lexical environment has two parts:

#### **Environment Record**

Holds:

* Variables
* Functions
* Parameters

#### **Outer Environment Reference**

A pointer to the parent lexical environment, enabling **scope chaining**.

***

### Lexical Environments Creation

#### **Global Lexical Environment**

Created at the start of the script.

#### **Function Lexical Environment**

Created every time a function is invoked.

#### **Block Lexical Environment**

Created for block-scoped declarations (`let`, `const`) inside:

* `if`
* `for`
* `{}` blocks

***

### How JavaScript Resolves Variables

When JavaScript looks up a variable:

1. It checks the **current lexical environment**.
2. If missing, it checks the **outer environment**.
3. Continues upward until global scope is reached.

This upward traversal is the **scope chain**.

***

### Simple Example

```js theme={null}
let a = 10;

function outer() {
  let b = 20;

  function inner() {
    let c = 30;
    console.log(a, b, c);
  }

  inner();
}

outer();
```

#### Lexical Environment Chain:

* `inner()` → has `c`, outer = `outer()`
* `outer()` → has `b`, outer = `global`
* `global` → has `a`

***

### Summary

A lexical environment:

* Stores identifiers and their values
* Exists for global, function, and block scopes
* Forms the basis of JavaScript's **scope chain**
* Ensures variables are resolved using their **lexical (written-in-code) position**

***

### Closures

A closure happens when:

* A function remembers variables from its parent function
* Even after the parent function has returned / finished executing
* In short:
  `Closure = Function + Remembered Lexical Environment`

```js theme={null}

function outer() {
  let a = 12;

  function inner() {
    console.log(a);
  }

  return inner; // return the function, not its result
}

const funct = outer(); // outer() finishes, but inner still remembers "a"
funct(); // 12

```