Require vs Import Javascript

[@MonsterlessonsAcademy]

WATCH NEXT: Javascript Interview Questions and Answers - Dominate Your Next Interview - kzbin.info/www/bejne/rZ-8fHtombRpaJIsi=5DfbGEfhXWiiv0a_

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

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

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

[@z1adahmed]

Almost every beginner JavaScript developer gets confused by this topic, But you made it very clear and easy, thank u Bro ❤❤

[@MonsterlessonsAcademy]

Glad to hear that

[@默-c1r]

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

[@MonsterlessonsAcademy]

Glad it was helpful!

[@SasiruTharinda]

One of the highly underrated channels on KZbin! Brilliant explanation!

[@MonsterlessonsAcademy]

Glad you think so!

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

[@GuanglinDu]

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.

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

[@fatihaelbouchaoui]

The best explanation abt this topic. Thanks.

[@MonsterlessonsAcademy]

Glad it was helpful!

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

[@luizmeirelles913]

Amazing explanation.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@ashishbisht9162]

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

[@MonsterlessonsAcademy]

Glad it helped!

[@shwetamane8774]

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

[@MonsterlessonsAcademy]

You're very welcome!

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

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

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

[@flecko5]

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

[@MonsterlessonsAcademy]

Glad you like it!

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

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

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

[@GiuseppeGreco-jl7dx]

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

[@MonsterlessonsAcademy]

Glad it was helpful!

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

[@ChasingTheMapleLeaf]

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

[@MonsterlessonsAcademy]

Wow, thanks!

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

[@bhavyabansal1143]

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

[@MonsterlessonsAcademy]

Glad you liked it!

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

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

[@mitrasu5918]

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

[@MonsterlessonsAcademy]

Great to hear that!

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

[@musaffirlp5710]

Well explained and I understood it clearly. Kudos !

[@MonsterlessonsAcademy]

Thanks!

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

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

[@sudosanam]

Perfectly explained, thanks for the great content!!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@aminebelbahar1086]

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

[@MonsterlessonsAcademy]

Thank you!

[@laakolina]

Thank you for such a clear and concise explanation.

[@MonsterlessonsAcademy]

You're very welcome!

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

[@Sashad2003]

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

[@MonsterlessonsAcademy]

Thank you! 😃

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

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

[@conceptroot]

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

[@robertobenedit]

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

[@MonsterlessonsAcademy]

Thank you!

[@farahrayis5928]

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

[@MonsterlessonsAcademy]

Glad it helped!

[@FerchoNossa]

Great. Thanks for this monstrous explanation

[@MonsterlessonsAcademy]

My pleasure!

[@exxzxxe]

A first class presentation- well done!

[@MonsterlessonsAcademy]

Glad you liked it!

[@aliozeir708]

very smooth and helpful. Thanks!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@nicknameis]

Amazing!

[@MonsterlessonsAcademy]

Thank you! Cheers!

[@nicknameis]

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

[@designniewolinsky7752]

Best video on that topic!

[@MonsterlessonsAcademy]

I'm happy that you like it!

[@kostiantynkarzhanov9216]

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

[@MonsterlessonsAcademy]

Glad it was helpful!

[@ОлексійКудряшов]

Great vid, really all you need in modules! thx

[@MonsterlessonsAcademy]

You're welcome!

[@lukasluftlaufer1093]

So clear and concise! Thanks a Lot!

[@MonsterlessonsAcademy]

I'm happy that you like it!

[@hieuphanlong51]

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

[@MonsterlessonsAcademy]

Glad it was helpful!

[@Technochoice-do1bl]

Thanks you made my day and save lots of mine time

[@MonsterlessonsAcademy]

Glad to hear that!

[@supastar25]

Perfect explanation, thanks a lot

[@MonsterlessonsAcademy]

Glad to hear that!

[@rsym.4397]

the best explanation ever!

[@MonsterlessonsAcademy]

Thank you!

[@nouman_sharif]

perfect name for channel

[@MonsterlessonsAcademy]

Thank

[@mithunsurve]

Best video on modules !!!

[@MonsterlessonsAcademy]

Glad you think so!

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

[@nvn1413]

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

[@MonsterlessonsAcademy]

Thanks for the sub!

[@aimeerivers]

super helpful video, thank you so much!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@maxvhanamane840]

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

[@MonsterlessonsAcademy]

Glad it was helpful!

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

[@r.a.collection]

Good discriptions well done 👍

[@MonsterlessonsAcademy]

Thanks 👍

[@scottisitt]

Very helpful! Thank you for explaining this!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@illiapotapov9939]

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.

[@MonsterlessonsAcademy]

But just {} is not a valid js. or what do you mean?

[@illiapotapov9939]

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

[@illiapotapov9939]

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

[@Pareshbpatel]

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

[@MonsterlessonsAcademy]

Awesome, thank you!

[@hugobritotech]

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

[@MonsterlessonsAcademy]

Glad to hear it! Mmmmonster content :)

[@amventures1]

OMG! you cleared the confusion I had.

[@MonsterlessonsAcademy]

I'm happy to hear that!

[@952a259]

Thank you for explanation!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@Untitled0078]

I love the way he speaks.

[@MonsterlessonsAcademy]

Thanks!

[@thebmusproject]

Thanks for this great explanation!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@ercanyanmaz5624]

Thanks for your great effort🙂

[@MonsterlessonsAcademy]

You are welcome!

[@ltmutiwekuziwa]

So so clear. Thanks

[@MonsterlessonsAcademy]

Glad you think so!

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

[@yiannis_p]

Amazing video, thank you so much!

[@MonsterlessonsAcademy]

Glad it helped!

[@Jeireme]

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

[@MonsterlessonsAcademy]

You are welcome!

[@paxdriver]

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

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

[@gurinderkaur6377]

Thank you so much for explaining in detail.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@sudhakarprakash4276]

great explanation

[@MonsterlessonsAcademy]

Glad you think so!

[@m12652]

Brilliant! Thank you

[@MonsterlessonsAcademy]

You're very welcome!

[@EdsonSilva-qr5gr]

Awesome content, keep going

[@MonsterlessonsAcademy]

Thanks, will do!

[@n3d278]

Just simply awesome.. 👏

[@MonsterlessonsAcademy]

Thank you so much 😀

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

[@balajeemishra]

Really,I have learned alot ❤️

[@MonsterlessonsAcademy]

You are welcome!

[@user-nh8ge6hx9r]

thx for the clear explanation ;)

[@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🎊❤️🎉

[@ncaicedo93]

Thanks man!! this is awesome

[@MonsterlessonsAcademy]

Glad you like it!

[@rohitbahuguna3481]

nice video dude i loved it

[@MonsterlessonsAcademy]

Glad you enjoyed

[@murilo.g.t]

Nice video!! Thaanks!

[@MonsterlessonsAcademy]

You are welcome!

[@Ishirosama]

Great content !

[@MonsterlessonsAcademy]

Thank you!

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

[@erichepperlewp]

06:16 - #GOTCHA: CommonJS only runs in Node, not the browser (natively). This means you can't run "require" statements in browser without calling some library.

[@MonsterlessonsAcademy]

Yeap!