Learn JavaScript Scoping In 10 Minutes
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- 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
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.
Way to go man.
Congratulations!
@najish mahmud.With my full respect to You and to the authors listed above:
please , edit Traverse to Traversy.Brad Traversy deservs it.
How did you easily step in to use javascript basics into projects, it's hard for me here?.
This is one of the best channels for those who want to learn the Web Development. Thanks for your efforts, Kyle!
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
Great one-stop video on scope. Wrote something the other day and scope was the only thing wrong with any of it!
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!!
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
Thanks a lot Kyle, very clear explanation as always !
Great explanation. Thanks for the illustration.
Congratulations 🎊 man i didn't know you have more than 1 million subscribers.
Your channel is very helpful,
love from South Africa 🇿🇦
Thank you I finally fully understood!
Amazing Explanation
well explained thanks alot... God bless
'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!
Thank you Kyle !!
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.
Thanks Kyle!
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!
Thank you Kyle
Thank you!
Kyle is a born Teacher. Thanks, Bud
Great share as usual.
Thanks Kyle 💯
Thank you Kyler
Your passion is teaching code bro
thank you!
thanks for videos
Agreed. He's amazing.
another banger from our boy Kyle
Congratulations on 1million
Hi Kyle, could you please do a video on decorators in javascript?
helpful😍
You've got 1million!!!
Can you make a video about promise scope?
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.
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.
@@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.
@@tejibel2800 they are not just style choices! sometimes you need them to avoid misunderstanding js
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?
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 😅
Best 🙂
Plz make a video on class constructor and methods in js
I was expecting some mentions about lexical scope and closures.
How can I recall a variable outside of the function scope?
Can you create a video or series of video for mern app with docker
Can you post a video on "Glass website" tutorial with CSS? 🤐
YESSIR!
Bro also create videos on source control in vs code
Do javascript have statistics module?
if I create a js file, how do I know if it is module scope or not?
It's never a module unless you specifically specify type="module"
const and let use block scope while var use function scope
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 😀
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.
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.
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?
I can not see the video, (only sound).
Hi, check up your sound. Something eating your words, listen 11:00
Why did he write moduleScript.js, but that .js file was actually not declared in the html file?
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
Do u mentor
First?
I am here
Once a thief always a thief, once a colonizer always a colonizer, the world should take heed.
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!
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.
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*.
this guy is the most 2000's looking guy I have ever seen.
Hey codingwithgaurav(Dodo) here.
Thank you!