JavaScript Modules Crash Course

Key Takeaways

JavaScript modules are Standalone pieces of code that can be imported and reused across different files allowing for better organization and encapsulation of functionality they're important to understand for all JavaScript developers in this course Tapas gives a deep dive on modules in JavaScript hello developers how are you doing today hope you're doing great learning and sharing things welcome to your channel tapascript where you learn things fundamentally JavaScript is a vast language it has multiple things to learn about and practice every framework or library that is built on JavaScript needs the fundamental things to be very clear before you start attempting them be it react Nexus angular view anything that you pick up today we are going to talk about one such fundamental aspects and again it's a crash course thank you very much for liking the JavaScript function crash course I got a lot of love you guys really made me feel happy thank you thank you thank you very much for that so in today's crash course we are also going to do the similar thing I am going to teach you things in and out with multiple examples so that you will never ever forget again the disclaimer once you go through this course that going through the course going through the topic is okay but it is not enough you have to practice so once you go through it go through it perfectly fine but after that make your own examples do your own practice that's the way you will learn better that's the way you will learn faster otherwise no course in the world can teach you how to do programming you have to practice but before that as usual on request if you have not subscribed for this channel go ahead and subscribe I'm sure you won't be disappointed let's get started [Music] JavaScript modules what are those before we get an answer for that let us go a few decades back probably the time when JavaScript was just born and people started using JavaScript started making their web pages Dynamic what they used to do they used to have all their application logic business logic into one gigantic Javascript file then they used to take that JavaScript into import the JavaScript into their HTML file with the script tag and they will be sprinkle some amount of CSS styling on top of that and that's how the web page will be built okay that things used to be very very simple because the number of use cases people had to solve at that point of time through web was very limited it's not like today today we have bunch of use cases we have a bunch of things we have lot of libraries we have a lot of Frameworks that are coming on top of it bringing things on top of that we are coding so think about it the amount of JavaScript we are writing for one application is also growing huge now if we want to go in the same fashion that we used to go a few decades back like putting all our JavaScript into one file and expect that to work that it may work but it is going to create lot of chaos what kind of cows you have written all your functionality one to one Javascript file that's fair enough but a tiny part of it your friend is needed now as an implementation into into into the other side of the app right how are you going to share that are they going to copy paste the portion of the code that they require or is there any other way so there was definitely a need the need of creating something which is smaller so that it is not putting so much load it is not so heavy on the file size which is reusable it means that somebody is creating it other person can use it very easily and it is something that is self-explanatory it means that if it has one job to do it is very well defined what kind of job that particular piece is supposed to do so think about something thing like this you have gigantic.js file okay so sorry for this name you know this is something that came in my mind gigantic.js file like imagine it's a file which is having bunch of JavaScript code bunch of business logic into it you will never like you know working with a file like this in your HTML file it's very heavy and none of this is kind of reusable right so it it doesn't solve anything for you rather than that what you would like to do you probably want to split that gigantic Javascript file into smaller JavaScript files which are supposed to do something very logical and the best part over here is that things are usable for example module 5 needs something from module one or you know module one it something from module two module three needs something from module two things like that like the key sharing can keep happening modules were introduced in JavaScript since es6 with the purpose that you will keep your code short in Javascript file and also the reusability factor of your code goes very high Things become more cleaner and so that you as a developer really don't be frustrated as and when your project grows you have more features to add you don't keep adding into one file rather you keep creating module keep them separated keep them reusable and make your life happy so that's what is model about next what we are going to learn we are going to learn about something called Import and Export whenever we talk about JavaScript modules Import and Export these two terms will automatically come in because they play a very wider role in terms of sharing things from one module to another module and making things working for the entire application all right so let's get into understanding how Import and Export works [Music] let's learn about Import and Export but before that what does Import and Export mean I always believe that once you want to learn something programmatically or a programming jargon programming turn you always need to learn that thing maybe with real life and then it's become very easy Once you understand the meaning of it so let's understand what is important export in plain English so Import and Export when it comes it mostly comes for different kind of services for example I am providing a service and I want to export that service to somebody maybe in a foreign country and in the foreign country there is somebody sitting who wants to import that service in their country and they need they use it as simple as that so I export somebody else input so for example we have Tina here so Tina is a blogger and she actually export her articles to Larry and Larry is someone who takes basically import uh her article and pay her some money right so that's how the import export in general works in the real life now when it comes to programming the fundamentalist kind of sim similar is like something you have to export so that some somebody or something else can import and make use of it right now we are going to get into the coding so that we understand how the export import Works in module what exactly the module encoding everything will unfold then you'll go to our next chapter right so let's get into the query so let us understand Import and Export with code you know the code base looks kind of pretty simple I have an index.html file and then a main.js file and I have imported the main.js file into index.html file you can see it using the script tag so everything seems to be good just want to make sure that things works so I'll just go ahead and do a console.log and say that learning modules right so if I do that and then Ctrl s save it I get learning module so everything works now the thing about module is like we have to export something from a module module is nothing but a Javascript file and then we will be able to import it to another Javascript file so I have to first write a code which will export something from a Javascript file which is a module and that's something I'll be able to import back into another Javascript file so for that let me create a file uh let's say the file name is calc.js probably I'll be doing some calculation and let me start doing some simple calculation not so heavy one maybe things like const sum equals to a colon B so it is basically doing a summation as you would have guessed and then return a plus b right so a simple sum function similarly I can have one more function maybe that is called subtraction or sub so let's have one more function called sub and we have a a and b as a parameter and do a minus B very simple now if I have to export these two functions so that I can invoke these two function from another Javascript file I have to export these functions now I am only talking about functions does it mean that I can export only functions no mostly actually in your programming you will be exporting only function but there will be time where you will be exporting some object where JavaScript object maybe an array could be a class or maybe a variable if there is a need so anything in JavaScript like variable class function object array you can export in our crash course we'll be mostly taking the example of function but you will be able to export everything so please try exporting a variable try exporting an object when you press practice after learning and going through this crash course okay so how can we export the way you can export is like by using this keyword called export this is one way of exporting so you do export and then you do export over here and you have now exported these two functions from character.js file fair enough now what we are going to do as we have exported the next thing that we are going to do is importing these files hey sorry importing these functions from this file to another JavaScript module to another JavaScript uh file in that case and then use it right we are not using this over here we just defined it here so we have another Javascript file called main.js and this main.js what we are going to do we are going to first import them so if I try to import the syntax would be like first do a import keyword and then there is a curly braces and then you give what you want to import from which file so for us from of course is the dot dot calc dot JS file so here one thing that want to call out if you are doing a module import or anything importing from a module in plain JavaScript environment you have to give this extension.js if you don't give this extension just put it like dot slash calc which works on react and any other framework kind of thing uh for but for playing JavaScript you will get error okay so you have to give calc.js and then over here start typing what you want to import so we are exporting two things from here one is sum another is sub so we may you want to import both of them like sum and then we are going to import sub or if you want to import just one thing you can import one thing now after importing that I just press Ctrl s and I'm getting an error do you see that error the error says cannot use import statement outside of a module okay I have intentionally created this error why why exactly because if you are using you know importing something from a module wherever you are importing things you know from a module that thing that particular Javascript file also needs to be a module how it can be a module so if I am going to index.html file and I have imported main.js over here but I am not saying that main.js is a different than any other you know normal Javascript file I am not saying it's a module so how am I going to tell it's a module because of that it is giving this error so I have to say type equals to module so if I do this you see that error has gone so it means now main.js can import from other modules because it it itself is a module so I'll go to main.js again and this is done I have imported now next thing that I can do is console Dot log of sum sum let's put two numbers two comma 3 so I'll get a five you get a 5 over here right similarly if I want to test sub over here and give some number like say 10 comma 5 of course it will return again 5 right so I know now I have actually defined something in a different module a calculation module I have exported these two things from here I have come to another module where I have used this right so this is one way that you can export what is the other way that you can export other way that you can export is instead if you want to export multiple things from you know one module instead of putting the export keyword you know in front of everything that you want to export you can do them together as well so for example you can do something like this export then you can do some comma sub this also works you are still getting the same five and five output right so either you do export keyword for with with each of the thing that you want to export or you start your definition finish your definition at the end of the file at the end of the module you export them now you might feel like you know I have exported multiple things from a file and I'm importing them into another file I'm kind of making use of them but is there more to it yes there are more to it there is something that you need to know which is called as default import and default export so I will be also getting into that in a moment [Music] foreign so there is one more way that you can export okay the one that we have just now learned is called named export okay named export the other way that you can export is called default export but before you go there let me explain why it is called named export it is because with the name that you are actually exporting you have to import with the same name for example I have exported them with seum SUV and I am trying to import them with Su M1 and making it seum one and try to do this you can see what is happening the error says that it is not available svm1 is not available in calc.js file basically so in the named export and named import it is mandatory that the name that you are using to export your data from one module you have to use the same name to import it back into another module you cannot really you know use another name while importing there is something called Alias by the way which I am going to teach you in the subsequent chapter in this course but Alias is a bit different but you the fundamental thing over here is like when you export and import using the named export and import you have to use the same name while exporting and importing you got my point so I'll just revert back things work again now there is another one which is called default export and default import what exactly default export and import let us see so here what I'm going to do I'm going to create another file the name of the file I'm going to give it like maybe who am I dot JS okay nothing fancy about who am I dot JS it's just going to do like const say my name equals to and it is going to return say happy yeah happy all right so it is returning a name set up a script my channel name and what we're going to do now we can do export but we'll be using a keyword with this called default and then we'll specify what you want to export in this case this particular function either you can do in this way or an alternate way of doing this would be you comment this out and just do export default this way so either you do it while you are defining it or you will do it you know towards the end in general I like you know defining things at the top and then exporting things at the bottom I feel that is more clear but it is up to your personal preference how do you want to go about it but what about this default you know export all about so the default export means you when you you want to export only one thing from a module use default export so it means that this is your default export default export of this module you you understand it this way it's a default export from this module but when we did named export for example we cannot say sum is a default export because there are multiple things you are exporting from a module so when you're exporting multiple things from a module you always use a named export and with the same name you import but when you have only one thing to export from a file you are a module you will be using something called a default export all right now where default export may be useful if you know react or you know any component based programming library or framework you know that the components at the end of the day are nothing but the plain old JavaScript functions so you you will you usually will write one component in a file as a module so it means that you can actually ex export one function from a file so in that case you export only one component from a file in that case it makes sense to make it as default export because you are exporting just one thing so that's why it exists but if you are making something like an utility something as a util file something like a library where you have multiple functionalities within one module then you want to go for a named export with the curly braces you don't want to do the default textbook so you know what is the differentiation between a default and the named export import right now but I need to show you one thing I have exported the default one but I have not imported it how do I import it let's see that as well so we'll go back to our index. sorry main.js file and in the main.js file we are going to now learn about our default export and default import all right so let me import so import how do you do this there are two ways one way you can do like import default as now here is a catch once you do a default export and try to import it it is not mandatory that you use the same name that you used while exporting to import the same thing you don't have to because you are exporting just one thing and you're importing into another module just that one thing so it so from that particular module it is guaranteed that there is only one thing coming so there is no name confusion there is nothing as such you know possibilities there so it means that while importing you can give any name but in our case the function name was say my name will go ahead with say my name first let's go ahead say my name and then we'll do from who am I of course you have to do dot JS otherwise you'll get an error so I have now imported it so next thing what I can do console DOT log off say name which is supposed to return tapascript what it does like is it on the script so this is this is great this works now if I do instead of say my name I'll just give my channel name right so instead of using the same name I am using my channel name now I'll still get the same output without an error because it's a default import and default export I hope it is clear to you now there is another syntax that you can use because this is little bit verbose like default as you know and you're also using this curly braces so instead of that you can simply use something like this instead of default as just ignore everything ignore everything this also works so it means that if you don't want to go with this curly brushes you don't have to actually use default as there are a lot of less coding so you can directly use the comp the function name or the component name if it is react.js or things like that then you can actually use it and even in this case also you may choose to go with the exactly same name that you are exporting to import or you can give your own name or other name because it's a default Import and Export and JavaScript knows that from this particular file file you are or this particular module you are just exporting one thing so you can there is no uh basically confusion of any kind of you know name name problems or name collisions or things like that so hope the default thing is also clear default import export is very clear to you next we are going to learn about aliases let's learn about aliases [Music] we will learn about aliases now so while importing exporting mechanism you can use something called an alias or the Alias name the Alias is used while importing a certain things that you have exported from another modules and why we need aliases so for example you are exporting sum and sub from here there is two function that we are exporting and then when you go to main.js we are importing those two over here right now it might happen that in your application use you are using another Library which are exporting something with the same name right there are two libraries exporting things from the same name and they are exporting with a named export so it means that you have to import with the same name you don't have a way like a default export import where you can actually use any name while importing so what you do in that case you need something to save you so for that the Alias come into picture what is Alias Alias is while importing something from another module if if you want to give another name of your choice because you think that there could be a name conflict you can choose to do that by using an alias so I'm saying that the sum as I'm going to do something like add right I can say sum and addition is kind of same thing so now onwards if I am trying to do Ctrl S I will be getting an error because you cannot use sum over here because sum is no more known which was coming from cap.js file it is no more known because you have to use this Alias name that's the way you can resolve the conflicts that's the way you resolve the same name conflict the same thing that's been exported from different uh module different libraries now you're importing all of them into one module into one place and you have a name conflict that's the time you can use aliases using the as keyword so you can do as many Alias as possible while importing you can even do sub as you know minus and use the minus over here instead of sub so I hope the area cases were useful and you learned something about it next we are going to talk about namespaces there is something called namespaces in Import and Export let's learn about that [Music] at times you may need to import a large number of functions from a module it can happen right so in our case the calc file is having only two functions I think it's like sum and sub yeah but uh in in real life programming you might have much more uh logically related functions you know objects things like that into one module you may have that right it would be tedious or too much of code to import them as comma separated you know as we have seen so far so what we have seen is like when we are importing them we are doing like comma separated think about it like you have seven such thing that you are exporting from calc.js file so you have to write them like with gamma separated one by one one by one which is like very very tedious right so we have a shorthand for that and that is what is called a namespace so now I'm going to show you like how to use namespace and the namespace is pretty handy uh when you have multiple things to export and those things you want to import into another module all right so we have this calc already that's fine perfectly fine now what we're going to do we are going to import calc in a bit little bit import the sum and Sub in bit different way so what we're going to do I'm just commenting them out so that I can write it clearly so I'll be doing like import star star means everything right and then give it as Alias give it as an alias our name because star means everything but you want to give something as a name and this is what is called namespace as let's give it as something called calc right and then we'll be doing from dot slash calc.js fair enough so you have done it we have imported everything give that given that everything our namespace calc it means that using this calc I will be now able to access everything that I am importing from calc so calc is having two methods we know sum and sub so I will be able to now access sum using calc I will be able to access sub using calc how will be accessing it I will be doing calc dot sum I'll be doing calc dot sub great so it's still giving 5 and 5 as my output 2 plus 3 5 10 minus 5 is 5. so namespace again very handy feature when you do export and import and why you do when you export lot of stuff from a module and want to import them it is very tedious for you to kind of type things down instead of that you will be importing Star as a namespace and using that name space name now you will be able to invoke everything that you are exporting from another module great fair enough let's move on to the next one where we are going to see something called combine Import and Export okay so let's see that [Music] let's learn the concept of combine export what exactly combined export as the name suggests the combine export means you will be combining thing and exporting them but but what why will you do that okay so let's take up a case for example we have calc.js file from here we are doing some kind of named export so that we can actually do a named import into another module okay fair enough then we have who am I from where we are doing a default export and we can do a default import of who am I from another modules fair enough but let's think that we have a use case like there is one file or one module where we need methods from calc also it needs method from who am I now what we have to do is like we have to do something like what we are doing in main.js will be fast importing calc then we'll be importing say for things like the name from the who am I and then we'll be start using them over here now there are only two modules is is simple how about there are like 10 modules or 15 modules so what we'll be doing over here is like we'll be importing 10 or 15 things on each of the files that require methods or that require the exports from each of this module okay I'm repeating again so if you need some functions or if you need all the functions or all the things or all the exports from each of these modules you need to import them over here and if you need them into multiple such modules you have to import the multiple such places now here there are only two it is fine but if the number is 10 or 15 you have to do this 10 or 15 Imports every time on every module wherever you want to use the exported items instead of that what you can do is like we can create a module which is intermediate which is in between it's called a combined module and that combined module is where we can export all of this thing so that we can import from only one module instead of importing from all you know each of them okay confusing let's see by example so what I'm going to do now I'm going to create something called a combine.js makes sense so in their combined.js what I'm going to do now I am going to do export I'm not doing import I'm doing export Star as calc from dot slash calc.js do you know what it is if you don't know I just taught you just go back I just taught you about namespace so what I'm doing is like I am exporting everything from calc.js file but in exporting as a namespace because there are multiple things calc.js exports I don't want to type them one by one I know the advantage of calc as I know the advantage of our namespace so I'm using that and then next thing I am going to do export default right default as let's give a name channel name from dot slash who am I all right dot JS all right so now from the combine.js file I have now exported everything that I have to export so that any module now want to import anything from this they don't have to again import them individually rather they just need to import this combined.js and from that they will be able to extract things how let's see that so coming to the main.js file I'm going to remove everything I am going to remove all these things and instead of that what I'll be doing now I'm importing from the combined.js file so for that again I'll be using namespace a very powerful feature Star as combine from dot slash combine.js file okay so one thing I want to highlight not many places you will find uh you know that that you will be you will be learning the usage of things like this like how to how to really do your better module architecture so I'm teaching you out of experience I'm teaching you like whatever I have learned so I want you to pay solid attention here like why we are doing this and what is the right way of doing things right so please spend some time and of course do some practice okay as and when you are learning so import Star as combined now we have a new namespace called combine so using this combined namespace now I will be able to import everything that is there in the combine.js file right so what is that in a combined.js file the combined.js file is having everything from the character JS everything from the who am I from who am I things are straightforward just one default export so one thing that I can actually import but from calc.js again I am using a namespace because I didn't want to type all all the all the exported item over here instead of I'm using a namespace so to access the thing that is there in the character JS I have to now go through this namespace so I have to change the name spaces so here what I'll be doing now I'll be doing console DOT log so that I can print it combine my namespace DOT I want to take from calc so calc will be my namespace and then I will have an access to my sum and sub so I cannot do sum and uh you know sub directly it is printing the result also because now it is exposed the sum and sub are exposed through this particular namespace into the combine.js file so I can only access them through the namespace only but there is no namespace fund over here at all right I have just used a different name because it's a default export import I can use any name so this is directly accessible from the combined.js namespace which is combined or just name spaces combine so I'll just copy this thing so that I don't have to type it again and instead of calc dot sum I can directly do channel name see here you got the output so this combine export is very useful feature when you have multiple modules which are exporting things and you have to import them into multiple places that time combine into one intermediate module and from there you export it so that in the multiple places like in the main.js or anywhere else you just have to import it once and you have to use it also along with that please make use of the namespace fundamentals that you have learned now so that it is kind of you very less typing you are not importing everything think about your calculator J is having 15 methods you are not typing all 15 methods over here rather you have created a dim space and when you are importing it whatever you need you just importing that part using the namespace chain so hope it is clear combine export please make use of it please practice this again and again so that you know it completely [Music] so friends are you enjoying so far are you enjoying what I'm teaching and whatever you're learning make sure you practice enough make sure that you write code of uh everything that you're learning here so now a very interesting uh chapter that we're going to get started it's about Dynamic Imports Dynamic Imports is immensely useful and in any library or framework that you'll be working in future maybe react view or anywhere uh you will be using Dynamic import a lot to take care of the application performance loading things at the runtime and things like that so we'll be explaining we'll be we'll be learning everything about Dynamic import but before that if you are liking what I am teaching please go ahead and subscribe if you have not subscribed also you can join me as a member join tapascript as a member so that you can get some member only Sparks so go check out the membership as well alright so coming back to Dynamic Imports to explain Dynamic Imports I have created a very simple module called gritting you have seen it enough so far with the previous chapters you have say hi and you have say hola there's two greeting message which logs just high and hola and after that I am exporting them from here with the name export so I can go to main.js file and I can actually import them say hi and say hola like this and after that what I can do I can just use say Hi and then I can use say hola and I'm expecting that this will run well and it is going to print me hi and hola fair enough everything works perfectly and this import and this export that what we have done just now is called Static Import and Export okay static import static export no rocket science now what we're going to talk about Dynamic Import and Export but why what is the reason the reason over here that the static Import and Export cannot be conditional so for example you cannot dose in something like if my mood is okay then import say hi and say hola else don't import anything you cannot do this with static import even if you want to there will be a syntax error there will be error so you cannot do like conditional things with static Import and Export okay other thing the other thing that the problem is like all this import happens at the top of the file so whether you are using them at a later point of time or not at the runtime doesn't matter but the import is done basically so if you have to take something some decision at the runtime that what if you want to import and what you want to use which static import that is not there that button is always there in your programming you might want something which you don't want to import things you know in advance rather you want to import it in the runtime only when if it is required so on those cases you have to make use of something called Dynamic import and this is what I am going to teach you now so please pay attention of how to do Dynamic import so first thing to do to teach you the syntax so okay so how to do Dynamic import Dynamic import to do that you have to use a function like a syntax called import and then you have to pass what you want to import so we want to import here greetings.js okay so this is what the dynamic import is now once you do this import you know passing the module that you want to import this import returns you a promise now if you are new to JavaScript asynchronous programming and Promises I have created a extensive series on JavaScript asynchronous programming and Promises please go ahead and check that later point of time but understand that it resolves something as promises which you can resolve it to get the value of this what this module is actually giving you okay now there are multiple ways you can I do do resolving of a promise one way of course you can use the Handler methods called then catch finally all this thing or you can do like async and await keyword okay so syntactically asking an await may be much much stressed forward that's why I'll be using async and await over here but if you want to get a deeper picture of promises his Handler methods async and have it again I told you I have a full series of this one asynchronous programming go ahead and check that okay so now as it returns a promise I have to resolve this I'll be using the await keyword okay so if I use the avat keyword so I can actually now get the result value of what this import is going to return to me the resolve value that import is going to return to me is nothing but whatever I have exported from this module which is say hi comma say and then I can actually give a const in front of it so it means I have now dynamically imported you see the output is also coming Dynamic dynamically imported say hi say hola and I'm using it now what is the advantage of doing this the one of the advantages you can use this this particular syntax anywhere any place in the code not not necessarily you have to always use at the top level at the beginning of your module as we have seen with the static import you can actually write any number of code on top of it you know sorry any number of code on top of it like you know uh cost ABC equals to something or then some logic everything you get done and after that you can do Dynamic import this is one thing so you have a flexibility of dynamic import of doing it at the runtime second flexibility that you have is like this in this entire thing actually I can just do if true just for example so that the you know true false things works and I can enter thing I can keep inside a block okay let's try let's try if this works this works right I have kept everything inside a block you cannot do this with the static import now think about it you can write a code like if my mood is okay my mood is okay it's a Boolean and if it is true I am in a mood to give you greeting say hi and say hola else I don't want to see your face okay so things like that right so you can do any kind of logic and inside the logic you can do Dynamic input which is like all something in my opinion okay so one more thing I want to kind of touch base a little bit uh I would say advanced level little bit deeper level but doesn't matter you know you guys know everything now so you can actually follow it as you now know like the import while Dynamic import import returns a promise right that's why we are using await over here so it means that I can now load multiple modules dynamically concurrently simultaneously how using something called Promise dot all method what does promise.all method or the promise dot all settled method you know methods like that do what promise.all method do is like if I do promise dot all this particular method what it does basically it takes an array of all the promises and then run them in parallel after they resolve it actually send all the you know resolving resolved promises to you and then you can actually extract the values from them so think about a case like where you have this particular await like a weight uh import greeting.js right so you have this particular call over here a particular module that you are importing and in parallel you want to import another module let's take that as an example also I'll be doing await let's take another module we have this calc module right if you have not forgotten calc so we have something called dot slash character JS so what I have done right now I have done promise.all and in that what I am doing I am having an array inside that add a promise.all in that array I am passing all the modules that I want to import all at once okay you will be doing things like this in programming when you are doing real programming you know not like just a side hustle or maybe even in the side as it's not just like for fun but if you're doing something really solid serious stuff you will be doing things like this you will be actually trying to Dynamic import multiple modules so this is one of the way now what it returns it will return bunch of promises okay so I'll catch them inside Branch or promises so how I'm teaching you just go step by step okay so that you learn it completely what it returns it returns promises and if I just expand it the promise state is says fulfilled I'll just expand it little bit it says fulfilled means all the promises resolved successfully the result is two arrays why two arrays because we are now importing two modules if we had imported three modules we would have got three arrays okay so in each of this array we have the output of it this is the Fantastic part of it so all the output Has Come Together in this in this so that I can now extract all the output together all right so what will happen now if I expand this one I see say hi and say hola because I'm I'm importing from greetings right I'm importing from greetings over here now if I just expand the second one do you see what you have you have sum and subbed because I am doing from calc so this is what is very very powerful now how do you do this this is a promise now to extract really the value out of it what we'll be doing we'll be doing like promise is dot if you have to resolve it you will be doing then and then you get the result I'll write an arrow function and here now let me do console.log of result just to make you understand like what is going on right we'll go step by step again we don't have any hurry I'll do um so now what we have we have array of two modules so it means that from the promises we got the promise now we are resolving the promise the result after resolving the promise is an array which gives me all the information from each of this module import so the first one I got the first module again first module if I expand I have say hi say hola second module if I uh do I will have sum and sub right now how will I extract the results from this what do you think how am I going to do this so I can do simply result of 0 which is the first module on that I can do say hi right and if I put inside the console.log this guy DOT log say hi over here yeah I am going to get high so instead of that if I do hola I have it now if I have to go you know the sum and sub that is there in the another array so I can go result of 1 and I can do sum of 2 comma 3 I am going to get the 5. so the thing that I wanted to explain over here very very important okay it's a quick recap when you want to do Dynamic Imports of multiple modules you can do Dynamic Imports of my multiple modules using some the static methods that promise JavaScript promise apis provides again if you are new to it I have an extensive video and also developed a tool for you to learn it go ahead and check that video where I have mentioned the tool you can learn from the tool like how each of this method works like promised at all promise.res promise that all settled all you can learn but for now promise that all is a method from the JavaScript promise api's inbuilt method which can take multiple promises together execute them and then return the area of promises that you can use to extract out whether there is a success or there is a failure if there is a success you will get a value so in our case each of this Dynamic import nothing but it returns a promise so we just put them inside This Promise dot all and after that it returns you know all the promises then we resolve these promises we get the result which is nothing but again an array array of each of this module with the resolved result it means that whatever they are exporting we can actually now import it back so this is one way when things gets complex you can actually use I thought of just touching base because I have used it in my programming I'm sure that somewhere down the line you will be using this it too I hope you use you you like like it I hope you like Dynamic Imports I hope you enjoyed learning Dynamic inputs so friends we are back again after all the chapters after all the coding I hope you liked all the chapters and please do practice there is one more item that I want to mention before I end this video there's a term called tree shaking right so the tree shaking is a term that is that I think that was introduced by roll up if I'm not wrong but it is is very widely known term what exactly it means it means is like now when you are exporting lot of stuff from a module and then you are importing all the stuff into another module but you are importing but you may not end up using everything right you have done like you know Star as like we then with an uh namespace you imported everything but you are not using everything right then what is happening is like it is an unnecessary load it is an unnecessary thing that you are bundling when you are bundling for your production build that is where some of the bundler like webpack roll up and all these things that they come up with a feature of 3 shaking what they can do for the developer development Bill there is no change basically everything gets combined but for a production build you can enable things in such a way that only Whatever Gets imported into your module only that much gets burned and bundled into the production build so you don't unnecessarily bundle things which you are not importing right which you are not doing it so the thumb rule over here be very cautious about what you are trying to import in your module don't import things that you won't be using it as simple as that so that the final production build size the bundle size will be smaller if you try to import everything but you don't use it this is unnecessary lying there like a stale code dead code so this this phenomena of removing the stale code removing that code that you are not going to use is called free shaking so if you want to learn more about reshacking please go ahead and read and you know read from the web there are a lot of Articles a lot of videos out there so with that this particular crash course come to an end I'll just do a quick recap whatever we have learned we have learned what JavaScript modules are we have learned how to do Import and Export we have learned what is named export what is default export then we have learned how to combine things together we have learned what is namespace we have learned what is dynamic import we have learned how to do multiple Dynamic inputs how to handle using promises and we finally spoke about tree shaking so we have learned a lot now what you have to do if you have come so far learning everything with me just go ahead and practice whatever examples I have done whatever you have learned so far just put your own examples do practice if you have any doubt put a comment into the comment section I'll respond back to you and if you like this video my request will be you press the like button and then you share this video among your circle so that others also get benefit out of it and if you have not subscribed to this channel go ahead and subscribe because much more interesting things are about to come alright take a great care of yourself I'll be back very soon with another video thank you very much