por JavaScript is a programming language with a very broad syntax. Knowing how this syntax works is essential for the development of any web project. In this post, we will teach you how keywords work import and export in JavaScript.
How does import and export work in JavaScript?
When we talk about import and export In JavaScript we refer to two keywords to communicate modules in our projects. There are different ways to use keywords import and export in JavaScript. That is to say, We can execute different types of import and export in our projects.
When exporting an element, we can use the keyword export in two ways.
export default
When we insert export default Before our code, we are exporting a single object. That is, all the content will be exported as a single block.
Sentence export default It has an expression behind it, which in the end is something that JavaScript can interpret. So, By using this statement we are exporting an entire object. This is the case of the model segment that we described in our post on identifying the model view controller pattern.
Below, we give you an example of an object exported in this way:
export default {
getTweets ( ) {
},
},
As you can see, inside this object has a method getTweets. However, due to the behavior of the export default, also We could add other functions to this object and they would still all be exported.
export default {
getTweets ( ) { },
createTweets ( ) { },
deleteTweets ( ) { },
};
Because we are exporting the entire object, we can then use its different functions by accessing them as properties of the object. That is, first we import the object with the name we want:
import TweetService from ‘fileName’;
Then, if we wanted to specifically use the function getTweets We could access it in the following way.
TweetService.getTweets ( );
export
The same module You can also export multiple sections of code at different points. Suppose we create a new JavaScript file that has two functions: a function to and a function b. So we could use the keyword export to export each one:
export function a ( ) { }
export function b ( ) { }
Then, at import time, we could call both exports from a single line of code, since they both belong to the same file. So, we would use the keyword import in the following way:
import {a, b} from ‘fileName.js’;
As you can notice, this type of import and export in JavaScript it leads us to do an operation destroying. This means defining variables based on the properties of an object.
In this sense, when we use the word export in each of our functions, finally what we are doing is exporting an object with two properties (in our case to and b). Thus, when we execute the destroying we are defining a variable to which calls the function to of the file we created. By this reference, we could run the function directly without having to import it individually:
to ( )
In this way, we can use the keywords import and export in JavaScript to communicate named parts. We have done the same thing in our post about executing the model view controller pattern, where we have exported a controller function as follows.
Then, through an operation destroying, We have defined a variable by the same name that refers to the exported function:
import {tweetListController from «./TweetListController.js»;
This reference is what then makes it possible to use the function directly:
tweetListController ( );
Keep in mind that the way you interact with an imported item will change depending on the item. That is, if we have a constant in our example with the functions to and b, We will interact with it differently. Suppose then that we have the following constant:
export const c = 5;
Then, we import it along with the other functions in this file:
import {a, b, c}
So, we will not be able to interact with c In the same way as with functions, Well, it is a constant and not a function. That is, we will not be able to insert c ( ) no matter how much we have imported it. What we could do with this constant would be to run a console.log to paint its value on the screen.
Do you want to continue learning?
Now that you know exactly what keywords are and how they work import and export in JavaScript, Surely you want to continue learning about this powerful programming language. For this reason, we recommend our Full Stack Web Development Bootcamp, an intensive training space in which you will learn in depth about languages such as JavaScript, HTML, CSS and JSX. Do you want to continue learning with us? Don’t miss it and ask for information to discover how to stand out in the IT sector!