If you want to work with JavaScript in an object-oriented way, it is common practice to put different classes in different files. Or you put functions and classes that belongs to a certain context into an extra file.
The easiest way to work with JavaScript in different files is, to reference all files in the HTML document. You can add as many <script> tags as you like. As with everything in programming, the order is important.
This will execute all JavaScript files in the order you have added them. You can think of copying the content of all files into a single, large file and execute it.
Here is an example importing multiple JavaScript files in html:
1
2
<script src="p5.min.js"></script>
<script src="lunarlander.js"></script>
And you can add more than just two files of course. Besides this, there is another, more modern solution.
Modules
Modules are a mordern and more structured way to work with different files in JavaScript.
Every module in JavaScript has its own context when initialized. Your JavaScript file runs isolated from other files. That means, the variable and function names in one module cannot interfere with the names in another module. But that also means, they are not automatically available in the global scope.
If you want to use a module, you have to import it. But before you can import a module, you first have to define what the module that you want to import exports. That means, what should be accessible from the outside when imported?
Let’s have a look at the different ways of exporting functions, variables and classes of a module.
1. Export inline
This is very simple, you just add the export keyword before a variable name, a function name or a class.
Here is an example with a variable:
1
export const numberOfDucks = 42;
Here is an example with a class:
1
2
3
4
5
export class Person {
constructor(name) {
this.name = name;
}
}
And here is an example with a variable and a function:
1
2
3
4
export const teacher = "Garrit";
export function greeting(name) {
console.log("Hello " + name);
}
As you see, you can export as many things as you need.
2. Export everything at the end
Another way is to export everything at the end. You write the export keyword, followed by the opening curly brace { and the variable names, function names, and class names that you want to export (separated by comma), followed by a closing curly brace }.
1
2
3
const numberOfDucks = 42;
export { numberOfDucks };
Of course it works also with multiple items:
1
2
3
4
5
6
7
8
const numberOfDucks = 42;
class Person {
constructor(name) {
this.name = name;
}
}
export { numberOfDucks, Person };
3. Export default
This implies that you only have one default export in a file. Thas is very useful if you are working with classes. Create a single file per class and export it as default.
1
2
3
4
5
export default class Person {
constructor(name) {
this.name = name;
}
}
Besides this default export, you can define other variables, functions, and classes as non-default exports.
This is the way of exporting we will use for the examples. Exporting a single class per file.
Export alias
If you want to change the name of a variable, a function, or a class for the export, you can use the as keyword.
1
2
3
4
5
6
7
8
const numberOfDucks = 42;
class Person {
constructor(name) {
this.name = name;
}
}
export { numberOfDucks as duckNumber, Person };
Import a module
After exporting variables, functions, and classes, we need to import them in the file where we want to use them. And depending on your way of exporting, there are different ways of importing.
1. Import from named exports (Export 1. and 2.)
To import from a named export, you use the import keyword at the beginning of your file, followed by curly braces {}. Inside the curly braces you enter the names of what you want to import, separated by comma. After that part, you use the keyword from followed by the relative path to the file you want to import in quotation marks.
1
import { numberOfDucks, Person } from "./path/ducktales.js";
After the import you can use the variables, functions and classes in your code as you are used to.
2. Importing everything (Export 1. and 2.)
If you want to import everything, but you don’t want to write out every name, you can use the wildcard import *.
1
import * as Elements from "elements.js";
If you want to use an import with this method, you can use the dot syntax to access its members.
1
2
3
import * as Elements from "elements.js";
console.log(Elements.numberOfDucks);
3. Import from a default export (Export 3.)
If you have used the default export, you don’t need the curly braces. Otherwise the export looks the same:
1
import Person from "./path/person.js";
This is the way of importing we will use for our examples.
Import alias
You can change the name during the import using the as keyword.
1
import Person as User from "./path/person.js";
Using modules in HTML
To use modules in your website, you will have to add something to your script tags.
1
<script type="module" src="sketch.js"></script>
You don’t need to write a script tag for every file that you want to use, instead you need to create one for your main file that has the import statements in it.
Modules are only working when you run your site on a webserver, for example published on GitHub Pages or with the Live Server extension in Visual Studio Code. It will not work when you open the HTML page directly in the browser