Javascript Modules | Export Import Syntax for ES6 Modules

Learn Javascript Modules and the ES6 Module syntax to import and export modules in this Javascript tutorial. Javascript ES6 Modules help you organize your code into reusable JS files, functions, and classes.

✅ Quick Concepts outline:
JavaScript Modules
(0:00) Intro
(0:30) ES6 Module Basics
(0:42) JS Modules are only supported on servers
(1:30) Use the Live Server extension in VS Code
(2:04) The script tag with type="module"
(2:22) No defer needed
(3:15) Strict mode by default
(3:40) Create a Javascript Module
(4:55) Export default
(5:15) Export { firstItem, secondItem }
(5:45) Export inline
(6:35) Import the default export
(7:23) Import { firstItem, secondItem }
(8:04) Rename imports
(9:03) Import the full namespace
(11:58) JavaScript Class export and import example
(15:02) Current browser support for modules

📚 Further Reading:
MDN Web Docs:

📺 Learn Web Dev at these sites:

✅ Follow Me:

Was this tutorial about JavaScript ES6 Modules helpful? If so, please share. Let me know your thoughts in the comments.

#javascript #modules #export

[yatin]

Now that I am here for a refresher, its astounding how clear I am getting in JS foundations. This will help me in another part of my upskilling journey where I will be creating web components.
There is no better teacher out there for frontend than you Dave!

[ankitaburman]

Thank you Dave for teaching us these core concepts, I am learning something new everytime from your channel.

[Grihlo]

Thank you Dave! I'm trying to learn something about JS every day and your channel is the main source for me. Thank you also for all the additional references like MDN website and Eloquent JS book!

[AdrianoGrataniClassicalGuitar]

professional, concise, perfect explanations. you're always very helpful. have a nice day!

[Bol_imla]

Great lesson..I have really understood the import and export modules now..Keep up impacting more lives

[cetinsangudev]

Golden content. Your detailed, clear explanations were really lifesaver for me. I hope you'll achieve your goals on YouTube. You deserve millions of subscribers. Thanks!

[jacobgraf]

Great job! Very easy to follow along and comprehend! 👏

[Codewithammu]

Thnaks Dave you're teaching is outstanding 😊

[hertechera]

Thank you so much for the clear and detailed explanations. I appreciate your work.

[eip]

Thanks for giving valuable content as always Dave🙌🏼 very detailed underrated content 🔥

[adnan]

ALLHAMDULILLAH🥰🥰 every point is cleared. thank you so much

[RomanKnav]

Thanks, you covered precisely what I wanted to know, plus live server makes development a lot more easy and pleasant.

[chandrachurmukherjeejucse]

As always detailed, crisp and to the point lecture

[zal]

Very useful and fleshed out, filled in a lot of my gaps when it came to importing. I recommend watching this in 1.25x speed since he can talk a little slow lol. But that's okay.

[kostiantynkarzhanov]

Hey Dave! Thanks for another awesome lesson! 💛

[nikolov]

(8:04) Rename imports

Dealing with Identically Named Default Exports

If you were a little bit too curious like me, then you probably tried to import 2 identically named Default Exports from 2 different modules. Then you thought I will rename one of them and this will prevent any conflicts.
Well... JavaScript does not work that way.

JavaScript expects each module to have a unique "Default Export" name.
If this is not the case you will need to refactor the modules themselves,
to ensure there is no overlap.

📝 This note serves as a reminder for myself, if I happen to revisit the video in the future or for any future students who may encounter similar scenarios.

[tektektuktuk]

I got this error: Failed to load resource: the server responded with a status of 404 (Not Found)

[DevlogBill]

(timeline 9:17) Did the developers who created modules steal the idea from SQL when you type: "import * as Guitars from ./guitars.js"
In SQL the * is called a wildcard. I am pretty sure me as a newbie I am getting excited with some of the terminology used here, looks similar to SQL and even C when you enter the name of the file by using ./

[immortalaigs]

It doesnot work to me actually. When i wrote type="module" to script it showed me nothing, even console.log("Hello I am working") did not show in console. I dont get it. did i do something wrong?

[tomytoon]

do you have updated tutorial for this?
I wonder if this still works this year.