DEV Community: ronak wanjari

🔍 Understanding Scope, Scope Chain & Lexical Environment in JavaScript

ronak wanjari — Sat, 14 Jun 2025 12:28:44 +0000

By Ronak Wanjari | Intern at Devsync.in @devsyncin

If you’re learning JavaScript (like me, at Devsync.in 🚀), you've probably heard terms like scope, scope chain, and lexical environment. These are core concepts that govern how variables are accessed in JS. Let’s break them down simply.

🌐 What is Scope in JavaScript?
Scope is the context in which variables are declared and accessed. JavaScript has:

Global Scope: Accessible everywhere.

Function/Local Scope: Variables declared inside a function can't be accessed outside.

Block Scope (ES6): Variables declared using let and const are limited to {} block.

let globalVar = '🌍';

function show() {
  let localVar = '🔒';
  console.log(globalVar); // ✅ Accessible
  console.log(localVar);  // ✅ Accessible
}
console.log(localVar); // ❌ Error

🔗 What is Scope Chain?

When you try to access a variable, JavaScript looks in the current scope, and if it doesn't find it, it travels up the chain.

const name = 'Ronak';

function greet() {
  const greeting = 'Hello';

  function sayHi() {
    console.log(greeting + ' ' + name); 
    // JS first checks sayHi -> greet -> global
  }

  sayHi();
}
Scope chain = sayHi → greet → global

🧠 What is Lexical Environment?

Every time a function is created, it gets a Lexical Environment, which is a structure that holds the variable references. It has two parts:

Environment Record → Stores variables/functions.

Outer Lexical Environment Reference → Points to parent scope.

This is why inner functions can access outer variables — it's defined lexically (by location in code).

🔥 Final Thoughts

Scope controls where your variables live.

Scope chain helps JavaScript find them.

Lexical Environment is how they are stored and linked.

Understanding this trio is key to writing bug-free, clean JavaScript code.
I’m learning these during my internship at devsync.in — and it's helping me a lot! 💻✨

Mentored and guided by @devsyncin

JavaScript #Scope #Devsync #LexicalEnvironment #WebDev #JSIntern

🔍 How Functions Work in JavaScript ❤️ & Variable Environment

ronak wanjari — Fri, 13 Jun 2025 15:20:22 +0000

By Ronak Wanjari | Intern at @devsyncin

Functions are the heart of JavaScript, and understanding how they work internally helps write better and cleaner code. As I learned during my internship at @devsyncin , every function in JavaScript creates its own world called the Execution Context when it runs.

🧠 What's Inside a Function Execution?

When a function is invoked, JavaScript creates:

📦 A Variable Environment – stores variables and parameters.

🔗 A Scope Chain – connects it to outer environments.

🧍‍♂️ A this keyword – depends on how the function is called.

📌** Understanding Variable Environment**

The Variable Environment includes:

Function parameters

Variables (var, let, const)

Inner function declarations

This environment is temporary and recreated every time the function is called.

function greet(name) {
  let message = "Hello " + name;
  return message;
}
Each call to greet("Ronak") creates a fresh environment with name = "Ronak" and message = "Hello Ronak".

🧩 Hoisting & Variable Environment
Understanding variable environments makes hoisting easier to grasp. Variables declared with var are hoisted to the top of the environment, but only the declaration—not the value.

function test() {
  console.log(x); // undefined
  var x = 5;
}
x exists in the environment but is undefined at first.

Mentored and guided by @devsyncin

JavaScript #Functions #VariableEnvironment #Hoisting #WebDevelopment #Devsync

🚫 Undefined vs Not Defined in JavaScript: What's the Difference?

ronak wanjari — Fri, 13 Jun 2025 13:41:26 +0000

By Ronak Wanjari | Intern at Devsync.in

JavaScript is powerful — but sometimes, its behavior can feel a little confusing. One common pain point for developers, especially beginners, is understanding the difference between undefined and not defined. Although they might seem similar at first, they represent very different things under the hood.

👨‍💻 I’m currently learning JavaScript as part of my internship at @devsyncin, where we focus on building modern, scalable web applications. This blog reflects a hands-on concept I recently learned and found incredibly useful in avoiding bugs and writing clean code.

🚦 Understanding undefined
When you declare a variable but don’t assign a value to it, JavaScript automatically gives it a value of undefined.

let a;
console.log(a);

In this case, the variable a exists, but it hasn't been given any value yet — hence, it’s undefined. This isn't an error; it's JavaScript’s default behavior.

❌ What Does "Not Defined" Mean?

Now let’s look at a different scenario:

console.log(b); // ReferenceError: b is not defined

Here, b was never declared — not with let, const, or var. So, when JavaScript encounters console.log(b), it throws a ReferenceError, saying that b is not defined.

This error stops your program immediately. It usually means one of two things:
*You forgot to declare the variable.
*You made a typo in the variable name.

🧩 Summary

✅ undefined: The variable exists but has no value.

❌ not defined: The variable doesn’t exist at all — and trying to use it will crash your code.

🔍 Use typeof to safely check for variable existence.

Thanks to my ongoing internship at @devsyncin , I’ve been able to learn these core JavaScript concepts through real-world tasks and challenges. Understanding the difference between undefined and not defined has not only helped me debug better but also write cleaner, more predictable code.

#javascript #webdevelopment #programming #devsync #learnjavascript #beginners

🚀 Understanding Hoisting in JavaScript: The Hidden Lift

ronak wanjari — Thu, 05 Jun 2025 11:13:09 +0000

By Ronak Wanjari | Intern at DevSync.in @devsyncin

When working with JavaScript, developers often encounter a concept known as hoisting — a unique and sometimes confusing behavior for those new to the language. In this article, we break down what hoisting is, why it occurs, and how understanding it can improve the quality and predictability of your code.

🔍 What Is Hoisting in JavaScript?
Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their scope (either global or functional) during the compilation phase — before the code is executed.

It’s important to note that only declarations are hoisted, not initializations. This means a variable declared later in the code may be accessible earlier, but its value will be undefined until it's assigned.

🧠 Why Does Hoisting Happen?
JavaScript executes code in two phases: the compilation phase and the execution phase. During the compilation phase, the JavaScript engine scans for declarations and allocates memory for them. This behavior enables functions to be invoked before they appear in the code and prevents some reference errors — but it can also lead to unexpected results if not understood correctly.

💡 Example: Variable Hoisting in Action
Consider the following code:

console.log(a);
var a = 5;
Instead of throwing a ReferenceError, JavaScript returns undefined. Internally, the code is treated as:

var a;
console.log(a); 
a = 5;
Only the declaration var a is hoisted, not the assignment a = 5.

🔐 Key Takeaways
var declarations are hoisted and initialized with undefined.

let and const are also hoisted, but they remain uninitialized until the code reaches their definition. Accessing them before declaration results in a ReferenceError.

Function declarations are fully hoisted, allowing them to be invoked before they appear in the code.

Understanding hoisting is essential for writing predictable, maintainable, and bug-free JavaScript code.

📘 Conclusion
Hoisting is a fundamental concept in JavaScript that often surprises developers who are new to the language. By recognizing how the JavaScript engine handles declarations behind the scenes, developers can avoid common pitfalls and write more efficient code.

Mentored and guided by @devsyncin

JavaScript #HoistingInJavaScript #WebDevelopment #JavaScriptTips#DevSync #DevSyncBlog #FrontendDevelopment #LearnToCode#DevSync.in