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:
ES Modules Video: • JavaScript ES6 Modules
ES Modules Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ 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.

[@usua1myanmarian]

Way to go man.

[@emmm_4465]

Congratulations!

[@dimitargetsov9690]

@najish mahmud.With my full respect to You and to the authors listed above: please , edit Traverse to Traversy.Brad Traversy deservs it.

[@DavidTheITGuy.]

How did you easily step in to use javascript basics into projects, it's hard for me here?.

[@ori9390]

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

[@larrylam2914]

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

[@daedalus5070]

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

[@luisaborba4829]

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!!

[@lutho600]

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

[@gabrielv1856]

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.

[@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!

[@SchnippSchnappShnappi]

Thank you I finally fully understood!

[@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!

[@BalaSubramanian-fl1fl]

Amazing Explanation

[@carafachera4781]

Thank you Kyle !!

[@lakhveerchahal]

Thank you Kyle

[@ara-ara845]

well explained thanks alot... God bless

[@Arabian_Epileptic]

Thanks Kyle 💯

[@valeriousmonk654]

Thank you!

[@ythshhshsbsnshegebwnebeben2142]

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.

[@NedumEze]

Kyle is a born Teacher. Thanks, Bud

[@DavidTheITGuy.]

Your passion is teaching code bro

[@masonnash9396]

Thanks Kyle!

[@MinistryofJavaScript]

Great share as usual.

[@busyrand]

Agreed. He's amazing.

[@wpxpert98]

Thank you Kyler

[@Peywan]

thank you!

[@canerucar34]

thanks for videos

[@sowjanyasiddamshetty1532]

Hi Kyle, could you please do a video on decorators in javascript?

[@tejibel2800]

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.

[@JunGull]

JS doesn't require semi-colons. As far as I know, it automatically places then when it's parsed. It's pretty much up to you if you want to add them manually or not.

[@tejibel2800]

@@JunGull Thanks for the response. I didn't think it was just a style choice! I'll just assume that for now. If i ever find an exception i'll return here to share so.

[@navidghasemi9685]

@@tejibel2800 they are not just style choices! sometimes you need them to avoid misunderstanding js

[@hypernylium9782]

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 😅

[@adebayoomolumo1938]

Congratulations on 1million

[@emanuelecampora1999]

Can you make a video about promise scope?

[@kastussha1418]

You've got 1million!!!

[@parekhnirajj123]

Plz make a video on class constructor and methods in js

[@Fralleee]

I was expecting some mentions about lexical scope and closures.

[@sureshanandsekar4384]

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.

[@aalaeytb]

helpful😍

[@js-dev8682]

const and let use block scope while var use function scope

[@HawkMcDork]

cool, my question is, if i create (or change) a variable inside of a function and want to use that new variable OUTSIDE of the function, how do i do that?

[@mushfiqaraf5079]

Can you post a video on "Glass website" tutorial with CSS? 🤐

[@InezhInezh]

Best 🙂

[@scienceandtechnology9379]

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

[@saurabhs4743]

Bro also create videos on source control in vs code

[@99baddar]

Can you create a video or series of video for mern app with docker

[@thatsawesome.]

YESSIR!

[@deatho0ne587]

Things like TSlint normally throw Warnings in the case of multiple variables with the same name in the same file, due to it is a bad practice.

[@Harish-rz4gv]

Do javascript have statistics module?

[@alwysrite]

if I create a js file, how do I know if it is module scope or not?

[@ashkanahmadi]

It's never a module unless you specifically specify type="module"

[@jesusmanueldelvallepedros2608]

1:45 I tried the exact same code but I keep getting the following error message "SyntaxError: Cannot declare a const variable twice:" Any help would be appreciated 😀

[@bananatop6059]

I just watched your "JavaScript ES6 Arrow Functions Tutorial". You say that you should always use arrow function unless you have a good reason not to. In most of your recent videos you use functions, not arrow function. Have you had a change of mind?

[@shifronim8950]

Hi, check up your sound. Something eating your words, listen 11:00

[@collinl.179]

I can not see the video, (only sound).

[@harunjonuzi]

Why did he write moduleScript.js, but that .js file was actually not declared in the html file?

[@sureshanandsekar4384]

That is just to show case the module concepts like exports , imports . it s not necessary to load it in .html file. as far as i know

[@marvinjones689]

Do u mentor

[@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: import {stopAdvance, updateTrailList} from "/js/geolocation.js"; $('#trail_prev').click(()=>{ let current = $('#trail_controller_index_data').data('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: Probably due to the inability to use *import* with the *src*.

[@geetanshusharma3727]

I am here

[@eduardoburquezsanz1910]

Hi! I like your channel, but you talk so fast, I'm not native english speaker and can't follow you, but it's very interesting for me. I've to put on you the speed to .75 Please!

[@adarsh-chakraborty]

First?

[@wisdomngwueche469]

I wish you can be my personal teacher holding by my hand. I can work for you for free for a while. Please consider my offer.

[@josenunez8314]

this guy is the most 2000's looking guy I have ever seen.

[@piotrszczesniak]

[@learningjoe1823]

Hey codingwithgaurav(Dodo) here.

[@iambrijeshtoo]

Thank you!