This was such an amazing explanation man. You've literally covered every aspect of modules and that too in complete depth. Thank you soo much. Keep making more JavaScript videos.
your video is so helpful! I love that you dive into the reason to invent modules before getting into how to use it, because for beginners, that is the hardest part to understand - why do we need to complicate things this way? Your explanation made perfect sense and I can see when we need to use it and when not!
this should be pinned on top of the result list for any "beginner javascript tutorial" search. I have been working with JS without knowing this simple thing and had faced so many problems but never had that wise idea to actually search the difference between commonJS and ESM. Now I am humbled and unstuck. Thank you.
Ty for good explanation. Its been 7 months of my journey and tutorials only say "do this" instead of why they do that in that way. You make clear some of the logic that Ive been misunderstood.
Thanks a lot for the detailed explanation and demos. They do help clarify the difference between require and import, and why import is more favorable over require.
You are the best. I was confronting with the issue related to these require() import a lot of time. Hopefully, your video helped me to understand how to solve my issue. Thanks!
I very rarely comment or participate on the Internet, as I'm usually just a passive listener and content reader. However, I felt compelled to break from my habits to thank you. Your explanation is splendid and incredibly well-done
Just one IMPORTANT thing: 20:12 Import statements are not hoisted, so you have to declare it at the top. (I went through several blogs and articles, may be I understood it wrong...in that case please correct me.)
Import declarations are hoisted. In this case, that means that the identifiers the imports introduce are available in the entire module scope, and their side effects are produced before the rest of the module's code runs. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
@@MonsterlessonsAcademy Actually you are wrong about it, just try and run what you said it will not work as you explained in the video. . ES6 imports are hoisted to the top of the file, but they're in temporal zone until the actual import statement is evaluated...meaning You CAN NOT use the imported function or variable before the import statement itself. So basically the imports are hoisted but not like variable declarations.
Wow, everyone keeps saying es6 modules are better but rarely anyone tells why. Very precisely explained. I started exploring this topic after getting optimisation bailouts warnings in Angular for certain commonjs modules, I think now I know why commonjs modules are not tree shakable
I am Java developer learning JS. I was having a hard time understanding JS import.. Watched many videos but this is where it all make sence!! Kudos, thank you so much! Suubscribed.
@@MonsterlessonsAcademy I'm trying to store api key in self-made module and provides key using export/import; that works! However, it still reveals api key using browser devtool; is there any method to hide sensitive information in front-end code?
your explanation is too good man i was writting Es6 module in Vuejs and Commonjs Modules in nodejs but didn't know there was difference in them until now those Udemy course don't teach this things even beeing most views and rated
I was struggling with a code base that had "require" and exports. Whereas another codebase had import, it was super confusing. But thank you for clearing it up. Great video, good explanation. Also, you speak English very calmly, it helps me to understand better as I am a non-native English speaker.
Amazing explanation of the topic. I understood everything. Also I would like to mention that if you are using the Live Server extension you don't need to install serve from the npm. Thank you for the tutorial :)
This explanation was great. Can you make a video about the code editor you were using and some common shortcut you use it seemed pretty efficient while viewing this video.
Hi, I already have a video about code editor ruclips.net/video/YrLiugDhCuk/видео.html 90% of my shortcuts are standard vim shortcuts. They are not customised. dd - delete the line caw - replace the word ci( - replace in brackets dit - delete in tags etc, etc
@@MonsterlessonsAcademy Возьмите меня в школу. Я бы за 3 месяца весь фул стек бы освоила, если бы у меня был бы такой учитель. Столько бестолковых учителей, которые сами знают лишь поверхностно. А хочется знать детали и что куда и откуда. Спасибо за отличные уроки.
Very clear explanation which covers a bit more than just the basics. Thank you. Did I understand correctly that ES6 modules can be used in NodeJS? Also wondering: what's the best way to use node modules in web extensions?
In the latest versions of node both commonjs and es6 is supported but you must provide correct configuration to tell what module system you want nodejs.org/api/esm.html#modules-ecmascript-modules Regarding web extensions I have no idea
@@MonsterlessonsAcademy { var a = "value"; } "a" won't be available outside of this block. I made an experiment yesterday before even watching this video. Two scripts in . 1st declares a function and second calls it. Function prints "hello". When i wrapped a declaration in {} i got error "function not defined" but didn't notice any other errors. I've got the idea of {} giving code its own scope from dragon book. I'll check again after work to see if i missed something.
@@MonsterlessonsAcademy i tested it today. Code like this: let a = "1"; console.log(a); { let a = "2"; console.log(a); } console.log(a); It printed out: 1 2 1
so we just went a whole circle from *import from* to *const require* back to *import from* because we realized the original method is still the best one ?! now that's mindblowing
@@MonsterlessonsAcademy Thanks for your quick response! I already use classes to organize my code in different files (sometimes static or singleton), so why should I use modules on top? I feel like I'm missing something... Maybe modules are a way to restrict the usage of a class to a specific file?
This is awesome. Can you make a video on how modern web frameworks loads up works in the production version on browser, with all required packages and files, and how those files interact with other, that's a big challenge for me to understand.
Now, When we use ESM in node js, is it actually being converted internally into common js or used as it is? And another question now ESM supported by browsers is that means I don't need to make web server to load my module or I still need and why so
ESM in node is pain and is you can't import esm node modules in common js directly. What everybody are using are transpilers from esm to commonjs. In browser tools like Vite transpiles less and makes it faster with usage of esm modules.
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
WATCH NEXT: Javascript Interview Questions and Answers - Dominate Your Next Interview - ruclips.net/video/wnYKH2dO620/видео.htmlsi=5DfbGEfhXWiiv0a_
Ah man, one of the best videos explaining this. My understanding of distinguishing between frontend and backend JS cleared up after watching this.
Glad you liked it!
This is actually one of the best JS module explanation videos on RUclips - thank you!
Glad you think so!
I agree
This was such an amazing explanation man. You've literally covered every aspect of modules and that too in complete depth. Thank you soo much. Keep making more JavaScript videos.
Glad it was helpful!
your video is so helpful! I love that you dive into the reason to invent modules before getting into how to use it, because for beginners, that is the hardest part to understand - why do we need to complicate things this way? Your explanation made perfect sense and I can see when we need to use it and when not!
Glad it was helpful!
Super helpful! I spent so much time watching different tutorials, but you explained this the best!
Glad it was helpful!
I love the way you teach and code at the same time. Amazing video, I look forward to watching more of your videos.
Happy to hear that!
this should be pinned on top of the result list for any "beginner javascript tutorial" search. I have been working with JS without knowing this simple thing and had faced so many problems but never had that wise idea to actually search the difference between commonJS and ESM. Now I am humbled and unstuck. Thank you.
Glad it helped!
One of the highly underrated channels on RUclips! Brilliant explanation!
Glad you think so!
Wow, best commonjs modules and ES6 modules course on YT, that cleared a lot of things in my mind. Thanks a lot. You just got a new sub!
Glad it was helpful!
Ty for good explanation. Its been 7 months of my journey and tutorials only say "do this" instead of why they do that in that way. You make clear some of the logic that Ive been misunderstood.
You are welcome!
The best explanation abt this topic. Thanks.
Glad it was helpful!
Your explanation is really good. Thanks for this video.
Glad it was helpful!
You have just explained this topic in a very elegant way. Thanks for sharing this and spread your knowledge on the internet.
Glad it was helpful!
THE best video on the topic... so much confusion with the evolution and this brings everything together !!!! awesome !! kudos
Glad you liked it!
Almost every beginner JavaScript developer gets confused by this topic, But you made it very clear and easy, thank u Bro ❤❤
Glad to hear that
Explaining the 'why' made it extremely easy to understand! 👏 Thank you very much.
You're very welcome!
I'm looking for this explanation a long time. Excellent presentation, congrats!
Glad it was helpful!
Too few likes for an amazing video like this. Very systematic, very clear and concise. Thank you very much
Glad it was helpful!
This is the best simplified explaination i ever head .. so neat and clear......Thankx dude....Bless you...
Glad it helped!
Clear and easy to follow, thanks. One step closer to understanding it all ✨
Glad it was helpful!
Thanks a lot for the detailed explanation and demos. They do help clarify the difference between require and import, and why import is more favorable over require.
Glad it was helpful!
You are the best. I was confronting with the issue related to these require() import a lot of time. Hopefully, your video helped me to understand how to solve my issue. Thanks!
You're welcome!
Man you are the real MVP my guy, helping out plebs from the past. Thank you so much.
Great to hear that!
Thanks for explaining the history behind this topic!!!!
Glad you like it!
Damn, thanks man. I had a whole in my brain related to this topic. Now it is filled with a very good explanation.
Glad it helped!
Amazing explanation.
Glad it was helpful!
One of the best videos I have seen so far... Thanks a lot for this.
Glad you liked it!
nice video, very well explained, best video on this topic on the internet.
Wow, thanks!
I very rarely comment or participate on the Internet, as I'm usually just a passive listener and content reader. However, I felt compelled to break from my habits to thank you. Your explanation is splendid and incredibly well-done
Wonderful!
Just one IMPORTANT thing: 20:12
Import statements are not hoisted, so you have to declare it at the top.
(I went through several blogs and articles, may be I understood it wrong...in that case please correct me.)
Import declarations are hoisted. In this case, that means that the identifiers the imports introduce are available in the entire module scope, and their side effects are produced before the rest of the module's code runs.
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
@@MonsterlessonsAcademy Thanks for the reference...
@@MonsterlessonsAcademy Actually you are wrong about it, just try and run what you said it will not work as you explained in the video.
.
ES6 imports are hoisted to the top of the file, but they're in temporal zone until the actual import statement is evaluated...meaning You CAN NOT use the imported function or variable before the import statement itself.
So basically the imports are hoisted but not like variable declarations.
Perfectly explained, thanks for the great content!!
Glad it was helpful!
Nice article. I learned a ton and watched it like ten times over two days! I have the timeline of modules, now.
Glad it was helpful!
Thanks a lot. I've been putting off learning this because it's not a very interesting topic but you summed it up really well.
Glad you enjoyed it!
You are one of the best teachers I know. Thank you very much for a lesson 😎👍
Thank you! 😃
Well explained and I understood it clearly. Kudos !
Thanks!
Thank you for such a clear and concise explanation.
You're very welcome!
Espectacular! increible lo claro que sos! Me diste un mejor punto de vista!
Thank you!
Wow, everyone keeps saying es6 modules are better but rarely anyone tells why. Very precisely explained. I started exploring this topic after getting optimisation bailouts warnings in Angular for certain commonjs modules, I think now I know why commonjs modules are not tree shakable
Glad you like it!
Great content! all I wanted to know about node modules and es6 modules
Thank you!
I am Java developer learning JS. I was having a hard time understanding JS import.. Watched many videos but this is where it all make sence!! Kudos, thank you so much! Suubscribed.
Glad it helped!
Really clear explanation! Thanks so much!
Glad it was helpful!
@@MonsterlessonsAcademy I'm trying to store api key in self-made module and provides key using export/import; that works! However, it still reveals api key using browser devtool; is there any method to hide sensitive information in front-end code?
Exactly what I was loking for; thanks. Subscribed gladly...
Thanks for the sub!
Thank you so much! Very good explanation of the topic! 💛
Glad it was helpful!
very smooth and helpful. Thanks!
Glad it was helpful!
Clear explanation. Thank you very much. You saved me a lot of time.
Glad it helped!
Great vid, really all you need in modules! thx
You're welcome!
A first class presentation- well done!
Glad you liked it!
OMG, this is so easy to understand. Thank you very much.
Glad it was helpful!
your explanation is too good man i was writting Es6 module in Vuejs and Commonjs Modules in nodejs but didn't know there was difference in them until now those Udemy course don't teach this things even beeing most views and rated
Awesome!
this is a true monster lesson, i learned several things, thanks for the content
Glad to hear it! Mmmmonster content :)
I was struggling with a code base that had "require" and exports.
Whereas another codebase had import, it was super confusing.
But thank you for clearing it up.
Great video, good explanation.
Also, you speak English very calmly, it helps me to understand better as I am a non-native English speaker.
Glad to hear that!
Thanks so much for the in-depth explanation. Got here looking for how to refactor my common js code to typescript es6.
You are welcome!
So clear and concise! Thanks a Lot!
I'm happy that you like it!
Great. Thanks for this monstrous explanation
My pleasure!
Very helpful! Thank you for explaining this!
Glad it was helpful!
just discovered your chanel and i am amazed how you explain thing, it is awesome, and i wonder what is the font you are using ? it is really dope
Thank you! It's monaco font.
It was a very thorough explanation, and it was really easy to understand ❤.
Glad it was helpful!
Thanks for this great explanation!
Glad it was helpful!
Could you maybe do a video about your setup that allows you to so easily traverse through your files? Great content btw!
Thank you! It is already there: ruclips.net/video/YrLiugDhCuk/видео.html
Качественный материал. Теперь все понятно. Спасибо
Amazing explanation of the topic. I understood everything. Also I would like to mention that if you are using the Live Server extension you don't need to install serve from the npm. Thank you for the tutorial :)
You are welcome!
The text editor is either vim or one of its derivative clones such as neovim. Not everyone uses Microsoft Visual Studio Code.
Very helpful, thanks for the great breakdown!
Very welcome!
Thanks you made my day and save lots of mine time
Glad to hear that!
super helpful video, thank you so much!
Glad it was helpful!
Best video on that topic!
I'm happy that you like it!
Amazing content! You can really explain your stuff
Glad you think so!
This explanation was great. Can you make a video about the code editor you were using and some common shortcut you use it seemed pretty efficient while viewing this video.
Hi, I already have a video about code editor
ruclips.net/video/YrLiugDhCuk/видео.html
90% of my shortcuts are standard vim shortcuts. They are not customised.
dd - delete the line
caw - replace the word
ci( - replace in brackets
dit - delete in tags
etc, etc
OMG! you cleared the confusion I had.
I'm happy to hear that!
Thank you very much, everything is clear and very well explained!
You are welcome!
Perfect explanation, thanks a lot
Glad to hear that!
Thank you so much for explaining in detail.
Glad it was helpful!
Amazing video, thank you so much!
Glad it helped!
the best explanation ever!
Thank you!
The Best explanation!!
Glad you think so!
Amazing!
Thank you! Cheers!
@@MonsterlessonsAcademy Возьмите меня в школу. Я бы за 3 месяца весь фул стек бы освоила, если бы у меня был бы такой учитель. Столько бестолковых учителей, которые сами знают лишь поверхностно. А хочется знать детали и что куда и откуда. Спасибо за отличные уроки.
Thank you for explanation!
Glad it was helpful!
Best video on modules !!!
Glad you think so!
Good discriptions well done 👍
Thanks 👍
Really,I have learned alot ❤️
You are welcome!
Just simply awesome.. 👏
Thank you so much 😀
Thanks for your great effort🙂
You are welcome!
A very clear tutorial on CommonJS and JS Modules. Thank you.
{2022-03-08}, {2023-12-14}
PS Subscribed!
Awesome, thank you!
Very clear explanation which covers a bit more than just the basics. Thank you. Did I understand correctly that ES6 modules can be used in NodeJS? Also wondering: what's the best way to use node modules in web extensions?
In the latest versions of node both commonjs and es6 is supported but you must provide correct configuration to tell what module system you want
nodejs.org/api/esm.html#modules-ecmascript-modules
Regarding web extensions I have no idea
2:32 - actually you don't have to make a function here. Just wrapping a piece of code in a block with {} is enough to give it it's own scope.
But just {} is not a valid js. or what do you mean?
@@MonsterlessonsAcademy
{
var a = "value";
}
"a" won't be available outside of this block. I made an experiment yesterday before even watching this video. Two scripts in . 1st declares a function and second calls it. Function prints "hello". When i wrapped a declaration in {} i got error "function not defined" but didn't notice any other errors.
I've got the idea of {} giving code its own scope from dragon book.
I'll check again after work to see if i missed something.
@@MonsterlessonsAcademy i tested it today. Code like this:
let a = "1";
console.log(a);
{
let a = "2";
console.log(a);
}
console.log(a);
It printed out:
1
2
1
so we just went a whole circle from *import from* to *const require* back to *import from* because we realized the original method is still the best one ?! now that's mindblowing
No we don't. require was introduced in NodeJS from the start. imports were introduced much later in Ecmascript 6.
So so clear. Thanks
Glad you think so!
thx for the clear explanation ;)
You are welcome!
perfect name for channel
Thank
Very good explanation, thanks!
However, I'm used to OOP and I don't really get why I should switch to modules instead of keeping using classes.
modules don't stop you to use classes.
export default FooClass
import FooClass from 'foo.class'
you are done
@@MonsterlessonsAcademy Thanks for your quick response!
I already use classes to organize my code in different files (sometimes static or singleton), so why should I use modules on top?
I feel like I'm missing something...
Maybe modules are a way to restrict the usage of a class to a specific file?
@@glurp1er All your classes are global. Without modules you have name collisions, possibility to override class, etc.
@@MonsterlessonsAcademy Thanks again!
Indeed I see now how modules could prevend classes names from colliding.
Awesome content, keep going
Thanks, will do!
Brilliant! Thank you
You're very welcome!
I love the way he speaks.
Thanks!
Thanks! Very informative.
You are welcome!
This is awesome.
Can you make a video on how modern web frameworks loads up works in the production version on browser, with all required packages and files, and how those files interact with other, that's a big challenge for me to understand.
Thanks, will add it to the ideas list of future videos
@@MonsterlessonsAcademy🎊❤️🎉
Cors errors drove me insane trying to learn react while learning new things outside of the framework
Thanks man!! this is awesome
Glad you like it!
nice video dude i loved it
Glad you enjoyed
great explanation
Glad you think so!
Now, When we use ESM in node js, is it actually being converted internally into common js or used as it is? And another question now ESM supported by browsers is that means I don't need to make web server to load my module or I still need and why so
ESM in node is pain and is you can't import esm node modules in common js directly. What everybody are using are transpilers from esm to commonjs.
In browser tools like Vite transpiles less and makes it faster with usage of esm modules.