Apply Now Apply Now Apply Now
header_logo
Post thumbnail
JAVASCRIPT

Lexical Scope in JavaScript: A Simple and Easy Guide

By Vishalini Devarajan

Feb 09, 2026 4 Min Read 49 Views

(Last Updated)

When you begin learning JavaScript, it seems easy to write code at first. You declare variables, code functions, and console values. However, as your programs increase in size, you might find some confusing errors such as your variable not being defined or you are getting some unexpected results that do not match your logic.

A majority of these problems are not related to syntax errors. Rather they occur due to the fact that JavaScript obeys certain rules regarding the locations of variables that may be accessed. The concept that regulates these rules is called lexical scope in JavaScript.

One of the most simple blocks of JavaScript is lexical scope. It shapes the behavior of variables, the way functions interact, the behavior of closures as well as the data manipulation behavior of modern JavaScript frameworks. Several higher level subjects will be confusing and unpredictable without such a notion.

In this blog we shall explicitly clarify what is lexical scope in JavaScript, how it functions internally, why it is used in JavaScript and its impact to real world code. All the explanations are easy to understand, practical and follow-up.

Quick answer:

Lexical scope in JavaScript means that a variable’s accessibility is determined by where it is written in the source code. JavaScript decides which variables a function can access by looking at the physical structure of the code, not by how or where the function is called. This scope is fixed at the time of writing the code, making JavaScript predictable and easier to debug.

Table of contents

  1. Understanding Scope Before Lexical Scope
    • What Is Scope?
    • Scopes in JavaScript
  2. What Is Lexical Scope in JavaScript?
  3. Why Lexical Scope Is Predictable
  4. Nested Functions Lexical Scope
  5. Invalid Access Example
  6. Lexical Environment
  7. Lexical Scope and Closures
  8. Lexical Scope with var, let, and const
    • var and Lexical Scope
    • let and const
  9. Common Lexical Scope Confusions
    • Confusion 1: Function Call vs Function Definition
    • Confusion 2: Shadowing Variables
  10. Arrows and Lexical Scopes
  11. Real-World Importance of Lexical Scope
  12. Wrapping it up
  13. FAQs
    • 1) Is Block Scope the Same as Lexical Scope?
    • 2) Does Var Follow Lexical Scope?
    • 3) Do Arrow Functions Follow Lexical Scope?
    • 4) What Is The Importance Of Lexical Scope In JavaScript?

Understanding Scope Before Lexical Scope

It is essential to know what scope is in general before getting into the details of lexical scopes in JavaScript.

What Is Scope?

Scope is used to determine the accessibility of variables and functions in various sections of your code. In short, scope provides answers to questions such as:

  • Where can I use this variable?
  • Where does this function exist?
  • Why does JavaScript not find a variable, despite me declaring that one?

In JavaScript, scope is used to ensure that variables do not interfere with one another and keep the code arranged and safe.

Also read: A Comprehensive Guide On Objects, Methods, and Classes In JavaScript

Scopes in JavaScript

  1. In article Image 1: An infographic of “Scopes in JavaScript” and add the subheadings given below

1. Global Scope

Variables declared outside all functions or blocks belong to the global scope.

let siteName = “GUVI”;

function showSite() {
  console.log(siteName);
}

showSite();
  • siteName is accessible everywhere
  • Excess use of global variables may create bugs.
  • Global scope should be used sparingly

2. Function Scope

Function scope means variables that are declared within a function cannot be accessed outside the function.

function calculate() {
  let total = 100;
  console.log(total);
}

calculate();
T// console.log(total); // ReferenceError

The isolation helps in avoiding accidental overwrites and enhances safety of the codes.

Also read: 45 JavaScript Questions Towards Better Interviews

3. Block Scope

Block scope is offered to variables that are declared by usinglet and const within.

if (true) {
  let score = 90;
  console.log(score);
}

// console.log(score); // Error

JavaScript is more predictable and debugable because of block scope.

Also read: From Tutorials To Real Code: Building While You Learn JavaScript

What Is Lexical Scope in JavaScript?

Lexical scope in JavaScript refers to the rule that a variable’s accessibility is determined by where it is written in the source code.

In simpler words:

JavaScript uses the code structure to determine the variable scope, and not the execution of functions.

This means:

  • Scope is fixed at the time of writing the code
  • Functions remember their surrounding environment
  • The scope does not change dynamically

Also read: Best JavaScript Roadmap Beginners Should Follow

MDN

Why Lexical Scope Is Predictable

Unlike some languages that determine scope at runtime, JavaScript uses static scoping, also known as lexical scoping.

This makes JavaScript:

  • Easier to reason about
  • Easier to debug
  • Safer when it comes to large applications.

When developers ask what is lexical scope in JavaScript, they are really asking how JavaScript maintains consistency and structure in complex programs.

Also read: Best Tips and Tricks for JavaScript Debugging Skills [2026]

Nested Functions Lexical Scope

JavaScript has outstanding lexical scope in the use of nested functions.

function parent() {
  parentVar = “I am from parent;

  function child() {
    let childVar = “I am from child”;
    console.log(parentVar);
    console.log(childVar);
  }

  child();
}

parent();

Why This Works:

  • child() is written inside parent()
  • JavaScript enables child to refer to parentVar.
  • The scope is outward, and never inward.

Also read: Best JavaScript Frameworks in 2026

Invalid Access Example

function parent() {
  function child() {
    let secret = “hidden”;
  }
  // console.log(secret); // Error
}

It is so due to lexical scopes regulations.

Lexical Environment

Each time JavaScript is running some code, it constructs something known as a lexical environment.

There is a lexical environment that includes:

  • Variable declarations
  • Function declarations
  • A reference to the outer lexical environment

The Lexical environment of each of the functions is associated with its parent.

Also read: Best 5 Reasons to learn JavaScript in regional languages

Lexical Scope and Closures

One of the strongest features in JavaScript is closures which depend entirely on the lexical scope.

Learning about Closures through an example

function greeting(name) {
  return function () {
    console.log(“Hello, ” + name);
  };
}

greetUser = greeting ( Vishalini ) would be a constant;
greetUser();

What Happens Internally?

  • greetUser remembers name
  • The external role has been completed.
  • The inner is not shut off to the inner.
  • This is the memory which is maintained due to lexical scope.

Closures are magical without knowing anything about lexical scope in JavaScript, but are rational and predictable.

If you want to explore JavaScript through a self-paced course, try HCL GUVI’s JavaScript course.

Lexical Scope with var, let, and const

var and Lexical Scope

  • Function-scoped
  • Possible to result in unpredictable behaviour.
  • Not block-scoped
for (var i = 0; i < 3; i++) {
  console.log(i);
}
console.log(i); // 3

let and const

  • Block-scoped
  • Safer and modern
  • Preferred in real projects
for (let i = 0; i < 3; i++) {
  console.log(i);
}
// console.log(i);  Error

The lexical scope is more intuitive regarding let and const.

Common Lexical Scope Confusions

Confusion 1: Function Call vs Function Definition

let value = 10;

function display() {
  console.log(value);
}

function run(fn) {
  let value = 20;
  fn();
}

run(display);

Output: 10

Why?

Since lexical scope relies on the definition of display, and not the calling of it.

Confusion 2: Shadowing Variables

let count = 5;

function example() {
  let count = 10;
  console.log(count);
}

example();
console.log(count);

This is referred to as variable shadowing and totally determined by lexical scope.

Also read: Master Backend Development With JavaScript | Become a Pro

Arrows and Lexical Scopes

The arrow functions obey the lexical scope rules as ordinary functions.

They also inherit:

  • Lexical this
  • Lexical arguments (in a way) 
let language = “JavaScript”;

const showLang = () => {
  console.log(language);
};

showLang();

Real-World Importance of Lexical Scope

  • Helps write clean and well-structured JavaScript code
  • Prevents common errors like undefined variables
  • Controls where variables can be accessed
  • Makes debugging easier and faster
  • Essential for understanding closures
  • Plays a key role in asynchronous JavaScript
  • Widely used in modern frameworks and libraries
  • Improves code scalability and maintainability
  • Frequently asked concept in JavaScript interviews

Kickstart your Full Stack Development journey by enrolling in HCL GUVI’s certified Full Stack Development Course with Placement Assistance where you will master the MERN stack (MongoDB, Express.js, React, Node.js) and build interesting real-life projects.

Wrapping it up

When learning about lexical scope in JavaScript, it can seem abstract at first. However, once you have learned what it is, the language is much easier to reason about. Many bugs will go away simply because you will understand where variables are stored and how they can be resolved/located by the JavaScript engine.

If you understand what lexical scoping is in JavaScript, you will be able to do more than just write code; you will be able to think like a JavaScript engine.

FAQs

1) Is Block Scope the Same as Lexical Scope?

No, Lexical Scope is determined mostly by where you initially declare the variable in your code, whereas Block Scope is determined by where that variable exists in the code before or after it is actually declared.

2) Does Var Follow Lexical Scope?

Yes, but there is also Function Scope associated with var Declared Variables which could sometimes lead to non-predictive behavior.

3) Do Arrow Functions Follow Lexical Scope?

Yes, Arrow Functions utilize Lexical Scope, but they also inherit Lexical This.

MDN

4) What Is The Importance Of Lexical Scope In JavaScript?

Predictability of Code, Reduced Bugs, Closures.

Success Stories

Did you enjoy this article?

Schedule 1:1 free counselling

Similar Articles

Get in Touch
Chat on Whatsapp
Request Callback
Share logo Copy link
Table of contents Table of contents
Table of contents Articles
Close button
  1. Understanding Scope Before Lexical Scope
    • What Is Scope?
    • Scopes in JavaScript
  2. What Is Lexical Scope in JavaScript?
  3. Why Lexical Scope Is Predictable
  4. Nested Functions Lexical Scope
  5. Invalid Access Example
  6. Lexical Environment
  7. Lexical Scope and Closures
  8. Lexical Scope with var, let, and const
    • var and Lexical Scope
    • let and const
  9. Common Lexical Scope Confusions
    • Confusion 1: Function Call vs Function Definition
    • Confusion 2: Shadowing Variables
  10. Arrows and Lexical Scopes
  11. Real-World Importance of Lexical Scope
  12. Wrapping it up
  13. FAQs
    • 1) Is Block Scope the Same as Lexical Scope?
    • 2) Does Var Follow Lexical Scope?
    • 3) Do Arrow Functions Follow Lexical Scope?
    • 4) What Is The Importance Of Lexical Scope In JavaScript?