Block scoping in js

I understand the idea of block scoping is to declare as many “locally accessible only” variables as you can when you code in js.

However here are some explanations YDKJS gives out that confuses me.

for (var i=0; i<10; i++) {
	console.log( i );
}

We declare the variable i directly inside the for-loop head, most likely because our intent is to use i only within the context of that for-loop, and essentially ignore the fact that the variable actually scopes itself to the enclosing scope (function or global).

What does the last part mean?

var foo = true;

if (foo) {
	var bar = foo * 2;
	bar = something( bar );
	console.log( bar );
}

We are using a bar variable only in the context of the if-statement, so it makes a kind of sense that we would declare it inside the if-block. However, where we declare variables is not relevant when using var, because they will always belong to the enclosing scope. This snippet is essentially “fake” block-scoping, for stylistic reasons, and relying on self-enforcement not to accidentally use bar in another place in that scope.

He said where we declare variables is not relevant, which variable is he talking about? foo or bar ? And if where do we declare it is unimportant, then why say block scoping is about declare variable as close as possible to where they will be used? And the last part about fake block scoping , so the code above is good or not?

I am really confused. Someone please explain this to me in the most simple way so that a 12 year old can understand.

function test(){
  var x = 0;
}
test();

console.log(x); // some kind of error, x not accessible here because x is declared within a function

for(var i = 0; i < 10; i++){
  var y = "test";
  console.log(y); // x can be accessed here
}

console.log(y); // but also here, because it is in the same function (or global scope).

The only point he tries to make is that for loops, if statements (blocks with { }) etcetera don’t create their own scope.

I just tested these lines of code in my editor and surprisingly, the result I got was:

0,1,2,3,4,5,6,7,8,9,10

for (var i=0;i<10;i++){
	console.log(i);
}

console.log(i);

And I thought the program will not be able to see the value of i when the for loop ended.
But it still displays 10 for the 2nd console.log.

Is this what the author has been talking about?

And I thought only if the inner function cannot find one specific variable, it will look up to its parent scope, and the parent scope is not able to sneak in to know what the inner function’s had?

This two points contradict each other… Or is there something I am missing?

That is exactly the point. Since a for loop does not have its own scope, all variables created inside it will be scoped to the enclosing scope.

That is correct. But in this case there is no inner scope.

1 Like

var is the thing he is talking about.

This:

{
  // Something
  // Something else
}

Is used to denote a block in JS. It’s also used to denote object literals, but anyway. for loops, while loops, do...while loops, if/else blocks are all common syntactic structures where you.use a block.

A variable defined with the var keyword does not have block scope (what you declare is not local to that block), it leaks out, it’s a design flaw that cannot be fixed.

The keywords let and const, introduced to fix the problems with and replace var, are block scoped (what you declare in the block stays there).

I see. So you are saying that there are two types of scenarios here.

  1. when function is doing the scoping: the inner child can only sniff to the outer parent when it cannot find a certain variable. The outer parent scope (a.k.a enclosing scope) cannot sniff into the inner scope. (when functions are involved)

  2. when blocks is doing the scoping: this time everything is under one giant scope. No one is the inner, no one is the outer, every variable is accessible by everyone. (a.k.a in those for loops or if loops)

That’s why at the end of the paragraph he said:

this snippet is a fake block-scoping. because no matter how much you style your code into those { } there is only one giant scope in the code.

I see. Thanks!!!

Blocks don’t do scoping.

They are in the scope of the function those blocks are in.

1 Like

I see thanks! :sunglasses::sunglasses::sunglasses: