JavaScript Modules In 90 Seconds #JavaScriptJanuary

Channel:
United States codeSTACKr
Subscribers:
296,000
Published on ● Video Link: https://www.youtube.com/watch?v=4hmzMpBE4gE


Duration: 1:55
3,515 views
188

Watch the entire #JavaScriptJanuary series from the beginning!
https://www.youtube.com/playlist?list=PLkwxH9e_vrALlH7D0XLDn2td-uoHqHFxq

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

🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codestackr
_____________________________________

💖 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



Other Videos By codeSTACKr


2020-02-25VS Code Theme with Glowing Code!! (SynthWave '84)
2020-02-20ONLY HTML/CSS Platform Game In 1 Hour - @developedbyed Challenge
2020-02-185 Reasons You Should Learn Sass In 90 Seconds
2020-02-13How To Make Real Time Face Detection Using JavaScript
2020-02-11Artificial Intelligence In 90 Seconds
2020-02-06Neumorphic Calculator Build 2020 (HTML, CSS, JavaScript)
2020-02-03Neumorphism Design Trend 2020 In 90 Seconds
2020-01-31JavaScript setTimeout & setInterval In 90 Seconds #JavaScriptJanuary
2020-01-30JavaScript Classes In 90 Seconds #JavaScriptJanuary
2020-01-29JavaScript Object Methods In 90 Seconds #JavaScriptJanuary
2020-01-28JavaScript Modules In 90 Seconds #JavaScriptJanuary
2020-01-27JavaScript Async/Await In 90 Seconds #JavaScriptJanuary
2020-01-26JavaScript Fetch API In 90 Seconds #JavaScriptJanuary
2020-01-25JavaScript Promises In 90 Seconds #JavaScriptJanuary
2020-01-24JavaScript call() apply() bind() Methods In 90 Seconds #JavaScriptJanuary
2020-01-23JavaScript Functions In 90 Seconds #JavaScriptJanuary
2020-01-22JavaScript Array Some & Every Methods In 90 Seconds #JavaScriptJanaury
2020-01-21Motion UI - User Interface Animation (2020)
2020-01-21JavaScript Array forEach in 90 Seconds #JavaScriptJanuary
2020-01-20JavaScript Switch Statement In 90 Seconds #JavaScriptJanuary
2020-01-19JavaScript Spread Operator In 90 Seconds #JavaScriptJanuary


Tags:
JavaScriptJanuary
31Days31Videos
JavaScript
JS
Web Development
Web Dev
Web Development 2020
Web Dev 2020
HTML
CSS
Node.js
Chrome
ES5
ES6
ES7
javascript modules
js modules
javascript modules es6
js modules es6
javascript module tutorial
js module tutorial
javascript export
js export
javascript import
js import
javascript export import
js export import
javascript import export
js import export
javascript export import module
js export import module