Javascript Modules | Export Import Syntax for ES6 Modules

  Рет қаралды 15,743

Dave Gray

Dave Gray

Күн бұрын

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
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.
▶ This video is part of the JavaScript Tutorials for Beginners Playlist found here: • Javascript Tutorials f...
Subscribe ➜ bit.ly/3nGHmNn
✅ 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:
Javascript Modules: developer.mozilla.org/en-US/d...
📺 Learn Web Dev at these sites:
www.freecodecamp.org
www.theodinproject.com
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Reddit: / daveoneleven
Was this tutorial about JavaScript ES6 Modules helpful? If so, please share. Let me know your thoughts in the comments.
#javascript #modules #export

Пікірлер: 62
@yatin1370
@yatin1370 6 ай бұрын
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!
@ankitaburman5406
@ankitaburman5406 Жыл бұрын
Thank you Dave for teaching us these core concepts , I am learning something new everytime from your channel.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad to hear that!
@Codewithammu
@Codewithammu 15 күн бұрын
Thnaks Dave you're teaching is outstanding 😊
@Bol_imla
@Bol_imla 2 ай бұрын
Great lesson..I have really understood the import and export modules now..Keep up impacting more lives
@jacobgraf83
@jacobgraf83 2 жыл бұрын
Great job! Very easy to follow along and comprehend! 👏
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad to hear it, Jacob!
@AdrianoGrataniClassicalGuitar
@AdrianoGrataniClassicalGuitar 11 ай бұрын
professional, concise, perfect explanations. you're always very helpful. have a nice day!
@hertechera
@hertechera 8 ай бұрын
Thank you so much for the clear and detailed explanations. I appreciate your work.
@Grihlo
@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!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You are very welcome! Keep up the good work!
@chandrachurmukherjeejucse5816
@chandrachurmukherjeejucse5816 Жыл бұрын
As always detailed, crisp and to the point lecture
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Many thanks!
@kostiantynkarzhanov9216
@kostiantynkarzhanov9216 Жыл бұрын
Hey Dave! Thanks for another awesome lesson! 💛
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Welcome!
@pulserudeus7968
@pulserudeus7968 2 жыл бұрын
Thanks for giving valuable content as always Dave🙌🏼 very detailed underrated content 🔥
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you for the kind words! 🙏💯
@marvinfok65
@marvinfok65 2 жыл бұрын
Yeah, I have been following Dave's vids and they are being overly underrated! Some of the best Javascript lessons on youtube!
@ayoabe
@ayoabe 3 жыл бұрын
Thanks for the concise lesson
@DaveGrayTeachesCode
@DaveGrayTeachesCode 3 жыл бұрын
You're welcome!
@RomanKnav
@RomanKnav Жыл бұрын
Thanks, you covered precisely what I wanted to know, plus live server makes development a lot more easy and pleasant.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@cetinsangudev2563
@cetinsangudev2563 2 жыл бұрын
Golden content. Your detailed, clear explanations were really lifesaver for me. I hope you'll achieve your goals on KZfaq. You deserve millions of subscribers. Thanks!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you for the kind words! 💯
@nikoryu-lungma
@nikoryu-lungma Жыл бұрын
@@DaveGrayTeachesCode There is one thing I have to ask, though. In this lesson, I imported my file inside the same folder with my JS file. However, when I imported my file(The name of the file is "guitar.js"), then I keep getting this weird error(Even though I put them in the same folder): GET 127.0.0.1:5500/static/posts net::ERR_ABORTED 404 (Not Found) I re-checked a bunch of times, the file is still in the folder named "static", why did the browser not get it? Can you help me to explain this situation?
@Marius-vw9hp
@Marius-vw9hp Жыл бұрын
Superb video! Thanks
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@wheelerflemming
@wheelerflemming 2 жыл бұрын
Thank you for this.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome, Wheeler! 💯
@4xikzm9qcw12
@4xikzm9qcw12 2 жыл бұрын
Great tutorial, thank you.
@4xikzm9qcw12
@4xikzm9qcw12 2 жыл бұрын
PS im not a bot
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad it was helpful! 💯🚀
@adnan8465
@adnan8465 2 жыл бұрын
ALLHAMDULILLAH🥰🥰 every point is cleared. thank you so much
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome, Adnan! 🙏
@xnxbxs_zx
@xnxbxs_zx Жыл бұрын
Thank you 🙌
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@dodokwak
@dodokwak 3 жыл бұрын
Thank you.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 3 жыл бұрын
You're welcome!
@quochuynh6962
@quochuynh6962 2 жыл бұрын
thank you very much
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome 🙏
@zal221
@zal221 3 жыл бұрын
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.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 3 жыл бұрын
Thanks and absolutely! I do go slow for some and just right for others 🙂. Learn at the pace you are comfortable with. Thanks for watching!
@OlgaIntini
@OlgaIntini 2 жыл бұрын
@@DaveGrayTeachesCode since I’m not mothertongue english I’m very glad that you are speaking slow and clear: this helps me a lot! 👍🏻
@henrik3098
@henrik3098 Жыл бұрын
thx bruw
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Welcome!
@adrian8729
@adrian8729 3 жыл бұрын
Great video. Saved me years of hair.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 3 жыл бұрын
Lol that's something I can appreciate! Thanks!
@adrian8729
@adrian8729 3 жыл бұрын
@@DaveGrayTeachesCode Hey got a video on promises? That would be my next hurdle.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 3 жыл бұрын
@@adrian8729 yes, I do. It is promises, the fetch api, and using async/await: kzfaq.info/get/bejne/jNOBacd529SveYE.html There is a full JS playlist :)
@9nikolov
@9nikolov 3 ай бұрын
(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.
@tektektuktuk4086
@tektektuktuk4086 Жыл бұрын
I got this error: Failed to load resource: the server responded with a status of 404 (Not Found)
@DevlogBill
@DevlogBill 2 жыл бұрын
(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 ./
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
I'm not sure of the origin, but the wildcard * exists in many areas beyond SQL and JS. For example, it is also the "select all" in CSS.
@immortalaigs4203
@immortalaigs4203 2 жыл бұрын
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?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Several considerations here that I do not know about your code. If the script element is inside the head element of your html file, are you also using the defer attribute? Are you using type="module" because you are importing another javascript file? If so, did you import the file in your javascript? Search MDN for the script element docs and also for import. You'll get it!
@immortalaigs4203
@immortalaigs4203 2 жыл бұрын
@@DaveGrayTeachesCode Thank u dave, i get it!
@tomasmatusek6292
@tomasmatusek6292 11 ай бұрын
I have same problem
@tomytoon123
@tomytoon123 7 ай бұрын
do you have updated tutorial for this? I wonder if this still works this year.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 7 ай бұрын
Try the code. It still works. Look it up on MDN. It is still the same. No reason to wonder. Take action and find out.
@tomytoon123
@tomytoon123 7 ай бұрын
ok thnx
Require vs Import Javascript
22:39
Monsterlessons Academy
Рет қаралды 76 М.
He sees meat everywhere 😄🥩
00:11
AngLova
Рет қаралды 7 МЛН
Wait for the last one! 👀
00:28
Josh Horton
Рет қаралды 104 МЛН
JavaScript Modules Crash Course
48:38
freeCodeCamp.org
Рет қаралды 45 М.
NPM Node Package Manager Modules | NPM Tutorial for Beginners
23:23
JS Code Structure Moving Beyond Beginner
21:31
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 13 М.
Event Listeners in JavaScript | JavaScript Events Tutorial
39:32
ES Modules in NodeJS and the Browser
13:15
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 7 М.
Learn JavaScript ES6 Modules in 6 minutes! 🚢
6:05
Bro Code
Рет қаралды 11 М.
Cadiz smart lock official account unlocks the aesthetics of returning home
0:30
Неразрушаемый смартфон
1:00
Status
Рет қаралды 1,7 МЛН
Samsung S24 Ultra professional shooting kit #shorts
0:12
Photographer Army
Рет қаралды 31 МЛН
Samsung Galaxy 🔥 #shorts  #trending #youtubeshorts  #shortvideo ujjawal4u
0:10
Ujjawal4u. 120k Views . 4 hours ago
Рет қаралды 10 МЛН