Learn JavaScript Scoping In 10 Minutes

One of the biggest mistakes JavaScript developers make is not fully understanding how scoping works. There are 4 different levels of scoping and if you don’t have a strong grasp of how they interact with each other it can be incredibly difficult to write complex JavaScript code. In this video I cover all 4 different levels of scoping in JavaScript and how you can use them to your advantage.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:30 - What is a scope
02:12 - Global Scope
04:02 - Module Scope
05:53 - Block Scope
07:35 - Function Scope
08:55 - Using multiple variables with the same name

#Scoping #WDS #JavaScript

[njayman]

I started learning web development somewhere near 2019. I was still in my undergrad and learning from you. I also used to follow dev Ed, Traversy media, New Boston, Fireship and Net ninja. I have finally landed a job as a JavaScript developer and it's all thanks to you guys. I learn something new every time I watch your videos.

[ori]

This is one of the best channels for those who want to learn the Web Development. Thanks for your efforts, Kyle!

[luisaborba]

OMG you're video made so much more sense than the way my teacher was explaining scope to us at the bootcamp. Thank you so much Kyle!!

[daedalus]

Great one-stop video on scope. Wrote something the other day and scope was the only thing wrong with any of it!

[lutho]

Congratulations 🎊 man i didn't know you have more than 1 million subscribers.
Your channel is very helpful,
love from South Africa 🇿🇦

[larrylam]

love this type of videos!! they are so informative while the topics may seem easy or general, but i learn things I didn't know every time

[lannsterroy]

Thanks a lot Kyle, very clear explanation as always !

[raymondbyczko]

'let' is my friend. 'var' is subject to hoisting in the function context, which makes things messy I would think. Good work as always Kyle!

[ythshhshsbsnshegebwnebeben]

I know you mainly teach programming and best practices but i would really like to see a video about quickly designing restapis, documentations and databases from you. I know about openapi and a few gui editors and generators but it seems there are nearly no videos about the topic. If you need to designe a prototype backend with a hand full of schemas, yould you start in a Texteditor/IDE or would you choose a more or less automated process in which you define a schema once and use it to generate api, db and doc parts?
If there is already a video from you about this topic i apologize, thx for reading and keep up the good work.

[AcrylicHorizonsAbstractArt]

Great explanations for how scoping works! However I'd be hesitant to say you *should* be using module scoping. There are definitely use cases where it's beneficial, but for example I have applications where a lot of variables and data need to be accessible to other scripts running (tracking, analytics, etc) and module scoping would make that more of a pain, so we have a lot scoped globally.

Either way, great video with great information!

[ara-ara]

well explained thanks alot... God bless

[gabrielv]

Hello Kyle, first and foremost, thanks a lot for simplifying things a lot with your tutorials and lessons. I cant recall for how long ive been watching your channel but its been a while... (times goes really fast man...)

I am currently working on a personal project that driving me to scope hell. The thing is that certain parts of the code (not just variables and functions) must me accessible by other parts of the code but some shouldnt and thus causing a headache were to place the scope of what. Another problem is that i know that by now there are a "managable" amount of code i can handle but it will become a monster with all the different parts of the project

[Juzzyjuzzy]

Great explanation. Thanks for the illustration.

[hypernylium]

now, i know you are more of a javascript guy but hear me out. can you try to make a file uploader using html, css, javascript and php with a loading bar? btw love you content. watch all of you're videos 😅

[tejibel]

Hey Kyle, i'm returning to writing typescript after almost a decade. I love your videos! Great use of clean code. I see you barely use semi-colons. Could you explain or maybe make a short on when to use them? Keep up making the great content.

[raymondbyczko]

I like using the type="module" designation, and then do the import within it. If I then actively add imported functions to button click bindings (using a bit of jQuery), they do not go away, since they are in the DOM (correct me if I am wrong). Even though the module will go away after its processed. Something like this (just adding my 1 cent and excuse the blade notation). This is for a trail/trip planner app I am writing:

<script type="module">

import {stopAdvance, updateTrailList} from "/js/geolocation.js";

let current =
if (current == 0) {
return;
}
current = current - 1;
updateTrailList(current, {{ $max }}, {!! count($list) !!});
$('#trail_controller_index_data').data('current', current);
});
.
.

The above is recent working code fragment. If I recall doing the following does not
work:
<script type="module" src="/js/geolocation.js">
Probably due to the inability to use *import* with the *src*.

[js-dev]

const and let use block scope while var use function scope

[sabayet_hasan_promit]

How can I recall a variable outside of the function scope?

[Fralleee]

I was expecting some mentions about lexical scope and closures.

[sureshanandsekar]

In React projects , we actually added the type:"module" in package.json . we dont add it manually as far as i knew in react js projects. correct me i am wrong folks.