10. Importing Your Own Files

In the last video you learned how to use the require function to load in a node module.

In this video you’re going to learn how to use their require a function to load in another file you’ve created.

So right now the only file that’s ever going to execute is apt.

J S because that’s what we pass to the node command.

That means we’re gonna have to put everything in this file if we want it to run.

And that’s not ideal as our applications get larger and more complex.

We’re gonna have way more code than we would want to have in a single file when all of our code sits in one file and makes the project really hard to expand on and maintain.

So from the start we’re gonna go ahead and create projects that use multiple files so we can stay organized.

We can do something like define a function in one file then require it into a different file and use it.

And that’s exactly what we’re going to end up doing in this lesson to kick things off.

We’re gonna completely empty app dot J S I’m going to delete everything we have inside of here and we’re gonna start with a very simple bare bones example to illustrate how all of this works and then we’ll create something more complex using the best module once again for the moment.

Let’s go ahead and define our name as a variable so constant name equals then as a string your first name.

Next up we’re gonna go ahead and print it.

Nothing groundbreaking here.

Console dot log providing the one and only argument a reference to the name variable.

Now if we run this program we know exactly what’s going to happen down below.

I’ll rerun the script and what do I get.

As expected I get my message Andrew printing to the console.

Now let’s add a second file into the mix and try to define this variable in that second file over inside of the notes app directory.

We have to add a new file into our project and it’s important that you make sure you actually put it in Notes app and it doesn’t end up in the root which is the node course directory.

So right here I’ll right click on the notes app folder.

I’ll add a new file and we’ll call this something generic like you tills dot J S and let’s just say this is a file which contains a few useful utilities for the rest of the application.

Now all we’re gonna do inside of here for the moment is use console dialog to print a little message and we’re going to print the file name utilize dot J S so we can figure out exactly when this file runs.

Now if we were to go ahead and run Epcot and J S we would not see that log statement down below we can prove that I’ll rerun the script.

I only get my Andrew message.

I do not get the message over here.

So when we pass a file to node only that file executes if we want another file to run we have to require it for that file to actually get loaded in.

We can do just that up above.

I’m going to add a line at the very top of the file and here we’re gonna use require.

I’m gonna call the require function exactly like we did in the last video when we were loading in the F S module and we’re still going to pass in a single argument a string.

Now when we’re loading in a file that we created in our application we start with DOT forward slash we have to provide a relative path from the file where loading it in from.

In this case app dot J S to the file we’re actually trying to load in this case utilize dot J S so from app J S it is dot forward slash which gets us to the folder for this file.

That would be notes hyphen app.

From there we can just go right to the utilize dot J S file which is located in the same directory.

Now when you’re loading in a javascript file like this it is indeed going to execute that file.

I’m going to save app dot J S and we’re going to rerun the program down below.

I’ll rerun our app script and what do I get I get you tills dot J S printing first because require happens up here and that’s when you tills runs then down below.

I get Andrew because that’s a bit further down the file but the good news is that I am indeed getting

both messages one from app J S and one from you tells dot J S so there we go.

We now have an application albeit a simple one that takes advantage of multiple files from here.

Let’s go ahead and start to define some variables in that other file that we use an app dot J S so as

we create complex applications we’ll have all sorts of functions will define in other files and will

want to use them in our applications main file which in this case is app dot J S so let’s see what that

looks like.

To do this all I’m gonna do is remove the name variable from app dot J S so right now that program would

fail because we’re trying to reference this variable that doesn’t exist over and utilize dot J S we’re

gonna recreate it.

So right here a new const name equals we’re gonna pick a value for this.

I’ll switch things up just to see the different output down below and I’ll stick with Mike as my string

for name.

Now we’re gonna save both files and see what happens.

So we load in utilize dot J S which defines that variable.

Then we reference the variable down below down below in the terminal.

I’ll use clear to clear the terminal output and I’ll use the up arrow key twice to cycle past the clear

command to the node app dot J.

S command we’re gonna run it and it’s gonna fail when I do.

What do we get.

Name is not defined.

So this is one very important aspect of the node module system.

All of your files which you can refer to as modules have their own scope.

So apt.

J.S. has it’s own scope with its own variables and utilize dot J as has its own scope with its own variables

app.

J.S. can not access the variables from utilize dot J S even though it was loaded in the require.

So if I can’t access name right now how exactly do I get that done.

The answer is that we need to explicitly export all of this stuff.

This file should share with the outside world to do this.

We take advantage of another aspect of the module system which down below is module Don exports.

This is where we can define all of the things.

This file should share with other files now in our case it’s going to be one thing a string later on

though it’s going to be an object with a bunch of different methods on it allowing us to export a whole

bunch of things.

Whatever we assign right here is what gets exported.

So we’re going to do is export whatever the value is for name which we know is the string Mike.

So at this point you tells dot J.S. is doing its job well it defined a variable and it exported that

variable.

Other files can now take advantage of it whatever you assign it to module dot exports.

That is available as the return value from when you require the file.

So I require you tills dot J.S. Right here which means the return value is what I assigned the string.

Mike which is stored on this name variable.

So over here in A.J. s I’m going to create a constant I’m going to pick a name for our new variable

names seems appropriate enough.

And now our program is back to a working state.

Let’s go ahead and save act J.

S and test that out with all of our files saved down below.

I’m gonna use clear to clear the terminal output and I’m gonna use the up arrow key twice to rerun the

script.

And what do I get.

I get my utility dot J.S. message which was expected but I’m also getting Mike which is fantastic.

It’s getting printed in this file but it’s getting defined over here.

We were able to use module dot exports to export it and we were able to load it in over here with required.

Now once again just because I picked the name name over here doesn’t mean I have to use that over here.

They are completely independent.

I could call this something like first name a completely different variable name and that would work

just fine as long as I change the references down below to right here I’ll change those references.

I’ll rerun the program.

And what do I get.

I get these same results.

The app is still working.

So whatever we assign to module exports is what other files can get access to.

Now let’s go ahead and look at a slightly more real world example where we export a function of the

function that we’re going to create we’ll be defined in utilize dot J S it’ll be exported from that

file.

It’ll be loaded into this one and called down below in you tells dot J.

Yes let’s go ahead and define it right here below our name variable which we can leave in place.

We’re going to create a new function and I’m going to call this one something like add we’re just going

to make a simple function that adds up to numbers right here.

We will indeed define a function I’m gonna set up two arguments.

We can call them X and Y or a and b any two names would work and all we’re going to do is return the

sum a plus b.

So a very simple function.

The point isn’t to make interesting functions just yet.

The point is to figure out how to share functions across files.

Now down below we can export it.

So currently we’re exporting name we’re no longer going to do that.

Instead we’re going to set module dot exports equal to right here.

The add function.

Now what do we know.

We know that what comes back from require is now this function which means that over here the name first

name doesn’t make much sense anymore and neither does how we’re using it.

We need to call it since it’s a function.

So right here I’m going to call that ad which is indeed appropriate though remember it could be called

anything as long as we’re consistent in this file down below we can now go ahead and use it.

I’m going to create a variable sum I’m going to get its value by calling add I’ll pass in four and minus

two.

The sum should be two and I’ll print the sum to the screen.

So right here some.

Perfect.

Let’s go ahead and save all files and see if this works down below.

I’m going to rerun the script and what do I get I get my you tills not J.S. method followed by the number

two.

So in this case we exported a function from one file.

We then loaded it in with require in a separate file and we were able to use it which is a fantastic

step in the right direction.

Now it’s challenge time and it’s going to be up to you to create a new function in a new file and to

use it in aspect J S for the moment we can go ahead and completely empty this file.

Or you could choose to leave it around as a reference for the future challenge if you want to do that

you can just comment out each of the lines there’s a handy keyboard shortcut it is a command forward

slash on Mac and control forward slash on other operating systems I could highlight all of the lines

here use that keyboard shortcut to comment them all out then I could just move them down below leaving

them in place as a reference to remember how things work now I’m going to paste in the challenge comments

and we’ll talk about what I’d like you to do.

So big picture goal you want to define and use a function in a new file.

So step one you’re going to create a new file called Notes dot J X and this is a real file we’re actually

going to use as part of the notes application from there you’re going to create a get notes function

which is also going to be a real function we’ll be building out throughout this course.

Now for the moment it’s not going to do anything fancy it doesn’t need any arguments and it’s not going

to run any calculations all it’s going to do is return a static string like your notes dot dot dot the

notes will eventually come later step 3 you want to export the new function from the new file step for

from app dot J S you want to make sure you can load in that new function call it and print the message

to the console.

So in the end of the day act J S should be requiring the new notes file it should be calling that function

to get the message and it should be using console dot log to print that message to the console when

you’re done you should run the program and the message should print down below.

Once again as these challenges get more complex it’s okay if something’s not quite clear or you’re not

quite sure how to do something you can always go back to the video in the beginning and figure out exactly

what happened.

That’s not cheating.

That’s called being resourceful actually memorizing things will come with time.

All right let’s kick things off take a moment to pause the video when you’re done come back and click

play

how’d that go.

Hopefully that wasn’t too much trouble.

We’re going to go ahead and kick things off right now.

By creating that new file.

Step one create a new file called Notes dot J S I’m gonna put that right in the notes app folder notes

dot J.

S and we need to define a new function that returns the string your notes.

The function should be called to get notes.

Let’s get that done.

Const get notes equals a brand new function and all that function is going to do is return the string

your notes.

Dot dot dot.

Later on it’ll do much much more.

Now step three is to make sure that this function actually gets exported.

So export b get notes function right now it’s defined but it’s not exported.

So no other file could take advantage of it right here.

We’re gonna fix that.

I’m going to use module dot exports which we used in utilize dot J S I’m going to set it equal to the

thing I want to export.

In this case it is the get notes function now.

No it’s not.

J Yes is all done.

Everything else is going to happen in app dot J.

S We have to load in the file.

Call the function and print the message.

Let’s do that right here.

I’m going to create a variable const I’m going to call this get notes and then going to use require

to load that file in right here inside of require we pass in that string.

And remember when we’re loading in another file we’ve created we have to provide a relative path from

the file we’re calling require in the file.

We’re trying to load so dot forward slash notes dot J S and now we can actually use the get notes function.

So right here const message equals I’ll be calling get notes.

I don’t have to pass in any arguments since it doesn’t take any then console dot log to print the message

to the console.

Perfect.

Let’s go ahead and see if this works down below.

I’m gonna go ahead and rerun the script and what do I get.

I get your notes.

Dot dot dot printing which is fantastic.

Now that we have this in place we’re making good progress in the right direction and we can go ahead

and remove all of the commented out code in this file leaving just those three lines in place.

We’re also going to remove the utilize dot J S file that was created for demonstration purposes.

The file that you created notes dot J.S. that’s actually going to stay around and play a critical role

in the notes application.

So now we know how to load in court node modules we know how to load and other files we’ve created.

The last thing we need to learn about is how to load in NPM modules so we can take advantage of them

in our applications.

Something we’ll be doing extensively throughout the class.

We’re going to talk about that in the next video.

I’m excited to get to it.

So let’s go ahead and jump right in.