How to Access Variables from Another File using JavaScript?

Last Updated : 09 Sep, 2024

Accessing variables from another file in JavaScript involves exporting the variables from one file and importing them into another. In ES6 modules, use export to share variables and import to access them. In CommonJS (Node.js), use module.exports and require() for the same purpose.

Below are the approaches for both server and client side:

Table of Content

Client-side program
Server-side scripting

Client-side program

First, create module1.js with a Student object containing properties like name, age, dept, and score. Import this file in the HTML <head> using the src attribute of the <script> tag. A button triggers a function that accesses and displays these properties in a <p> tag.

Example: In this example, we displays student details when a button is clicked. The JavaScript function f() retrieves data from a Student object and updates the content of a <p> element.

HTML

<!-- variable_access.html -->
<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="module1.js">
    </script>
</head>

<body>
    <button onclick="f()">
        Click Me To Get Student Details
    </button>

    <div>
        <p id="text" style="color:purple; 
            font-weight:bold;font-size:20px;">
        </p>
    </div>

    <script type="text/javascript">
        function f() {
            let name = Student.name;
            let age = Student.age;
            let dept = Student.dept;
            let score = Student.score;

            let str = "Name:" + name + "\nAge: "
                + age + "\nDepartment:" + dept
                + "\nScore: " + score;

            document.getElementById(
                'text').innerHTML = str;
        }
    </script>
</body>

</html>

module1.js This file is used in the above HTML code.

JavaScript

//module1.js 
let Student =
{
	name: "ABC",
	age: 18,
	dept: "CSE",
	score: 90
};

Output:

Server-side scripting

In this approach, module1.js defines and exports a Student object. module2.js imports it, defines Hostel and Hostel_Allocation objects, and accesses the Student object. An HTTP server on port 8080 displays concatenated Hostel_Allocation properties on the web application's landing page.

Example: In this example, we are following the above approach.

module1.js

JavaScript

//module1.js
let Student = {
    name : "ABC",
    age : 18,
    dept : "CSE",
    score : 90
};
module.exports = {Student};

module2.js

JavaScript

// module2.js
let http = require('http');
const { Student } = require('./module1.js');

let Hostel = {
    student_count: 500,
    no_of_rooms: 250,
    hostel_fees: 12000
}

let Hostel_Allocation = {
    room_no: 151,
    student_name: Student.name,
    student_age: Student.age,
    student_dept: Student.dept,
    total_fees: 12000
}

let str = "Room No: " + Hostel_Allocation.room_no
    + "\nStudent Name: "
    + Hostel_Allocation.student_name
    + "\nTotal Fees: "
    + Hostel_Allocation.total_fees;

http.createServer(function (req, res) {
    res.write(str);
    res.end();
}).listen(8080);

Output:

Start the server

node module2.js

Run the application in the browser

localhost:8080

Output:

Room No: 151
Student Name : ABC
Total Fees : 12000

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.