. Advertisement .
..3..
. Advertisement .
..4..
Are you having difficulties with the problem Import Functions from another file using JavaScript? If yes, don’t miss this article. We will give you some solutions to fix it. Read on it.
What can we do to import functions from another file using JavaScript?
Method 1: Utilizing ECMAScript6 (ES6)
The simplest way to import functions from another file using JavaScript is utilizing ECMAScript6 (ES6). By using this, you can import variables and classes. Look at the following example of HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script type="module" src="./second.js"></script>
</head>
<body>
<button id="btn" onclick="circleArea()">Show Circle Area</button>
</body>
</html>
An instance code:
import {calcArea} from './first.js';
document.getElementById('btn').addEventListener("click", function circleArea() {
var inputField = document.createElement("INPUT");
inputField.setAttribute("type", "text");
inputField.setAttribute("value", (calcArea()).toFixed(2));
document.body.appendChild(inputField);
});
You must run your application on a server, or you can use Node.js to use import feature since it does not function on the local machine. You can run your code for learning purposes using Open with Live Server and the live server extension in Visual Studio Code.
Method 2: Utilizing import feature
To utilize the import feature, the runtime must interpret the file as a module in a source file. To do this, type=”module” must be added to the <script> tag in HTML. Modules are explained automatically in strict mode.
Here is the syntax of import:
import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { default as alias } from "module-name";
import { export1, export2 } from "module-name";
import { export1, export2 as alias2, /* … */ } from "module-name";
import { "string name" as alias } from "module-name";
import defaultExport, { export1, /* … */ } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
defaultExport: This is the name that refers to the default export from the module. It must be a valid JavaScript identifier.
module-name: This is the module to import from. The overview of the specifier is defined by the host. This can be a relative or absolute URL to the .js file including the module.
name: This is module object’s name. It must be a valid JavaScript identifier.
exportN: This is the name of the exports that need to be imported. The name can be either a string literal or an identifier, depending on what module-name declares to export.
aliasN: This is the name that refers to the named imports, it must be a valid JavaScript identifier.
Conclusion
We have given you two methods to import functions from another file using JavaScript. We hope they are helpful for you. If you have any questions, please leave your comment below. ITtutoria is willing to help you. Thank you for your reading!
Read more
→ How To Check If An Array Doesn’t Contain Values In JavaScript
Leave a comment