Variables

Variable Environments

In JavaScript, every execution context (like global code, a function, or a block) has an associated Variable Environment.

A Variable Environment is a special internal object where all the variables and function declarations of that context are stored.

When JavaScript code runs:

1. The Execution Context is created.
2. Inside it, the Variable Environment is created to keep track of variables defined with var, let, and const.
3. This environment helps JavaScript engines know where and how to find variables during execution.

Components of Variable Environment

The Variable Environment is closely related to Lexical Environments. Both together form the scope chain.

1. Variable Declarations (var, let, const)

• Stored differently:
  • `var → Stored in Variable Environment (function-scoped).
  • let & const` → Stored in Lexical Environment (block-scoped), but conceptually part of execution context too.

2. Function Declarations

• Stored in Variable Environment and hoisted.

3. Scope Chain

• Variable Environment links to its outer environment reference, allowing inner functions to access variables from outer scopes (closures).

Variable Environment vs Lexical Environment

• Variable Environment:
  • Holds variables declared with var (function-scoped).
  • Created when execution context is created.
• Lexical Environment:
  • Holds let and const (block-scoped).
  • Depends on where code is written (lexical scope).

📌 But in modern JS discussions, people often use Lexical Environment as a more general term. The Variable Environment is just a specific part of it.

Variable Declaration

• var maintain function scope (not global scope), let, const maintain block scope.

• Updating/re-assigning const variable create TypeError: Assignment to constant variable. error.

• var maintain function scope, let, const maintain block scope.

• Updating/re-assigning const variable create TypeError: Assignment to constant variable. error.

  const a = "hello";
  a = "hi";

  • It creates a constant reference to a value. if the value is an object or array, you can mutate its contents (because the reference stays the same).

    const x = 10;
    x = 20; // ❌ Error: Assignment to constant variable
    
    const arr = [1, 2, 3];
    arr.push(4); // ✅ Allowed
    arr = [5, 6]; // ❌ Error

  • Primitive const, let, var store in stack, Non-primitive store in stack.

• A variable with same name can be declare twice with var but not with let and const, it will create SyntaxError: Identifier 'a' has already been declared.

  • It creates a constant reference to a value. if the value is an object or array, you can mutate its contents (because the reference stays the same).

    const x = 10;
    x = 20; // ❌ Error: Assignment to constant variable
    
    const arr = [1, 2, 3];
    arr.push(4); // ✅ Allowed
    arr = [5, 6]; // ❌ Error

  • Primitive const, let, var store in stack, Non-primitive store in stack.

• A variable with same name can be declare twice with var but not with let and const, it will create SyntaxError: Identifier 'a' has already been declared.

  let a='hello'; // ERROR
  let a="hi"; // ERROR
  
  var b="hello";
  var b="hello";

  a variable with same name can be declare twice with let if both are in different scope, this is not applicable for const.

  let a = 5;
  console.log(a);
  {
    let a = 4;
    console.log(a);
  }
  console.log(a);

• var maintain function/global scope, let and const maintain local scope.

• Using any variable before declaration with var return undefined due to hoisting but with let and const it will return an error of ReferenceError: Cannot access 'myVariable' before initialization due to temporal deadzone.

  console.log(myVariable);
  let myVariable = "Hello";

ReferenceError: Occurs when a variable that isn’t declared or isn’t accessible is referenced. This often happens due to misspellings, accessing variables in the temporal dead zone, or outside their scope.

SyntaxError: Occurs when code does not conform to the correct syntax of the language. This type of error is detected before the code is executed and typically involves missing or incorrect syntax elements.

TypeError: Occurs when a value is not of the expected type, such as calling a non-function as a function, or accessing properties on null or undefined.

Explaination:

let i = 50;
for (let i = 0; i < 5; i++) {
  console.log(i);
}
console.log(i);

• memory allocate for initial i in script object with global scope
• memory allocate for last i in script object with local scope
• memory allocate for initial i in script object with global scope
• memory allocate for last i in script object with local scope

Automatic Global Variable

• We can declare variable without var, in that case it will be consider as global variable.
• Scope is determine in creation phase, but undeclared variable executed at exection phase, that's how it became global variable
• this will not in strict mode

const show = () => {
  name = "Masum Billah";
};
show();
console.log(name);
{
  age = 25;
}
console.log(age);
## Automatic Global Variable

- We can declare variable without `var`, in that case it will be consider as global variable.
- Scope is determine in creation phase, but undeclared variable executed at exection phase, that's how it became global variable
- this will not in strict mode

```javascript
const show = () => {
  name = "Masum Billah";
};
show();
console.log(name);
{
  age = 25;
}
console.log(age);