Watch the entire #JavaScriptJanuary series from the beginning!

Modules allow you to break up your code into separate files. This helps to organize and keep your code clean.

A module can export code in several ways, and this will affect the way the consumer imports it.

One way to export something is by setting a default. So we can add “export default” to the beginning of the item we are exporting.

We also have a consumer which is the main JavaScript file that is defined in the HTML file. Here we can import the function like this. Note that this requires either a relative or absolute URL, so use either ./ or / before the file name, whichever is applicable.

Now we can use the function in our consumer.

When importing a default export, you can name the import whatever you want.

Note that you can only have one default export per module and a default export is not required.

We can export more that one thing from a module. We just need to add export before it.

Now in our consumer we can import those as well. Note that the default export does not require curly braces but the others do.

We can also rename these in our consumer by using an alias.

Now, in order to make all of this work in the browser we have to add type=”module” to our script tag in our index.html file. This tells the browser that this script will be using modules.

So what is the benefit of using modules? Modules are tree shakable (import what you need, shake off the rest) The consumer can import only what they need, which results in smaller bundles and better performance.

ES Modules was introduced in 2015, however as with any newer technology, it is important to check compatibility. As of the date of this video, browser compatibility for JavaScript modules is at 88%.

So if you need to support older browsers you will want to use something like babel to compile your code.

I’ll be releasing a new video every day in January! Stay tuned..
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course – https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development – Beginners Roadmap (2020) – https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#JavaScriptJanuary #31Days31Videos #codeSTACKr

source