What are ES6 Modules?

A module is nothing more than a piece of JavaScript code (which has its own file). You can then export this javascript code and import it into another file.

You can do an import in different ways. To import the entire file into another file, you do so in this way: import * from './example/path.js'. Now you can use everything in this file in the file where you invoke the import. Imports are usually placed at the top of a file.

For example, if you only want to import one function from a file, you can do this:

import functionExample from './example/path.js'

If a javascript file only has one function that you want to export, it must be set to "export default" and then it can be requested in an import.

There can also be multiple functions in a javascript file. If you want to export it, you just have to put export in front of it and then you have to define them at the top of this javascript file.

export default {
   functionExample,
   functionExample2
}

Why did I use ES6 modules?

if modules are used, the code is split into different files. In this way the code can be separated in any desired way. A large proportion of front-end developers will use this to keep things organized and make their code easy to maintain. It provides a clear structure in the code and if something needs to be adjusted somewhere, it is easy to process.