2.6 export import reactions

Another functionality offered by javascript new generation concerns modular code writing so that the Javascript code is divided into several files. And of course, we can already split our code over several files. We just need to import them into the right order in our HTML files. And the idea behind the export declarations and import and so-called modules is that in one javascript file, we can import the content of another file so that the javascript files themselves know their addictions.

It could look like this. We have a file, person. js and there we have this constant person who is stored as a javascript object and then that’s the interesting part. We export that keyword default. This is a special keyword indicating that it is the export by default of this file. We can then import it elsewhere and import instruction will appear in a second. We can also have a number of files to which we export several elements, here a constant named clean which contains a function at the end and baseData which contains a number in a third file. We may need to import from person. js and utility. js so app. js neccssite import instructions. And here are some syntaxes import different that you will see in this course. the person. As you do see js uses the default keyword. The default keyword simply means that if we import something from this file, it will always be our export by default. Therefore, in this case, the person is constant in the importation of persons.

js we can name anyone what we want, that’s why I printed it twice here, hardly anyone matters. He always refers to the thing you marked as a default with the keyword by default. For utility. js it’s a little different. We import here from two different constants and therefore, the syntax import uses braces to explicitly target specific elements of this file. These are called named exports because we import content by its name. We import the clean constant by its name and baseData by its name because we have nothing marked as default value. So, for javascript to know exactly what we are indicating, we need it give the exact name and name goes between hugs. By the way, you can also write this under the form of an import instruction with baseData comma clean or vice versa. So it’s imports and exports. You write all this in your javascript files and you will use it a lot throughout this course. Now, as with all these javascript features of the next generation, it will not work the same way in all navigators.

Even the most modern browsers do not take not support all the features we will use in this project. By consequent, in the next course module, I will also show you how to configure quickly a project that finally compiles all the javascript features of the next generation in javascript features of the generation current, so that we, developers, can use the javascript of the next generation without us. Shipping code that is going nowhere. Let us go back to imports and exports. This is the syntax we use and you will see that it gets used to a lot in this courses. You can also see some variations because we can also write this differently when we have an export default. You have already seen that this person is a name that you can choose for yourself. It doesn’t matter here if you Use almost anyone. If you have a named export, you must use the exact name defined in the file with keyword export.

You can import everything with * this special character, then assign an alias and a package. In this case, it would be a javascript object that exposes all the constants and everything that you export to the other file as properties so that you have simply grouped. baseData, supplied. own to access the export of things. It is up to you to decide and you will see me using these things throughout the course. The most common use search is the first. Import braces something hugging .