If You Cannot Name All 5 JS Scopes You Need To Watch This Video

Scoping in JavaScript seems simple at first glance, but JavaScript actually has 5 different levels of scope that can be incredibly difficult to keep track of. In this video I explain everything you need to know about scoping across all 5 layers of scope so you can master scoping for your next project.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:37 - Scoping Basics
06:41 - JavaScript Scoping Levels
12:23 - How Var Is Different

#Scoping #WDS #JavaScript

[Sahil.]

Knowledge of Scope is really essential to crack an interview

[xcoder]

JavaScript does not have a script scope, that's a term made up by Google.

JavaScript originally had only two scopes, local and global. Local was the scope inside a function and global was the scope outside a function. Note, however, that in JS, `var' identifiers could not exist in "thin air", they always had to be attached to some kind of object. In a local scope, they were attached to the current function (which is why they are available everywhere in the function, no matter in which block they are defined), and in a global scope, they were attached to `window'. This is also why there was no block scope originally, because a block is not an object and therefore you couldn't attach a variable to it.

As JS evolved from a primitive website control language to a standalone programming language, which is actually correctly called ECMAScript (but the name JavaScript cannot be killed, it seems), things had to change. The first change was that the existence of `window` was no longer a requirement, since there may not even be a window object in your application. But when defining a global `var`, it still had to be attached to some object. This was the birth of `globalThis'. Note that in a global context, `this` always refers to `globalThis`, but inside an object function, it refers to the object, that's why there is `globalThis`. Also note that in a browser context, `globalThis` actually refers to the same object as `window`, but `globalThis` is always there, `window` only in a browser-based context.

Another change was that there could now be variables that were not attached to an object at all, but only to a scope. This allowed for block scoped variables, which is the third official scope of the language. You declare these variables as `let` or `const`.

But what if you create a block-scoped variable in a global context? Whether you declare a global variable with `var` or with `let`/`const` is irrelevant, in the language model they are both global variables in global scope. The only difference is that when you use `var` this variable is attached to `globalThis` and when you use `let`/`const` it isn't. When a global variable is attached to `globalThis`, Google calls it "global scope", and when it isn't, Google calls it "script scope", but that distinction doesn't exist anywhere in the language specification. Again, they are both global scope variables, just one is attached to a global object and the other one is not.

My recommendation is: just never use `var`. There is no reason why you would ever need to use it. Any code can be written to work just fine using `let` and `const`, and if you really need to attach something to `globalThis`, you can always do so explicitly by writing `globalThis.whatever = ...`. By not using `var', there is no longer a local scope, and there is no distinction between global and script scope. You end up with only two scopes: block scope and global scope.

[heMech]

The only things you need to know are:
Curly braces {} is a different scope, you can't access variables in scopes from outside, but you can do the opposite.
You shouldn't use var, use only let and const.

[Patrick]

Great video like always. You're forgetting the Closure scope when you have nested functions.

[xSYNDICATEDx]

very perfect videos man. Unlike others i saw this makes it easy to digest takes the time by example and dont gloss over it too fast i subscribed and im chekcing your courses now

[svetoslavtrifonov]

You are explaining things very well, thanks for the video. I would like to see a video about augmenting an existing module in typescript. Also inferencing a complicated types from array of values or inferencing types in general. Thanks again. Great video as always

[krzysztofprzygoda]

Quite interesting things happen in that case - if you "redeclare" const anywhere in the innerFunction, you lose then outer scope access:

// Local/Function Scope
function testFunction(arg) {
const aTestConst = 'Local const'

// Function Scope
function innerFunction() {
console.log(aTestConst, 'innerFunction')
const aTestConst = 'Local/Function const' // Uncaught ReferenceError ReferenceError: Cannot access 'aTestConst' before initialization
}
innerFunction();
}

[huuquocdattran]

Simplify i mean var share one reference to many variable. Example var in for loops for (var i=0;i<=3;i++){console.log(i)} => i=4 because var i=0, 1, 2, 3 share a reference example #1133F

[noahthonyangelomhn]

So to sum that up, scopes in javascript is like a ray fish. it can only look to the side and up, but not below. so access variables on the same level and higher level but now below it's level.

[notsoclearsky]

I read the thumbnail as "Coping is hard" and thought to myself "Damn, even he is making relatable content now"

[borstenpinsel]

Never thought about the difference of script and global. For your own code it doesn't seem to matter. The only difference is that global contains the DOM etc. Seems semantic. Obviously DOM stuff isn't in your script but there is no actual scope boundaries/difference in visibility.


About the Kyle/Sally, that surprised me a bit, especially since const is supposed to sace you from overwriting a variable. You're not actually doing that, as outside of the block, it's still Kyle, but it might still cause bugs when you expect Kyle.
Now I wonder if you can access the Kyle variable with something like "super.name" (php has something like this, at least for class inheritance)

[ajiteshmishra]

Input=
[
{ id: 1, value: 20 },
{ id: 2, value: 30 },
{ id: 1, value: 10 },
{ id: 2, value: 20 },
{ id: 3, value: 40 }
]
```
Output:
[
{ id: 1, value: 30 },
{ id: 2, value: 50 },
{ id: 3, value: 40 }
]

From where can we learn these complex array and string manipulation questions on JavaScript??


All these are being asked in React interviews

[AlJey]

I'm going to try before watching (to test myself later): block scope, function scope, module scope, global scope and object scope

[gauravraj]

Great Video😍, Can you also teach us how we can build something similar to shopify like how they handle different theme templates and provide subdomain .

[aiamfree]

best exercise for understanding this is to build a dispatcher

[syedrazamehdirizvi]

You need to make Tamagui Tutorial for react native i cant find any youtube channel that is providing tutorial with example code!!!

[surajitdas]

@kyle: do you have any javascript advance course in Udemy? If yes, could you pls provide me a link. Thanks

[caceresmauro]

I needed to press the like button because it was "199" and my brain was hurting, someone sould exploit that

[ifaizanMK]

please make a video on debugging REACT, we can't debug it straightforward like JS. we con't use debugger in REACT

[sarma_sarma]

is it good to use var in js now because it's an older js concept right?