Require vs Import Javascript

[@MonsterlessonsAcademy]

Learn 5 must know Javascript interview questions - kzbin.info/www/bejne/Y2nUl6qIYqaBes0

[@souryavarenya]

Ah man, one of the best videos explaining this. My understanding of distinguishing between frontend and backend JS cleared up after watching this.

[@MonsterlessonsAcademy]

Glad you liked it!

[@kithowlett8374]

This is actually one of the best JS module explanation videos on KZbin - thank you!

[@MonsterlessonsAcademy]

Glad you think so!

[@CarlosChavez-ij5ki]

I agree

[@rameshwarprasad4722]

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.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@wentinz]

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!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@ohmyumbrella]

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.

[@MonsterlessonsAcademy]

Glad it helped!

[@user-ic4ce8xb5v]

Super helpful! I spent so much time watching different tutorials, but you explained this the best!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@jesseneon1896]

I love the way you teach and code at the same time. Amazing video, I look forward to watching more of your videos.

[@MonsterlessonsAcademy]

Happy to hear that!

[@volkan8583]

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.

[@MonsterlessonsAcademy]

You are welcome!

[@kmSaifullah]

You have just explained this topic in a very elegant way. Thanks for sharing this and spread your knowledge on the internet.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@flecko5]

Thanks for explaining the history behind this topic!!!!

[@MonsterlessonsAcademy]

Glad you like it!

[@gseven7307]

Too few likes for an amazing video like this. Very systematic, very clear and concise. Thank you very much

[@MonsterlessonsAcademy]

Glad it was helpful!

[@mitrasu5918]

Man you are the real MVP my guy, helping out plebs from the past. Thank you so much.

[@MonsterlessonsAcademy]

Great to hear that!

[@GiuseppeGreco-jl7dx]

Clear and easy to follow, thanks. One step closer to understanding it all ✨

[@MonsterlessonsAcademy]

Glad it was helpful!

[@shwetamane8774]

Explaining the 'why' made it extremely easy to understand! 👏 Thank you very much.

[@MonsterlessonsAcademy]

You're very welcome!

[@Svalin04]

Your explanation is really good. Thanks for this video.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@panthonyy]

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!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@fatihaelbouchaoui]

The best explanation abt this topic. Thanks.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@martindufour5727]

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

[@MonsterlessonsAcademy]

Wonderful!

[@expertreviews1112]

THE best video on the topic... so much confusion with the evolution and this brings everything together !!!! awesome !! kudos

[@MonsterlessonsAcademy]

Glad you liked it!

[@musaffirlp5710]

Well explained and I understood it clearly. Kudos !

[@MonsterlessonsAcademy]

Thanks!

[@Sashad2003]

You are one of the best teachers I know. Thank you very much for a lesson 😎👍

[@MonsterlessonsAcademy]

Thank you! 😃

[@ajithingmire7782]

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

[@MonsterlessonsAcademy]

Glad you like it!

[@ashishbisht9162]

This is the best simplified explaination i ever head .. so neat and clear......Thankx dude....Bless you...

[@MonsterlessonsAcademy]

Glad it helped!

[@B-Billy]

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]

Glad it helped!

[@conceptroot]

Качественный материал. Теперь все понятно. Спасибо

[@sigvist6228]

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!

[@MonsterlessonsAcademy]

You're welcome!

[@MarcoTulioRibeiro]

I'm looking for this explanation a long time. Excellent presentation, congrats!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@dylanmarais7304]

Could you maybe do a video about your setup that allows you to so easily traverse through your files? Great content btw!

[@MonsterlessonsAcademy]

Thank you! It is already there: kzbin.info/www/bejne/j6Ovmqidec12q80

[@Michael-sh1fb]

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.

[@MonsterlessonsAcademy]

Glad you enjoyed it!

[@bhavyabansal1143]

One of the best videos I have seen so far... Thanks a lot for this.

[@MonsterlessonsAcademy]

Glad you liked it!

[@AsheAve]

Nice article. I learned a ton and watched it like ten times over two days! I have the timeline of modules, now.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@CarlosChavez-ij5ki]

Damn, thanks man. I had a whole in my brain related to this topic. Now it is filled with a very good explanation.

[@MonsterlessonsAcademy]

Glad it helped!

[@shubhamshinde3720]

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

[@MonsterlessonsAcademy]

Awesome!

[@kineticBoss]

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.

[@MonsterlessonsAcademy]

Glad to hear that!

[@aminebelbahar1086]

Great content! all I wanted to know about node modules and es6 modules

[@MonsterlessonsAcademy]

Thank you!

[@robertobenedit]

Espectacular! increible lo claro que sos! Me diste un mejor punto de vista!

[@MonsterlessonsAcademy]

Thank you!

[@luizmeirelles913]

Amazing explanation.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@Kjeii]

Really clear explanation! Thanks so much!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@Kjeii]

@@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?

[@amventures1]

OMG! you cleared the confusion I had.

[@MonsterlessonsAcademy]

I'm happy to hear that!

[@anselmleo4146]

Thanks so much for the in-depth explanation. Got here looking for how to refactor my common js code to typescript es6.

[@MonsterlessonsAcademy]

You are welcome!

[@Pareshbpatel]

A very clear tutorial on CommonJS and JS Modules. Thank you. {2022-03-08}, {2023-12-14} PS Subscribed!

[@MonsterlessonsAcademy]

Awesome, thank you!

[@IsaacLarbiOnline]

Thank you for such a clear and concise explanation.

[@MonsterlessonsAcademy]

You're very welcome!

[@aliozeir708]

very smooth and helpful. Thanks!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@aakashjadhav327]

nice video, very well explained, best video on this topic on the internet.

[@MonsterlessonsAcademy]

Wow, thanks!

[@kostiantynkarzhanov9216]

Thank you so much! Very good explanation of the topic! 💛

[@MonsterlessonsAcademy]

Glad it was helpful!

[@Technochoice-do1bl]

Thanks you made my day and save lots of mine time

[@MonsterlessonsAcademy]

Glad to hear that!

[@FerchoNossa]

Great. Thanks for this monstrous explanation

[@MonsterlessonsAcademy]

My pleasure!

[@Untitled0078]

I love the way he speaks.

[@MonsterlessonsAcademy]

Thanks!

[@nvn1413]

Exactly what I was loking for; thanks. Subscribed gladly...

[@MonsterlessonsAcademy]

Thanks for the sub!

[@farahrayis5928]

Clear explanation. Thank you very much. You saved me a lot of time.

[@MonsterlessonsAcademy]

Glad it helped!

[@kriskata7653]

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 :)

[@MonsterlessonsAcademy]

You are welcome!

[@0x007A]

The text editor is either vim or one of its derivative clones such as neovim. Not everyone uses Microsoft Visual Studio Code.

[@saimdhefaizandhe872]

perfect name for channel

[@MonsterlessonsAcademy]

Thank

[@user-ty5pd4xw2y]

Great vid, really all you need in modules! thx

[@MonsterlessonsAcademy]

You're welcome!

[@rsym.4397]

the best explanation ever!

[@MonsterlessonsAcademy]

Thank you!

[@hieuphanlong51]

OMG, this is so easy to understand. Thank you very much.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@sudosanam]

Perfectly explained, thanks for the great content!!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@hugobritotech]

this is a true monster lesson, i learned several things, thanks for the content

[@MonsterlessonsAcademy]

Glad to hear it! Mmmmonster content :)

[@mrs8683]

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

[@MonsterlessonsAcademy]

Thank you! It's monaco font.

[@maxvhanamane840]

It was a very thorough explanation, and it was really easy to understand ❤.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@supastar25]

Perfect explanation, thanks a lot

[@MonsterlessonsAcademy]

Glad to hear that!

[@mithunsurve]

Best video on modules !!!

[@MonsterlessonsAcademy]

Glad you think so!

[@exxzxxe]

A first class presentation- well done!

[@MonsterlessonsAcademy]

Glad you liked it!

[@designniewolinsky7752]

Best video on that topic!

[@MonsterlessonsAcademy]

I'm happy that you like it!

[@lukasluftlaufer1093]

So clear and concise! Thanks a Lot!

[@MonsterlessonsAcademy]

I'm happy that you like it!

[@NaveenSingh_09]

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.)

[@MonsterlessonsAcademy]

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

[@NaveenSingh_09]

@@MonsterlessonsAcademy Thanks for the reference...

[@NaveenSingh_09]

​​@@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.

[@952a259]

Thank you for explanation!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@RishabhJain-uv7zj]

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.

[@MonsterlessonsAcademy]

Hi, I already have a video about code editor kzbin.info/www/bejne/j6Ovmqidec12q80 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

[@yiannis_p]

Amazing video, thank you so much!

[@MonsterlessonsAcademy]

Glad it helped!

[@odebroqueville]

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?

[@MonsterlessonsAcademy]

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

[@scottisitt]

Very helpful! Thank you for explaining this!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@Jeireme]

Thank you very much, everything is clear and very well explained!

[@MonsterlessonsAcademy]

You are welcome!

[@gurinderkaur6377]

Thank you so much for explaining in detail.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@fernandogabriel8452]

Amazing content! You can really explain your stuff

[@MonsterlessonsAcademy]

Glad you think so!

[@NN-si6cl]

Very helpful, thanks for the great breakdown!

[@MonsterlessonsAcademy]

Very welcome!

[@ltmutiwekuziwa]

So so clear. Thanks

[@MonsterlessonsAcademy]

Glad you think so!

[@devviz]

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]

No we don't. require was introduced in NodeJS from the start. imports were introduced much later in Ecmascript 6.

[@r.a.collection]

Good discriptions well done 👍

[@MonsterlessonsAcademy]

Thanks 👍

[@m12652]

Brilliant! Thank you

[@MonsterlessonsAcademy]

You're very welcome!

[@thebmusproject]

Thanks for this great explanation!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@ercanyanmaz5624]

Thanks for your great effort🙂

[@MonsterlessonsAcademy]

You are welcome!

[@SanjeetKumar-xd3ne]

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.

[@MonsterlessonsAcademy]

Thanks, will add it to the ideas list of future videos

[@SanjeetKumar-xd3ne]

@@MonsterlessonsAcademy🎊❤️🎉

[@n3d278]

Just simply awesome.. 👏

[@MonsterlessonsAcademy]

Thank you so much 😀

[@neoruss3553]

I skimmed through the video searching for one specific difference that i didn't see you mentioning. I think that CommonJs modules give you copy of exported value while ES modules give reference to a value in scope of module. This makes closures with modules and cross module events possible.

[@TheLucidWay]

Holy cow, this was a superb explanation! Just one question, though. If I were to build a full stack application, would I need to use common.js for the backend and use es modules for the front end, or would you choose one type of module system for both ends? Thank you!

[@MonsterlessonsAcademy]

Normally you want to use imports with webpack/babel on client and require on backend. However you might use imports on backend if you want with webpack/babel also but I don't like to do that.

[@TheLucidWay]

@@MonsterlessonsAcademy okay, I see. Thank you for replying and thanks again for this video. It was really helpful.

[@balajeemishra]

Really,I have learned alot ❤️

[@MonsterlessonsAcademy]

You are welcome!

[@user-nh8ge6hx9r]

thx for the clear explanation ;)

[@MonsterlessonsAcademy]

You are welcome!

[@sudhakarprakash4276]

great explanation

[@MonsterlessonsAcademy]

Glad you think so!

[@nicknameis]

Amazing!

[@MonsterlessonsAcademy]

Thank you! Cheers!

[@nicknameis]

@@MonsterlessonsAcademy Возьмите меня в школу. Я бы за 3 месяца весь фул стек бы освоила, если бы у меня был бы такой учитель. Столько бестолковых учителей, которые сами знают лишь поверхностно. А хочется знать детали и что куда и откуда. Спасибо за отличные уроки.

[@paxdriver]

Cors errors drove me insane trying to learn react while learning new things outside of the framework

[@EdsonSilva-qr5gr]

Awesome content, keep going

[@MonsterlessonsAcademy]

Thanks, will do!

[@ripudamank]

Thanks! Very informative.

[@MonsterlessonsAcademy]

You are welcome!

[@glurp1er]

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.

[@MonsterlessonsAcademy]

modules don't stop you to use classes. export default FooClass import FooClass from 'foo.class' you are done

[@glurp1er]

@@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?

[@MonsterlessonsAcademy]

@@glurp1er All your classes are global. Without modules you have name collisions, possibility to override class, etc.

[@glurp1er]

@@MonsterlessonsAcademy Thanks again! Indeed I see now how modules could prevend classes names from colliding.

[@Ishirosama]

Great content !

[@MonsterlessonsAcademy]

Thank you!

[@murilo.g.t]

Nice video!! Thaanks!

[@MonsterlessonsAcademy]

You are welcome!

[@DevlogBill]

Thank you for this quick lesson it was very helpful. I am fairly new to coding and the other day I looked at a piece of code and it seemed the page was filled with functions, am I correct to assume that most of a program is created using functions? I am only 2 months in learning JavaScript, so I am fairly new at this stuff.

[@MonsterlessonsAcademy]

Hi, it's either functions which we exporting or classes which we exporting. We don't have anything else.

[@rohitbahuguna3481]

nice video dude i loved it

[@MonsterlessonsAcademy]

Glad you enjoyed

[@danialranjbar9805]

Thank u for ur inforamtive nice video. It was good. Only it would be really better if u could give us a little smile and energy while tutoring, that would be perfect👍

[@MonsterlessonsAcademy]

I will try my best!

[@prasanth-pk12]

thank you so much man...

[@MonsterlessonsAcademy]

You're welcome!

[@nelsoncaicedo6761]

Thanks man!! this is awesome

[@MonsterlessonsAcademy]

Glad you like it!