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

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

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

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

lets();

`const` Example

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

var globalVar = "I am global";
console.log(globalVar); // OK

Function Scope

function checkScope() {
  var functionVar = "Inside function";
  console.log(functionVar);
}

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

Block Scope

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

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:

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

This upward traversal is the scope chain.

Simple Example

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

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

Angular

React

C# and .Net

Node JS

Core Javascript

1. Variables, Scope & Hoisting

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

`var` Example

`let` Example

`const` Example

Scope

Global Scope

Function Scope

Block Scope

Hoisting

Hoisting Example

2. Closures and lexical environment

Lexical Environment

Environment Record

Outer Environment Reference

Lexical Environments Creation

Global Lexical Environment

Function Lexical Environment

Block Lexical Environment

How JavaScript Resolves Variables

Simple Example

Lexical Environment Chain:

Summary

Closures

​1. Variables, Scope & Hoisting

​Variables (var, let, const)

​var Example

​let Example

​const Example

​Scope

​Global Scope

​Function Scope

​Block Scope

​Hoisting

​Hoisting Example

​2. Closures and lexical environment

​Lexical Environment

​Environment Record

​Outer Environment Reference

​Lexical Environments Creation

​Global Lexical Environment

​Function Lexical Environment

​Block Lexical Environment

​How JavaScript Resolves Variables

​Simple Example

​Lexical Environment Chain:

​Summary

​Closures

1. Variables, Scope & Hoisting

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

`var` Example

`let` Example

`const` Example

Scope

Global Scope

Function Scope

Block Scope

Hoisting

Hoisting Example

2. Closures and lexical environment

Lexical Environment

Environment Record

Outer Environment Reference

Lexical Environments Creation

Global Lexical Environment

Function Lexical Environment

Block Lexical Environment

How JavaScript Resolves Variables

Simple Example

Lexical Environment Chain:

Summary

Closures