I thought I understood JavaScript scopes... until this happened ( Learning journal #1-Variables and Data Types)

Actually, I was learning the fundamentals of programming in JavaScript. I was studying Variables and Data Types where i learnt about scopes.

I understood global and block scope variables. We usually declare a block scope variable with {...} and the variable is only accessible from inside the brackets. If we try working with it outside the brackets then it will throw some errors.

I was thinking okey thats good cause it seems simple right? Until I stumbled upon an interesting problem.

const serviceName = "Auth_Service";
let totalRequests = 100;

{
    let totalRequests = 5;
    const localTimeout = 3000;

    totalRequests = totalRequests + 1;
    // [Checkpoint A] What are the values of serviceName and totalRequests here?
}

// [Checkpoint B] What happens if we try to console.log(localTimeout) here?
// [Checkpoint C] What is the value of totalRequests here?

I was confused cause we declared the same variable totalRequests twice. Once in the global scope and once in the block scope. Shouldn't it throw an error of variable double-declaration?

Then I thougt okey if it doesn't throw an error then it might work, but how? I know we can still access the global variable inside block scope variable. So it might just rewrite the totalRequests value from 100 to 5, then we are adding 1 with it, so it should be 6. And it did.

Output:

// Checkpoint A
serviceName = "Auth_Service"
totalRequests = 6

// Checkpoint B
ReferenceError: localTimeout is not defined

// Checkpoint C
totalRequests = 100

But after trying to reason through it myself, I searched for an explanation and found this:

because your second let totalRequests = 5; was inside a { ... } block, the engine treats that block as a completely isolated room (a new Lexical Environment).

When the engine is inside that block and looks for totalRequests, it checks its immediate room first. It finds the local one, uses it, and ignores the outer one. This is a real engineering concept called Variable Shadowing—the inner variable literally casts a shadow over the outer one, hiding it from view. Once the block ends and the room is destroyed, the shadow lifts, and the global totalRequests (which was never touched or modified) is visible again.

So I interpreted the explaination as ,"Block scope prioritizes its own local variable first, so even if there is one already declared globally, it will not count it."

I am a beginner who is learning JavaScript for the first time and I am currently focusing on strengthening my fundamentals rather than blindly choosing a trending framework. So it was a great funny challenge for me to solve. Though i successfully solved it but my assumptions were incorrect. Maybe I still haven't fully grasped the exact reason yet, if someone is kind enough to help this nerd, I would be too happy to learn it better.

Thanks for reading this. If I've misunderstood something, I'd genuinely appreciate corrections. I'm documenting my learning journey, and I'd love to improve my understanding. I heard dev community is helpful and generous, I hope someone would help me clear out the confusion I have 😊.

Comments

[OBen]

it's good that you've figured that out. Id say it a typical interview question for a junior position

[Mahin Ahmed]

Thanks!😊 I didn't know this type of question was common in junior interviews. That's actually motivating because it shows these fundamentals matter more than I initially thought. I'm trying to build my understanding from the ground up instead of rushing into frameworks.