What is JS ?

JavaScript (JS) is a lightweight, interpreted or just-in-time compiled programming language primarily used for creating interactive and dynamic web content. It runs in the browser and allows developers to build responsive user interfaces, handle events, and manipulate the DOM (Document Object Model). JavaScript is also widely used on the server side through environments like Node.js, making it a full-stack language. It supports object-oriented, functional, and event-driven programming paradigms.

JavaScript is known for its synchronous nature and single-threaded execution model. This means it executes one command at a time, in a specific sequence — line by line. But what really happens under the hood? How does JavaScript manage code execution so efficiently?

Let’s pull back the curtain and explore how JavaScript works internally, focusing on Execution Context, Call Stack, Scopes, and First-Class Functions — brought to you by DEVSYNC.IN.

🚀 Execution Context in JavaScript

Everything in JavaScript runs inside something called an Execution Context. Think of it as an abstract container that holds all the information needed to execute the JavaScript code.

An Execution Context consists of two crucial phases:

1. 🔍 Memory Allocation Phase

Functions and variables are stored in memory as key-value pairs.
Functions are fully loaded into memory.
Variables are initialized with a special placeholder: undefined.

2. ▶️ Code Execution Phase

Code is executed line by line.
When a function is invoked, a new Execution Context is created for that function and stacked on top of the previous one.

In the above JavaScript code, there are two variables named number and newNumber and one function named Square which is returning the square of the number. So when we run this program, Global Execution Context is created.
So, in the Memory Allocation phase, the memory will be allocated for these variables and functions like this.

📦 Call Stack in JavaScript

JavaScript uses a Call Stack to manage execution contexts.

When execution begins, the Global Execution Context is pushed onto the stack.
Each function call creates a new Execution Context, which is also pushed.
Once the function finishes, it’s popped off the stack.

The stack ensures JavaScript maintains the correct order of function execution.

❓ Undefined vs Not Defined

Understanding the difference is essential:

Undefined: Assigned during the memory creation phase as a placeholder.
Not Defined: Occurs when a variable is not declared at all in the code.

JavaScript is a loosely-typed language, which means variables are not bound to specific types like in C++ or Java.

🔔 Remember: undefined !== not defined

🌐 Scope and Lexical Environment in JS

Scope is the current context of execution.
Lexical Environment is the local memory plus a reference to its parent’s environment.

🔗 Scope Chain:

If a variable isn’t found in the local scope, JavaScript looks up the parent scope until it either finds the variable or hits the global scope.

This mechanism is known as the Scope Chain.

🔒 let & const and the Temporal Dead Zone

let and const are block-scoped and not accessible before declaration.
The time between memory allocation and initialization is known as the Temporal Dead Zone (TDZ).

⚠️ Key Points:

Cannot access let or const before declaration.
const must be initialized during declaration.
Avoid using var unless absolutely necessary.
Best practice: Initialize at the top of the block to reduce the TDZ.

❗ Errors:

ReferenceError: Variable has no memory allocation.
TypeError: Attempting to mutate a constant.
SyntaxError: Code is syntactically invalid.

🔄 Block Scope and Shadowing

A block is defined by {}.
let and const have block scope.
Shadowing happens when a variable is redeclared in a nested scope.

📌 Rules:

You cannot shadow a let variable using var.
var variables leak outside blocks unless in a function.

💡 First-Class Functions in JavaScript | DEVSYNC.IN

In JavaScript, functions are first-class citizens, meaning:

They can be assigned to variables.
Passed as arguments.
Returned from other functions.

🔧 Function Types Explained:

Function Statement (Function Declaration)

This is the most common way to define a function.
It is hoisted, meaning you can call it before its declaration.

Function Expression

Assigned to a variable.
Not hoisted. Must be defined before use.

Anonymous Function

Function without a name.
Usually used in callbacks or event handlers.

Named Function Expression

Name is available inside the function body only.
Helpful for recursion or debugging.

Arrow Function

Shorter syntax.
***Does not bind its own ***this.
Great for small utility functions.

🔁 Callback Functions ft. Event Listeners

A Callback Function is passed as an argument and invoked after a task completes.

🧪 Example:

⏱️ setTimeout:

setTimeout enables JavaScript — a single-threaded and synchronous language — to perform asynchronous operations by scheduling code execution for a later time.

🧠 Closures in Event Listeners:

Closures allow event listeners to retain access to the scope they were created in, enabling dynamic interaction.

❌ Why Remove Unused Listeners?

Prevents memory leaks.
Improves performance.
Avoids bugs.

🧠 Final Thoughts

Understanding Execution Contexts, Call Stacks, Scopes, and Functions gives you deep insight into how JavaScript truly works. This foundational knowledge is essential for writing optimized, bug-free, and maintainable JavaScript code.

Keep learning and exploring with Devsync — your trusted source for practical JavaScript concepts and real-world examples.

Let’s Continue in Part 2 !

JavaScript Internals Part 1 :