Modules Overview

[00:00:00]
>> If you don't know what a module is, the best way I can think about a module is if you've ever seen something like this. I'm gonna go super old school with this. Have you ever seen something like, You have some code here. You have console.log. Look, the AI knows I'm writing an IIFE, that's funny.

[00:00:22]
So right now, this right here is an IIFE or immediately invoked functional expression. What is this actually doing? It's basically taking some code and encapsulating it in its own scope. So nothing outside of these parentheses has access to it, it's isolated. This is kinda like the purpose of a module, is to be able to isolate your code.

[00:00:48]
Back in 2000, I don't know, before frameworks were a thing, which the first one was Backbone.js. Or even during Backbone.js, people would write code like this. They would write IIFEs, which would basically protect their code from the global space. So you couldn't have some other script that you installed with Bower.

[00:01:08]
You probably don't even know what Bower is, or some other script tag that would interfere with your code cuz it was in global. So that's basically what a module is, it's like a Lego block. It's like, I'm gonna take my code. I'm gonna make it a reusable block and it can't be disturbed by any other Lego block.

[00:01:27]
I could have it interact with other Lego blocks, but only what I choose to and how I choose to. But by default it's encapsulated, its scope and everything. So that's what a module is. Pretty much every program language has modules these days. And yeah, there's three different types of modules in Node.js.

[00:01:43]
We have internal modules like http, which we'll see today, something like file system, different things like that. And then there's also user-created modules, which are just modules that we create ourselves. Which are just pieces of code that we turn into Lego blocks and we can share with the other modules that we create.

[00:02:02]
We can also share it with the community. We can publish these modules as packages. And people can download them and use them as well, so different types of modules. And then the last one will probably just be third-party modules. So these are user-created modules that were not created by you.

[00:02:18]
Someone else created them and you downloaded them. And these are all different types of modules that we can use. So let's just go through some of the examples of how to import and export some of these things, so it'll kinda make sense. First thing first is, the reason I needed you to install version 18 of Node is because we're gonna use the ES6 version of modules, and not the CommonJS version of modules.

[00:02:44]
So CommonJS uses something called require. You might have seen that before. You might have seen somebody at the top of a file do something like, = require 'lodash' or something like that. This is CommonJS. This is how you can require a module called this name. We're not gonna do that.

[00:03:03]
We're gonna use import statements. Which is something you probably have done in React or some other front end technologies. By default, we don't get that, so we have to enable it. So if you go to your package.json, you make a new field called type, and you set it to module.

[00:03:18]
We now can do imports and exports in the ES6 way. Which does change the behavior of some things, but it doesn't really get in the way too much. Okay, so now that we have that, let's just play around with some stuff here. So all the code I'm about to write, right now, is just scratch code.

[00:03:38]
It's not actually moving towards our goal of writing a note taking app. We just want to illustrate some things. So you can follow along if you want, but you can also just observe. So let's say I want to make another file here. I'm just gonna call it utils.

[00:03:57]
Let's say I have a function here called count, and it just takes a number. And it takes a number, and it just returns that number. It literally does nothing, okay? But I wanna use this function in the index file. So how do I get it there? In HTML, and JavaScript, and CSS, and the browser, before bundlers came along, you would just add the script tag.

[00:04:25]
You would add the index script tag after the utils script tag, so it has access to it in the global space. And that's how you would do that. It's very sloppy. Bundlers came along and they're like, no, you have modules. You can import them, you can export them.

[00:04:37]
It works the same way, right? So if I want to be able to use this, I just need to export it. So in ES6, I can just put an export in front of it. And now it's a named export. A named export just means that when I import it, I have to use the name in which it was exported on.

[00:04:51]
That's all that means. So if I wanna go in here and use it, I have to say import. And then because it's named, I gotta use the brackets, and then the path to that file. Which, in this case, will be utils. And typically, you don't have to do the .js extension if you use require.

[00:05:10]
Or even if you do imports and stuff in the browser with React, you don't have to use a .js extension. But with Node.js 18 and type module, you do have to do the .js extension. You have to be explicit that this is a JavaScript file. So this is somewhat new because for the last ten years, we've never had to do a .js extension.

[00:05:28]
In fact, you probably wouldn't or shouldn't have, but now you have to. If you don't, you'll get an error. It'll say this file doesn't exist. And this makes sense, because we're in this world where everything is a module now. You can import an image, you can import a CSS file.

[00:05:42]
So how does it know which one you want if they have the same name? So extensions start to make sense now when everything's a module. So now we import that and then I can just give it the name, which is count. And now I have access to count inside of this file.

[00:05:57]
So that was a two-step process. I had to export it, and then I had to import it. There's other ways to import and export as well. So for instance, I could do the named export here, but I can also do a default export. I can say export default, this object.

[00:06:19]
Right, and this is a default export, which means I can import it with whatever name I want. It'll have these brackets to import it. So if I want to import that I could just, actually, I can do this in the same line. And I can call it data if I want, and that will represent the default export.

[00:06:37]
I could just do that. I could also do it on another line if I wanted to, and call it whatever. And that will also work. Because it was a default export, the name that I put here does not matter.
>> I have a question about that.
>> Yes.

[00:06:53]
>> So with the default export, does it export everything in that file, or just the?
>> It exports whatever you said is default.
>> Okay.
>> Yep, so whatever comes to the right of this.