Global and Private Functions in JavaScript
- Implement Global and Private Functions in JavaScript
-
Implement
GlobalandPrivateFunctions in JavaScript Classes
The functions that can be called globally are known as global functions, while we can’t invoke the private functions directly outside the class/module.
Throughout this article, we’ll use three files: index.html, fileOne.js, and fileTwo.js.
The startup code for the index.html is given below because it will remain the same throughout this article.
index.html:
htmlCopy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./fileOne.js"></script>
<script src="./fileTwo.js"></script>
<title>Document</title>
</head>
<body>
<button id="greet" onclick="greetings()">Display Greetings</button>
<p id="displayGreet"></p>
</body>
</html>
Implement Global and Private Functions in JavaScript
If we write a function directly in a JavaScript file, it would be restricted to the window object, global. It means the function will also be global.
fileOne.js:
javascriptCopyfunction displayName() {
let firstName = 'Mehvish';
let lastName = 'Ashiq';
return firstName + ' ' + lastName;
}
fileTwo.js:
javascriptCopyfunction greetings() {
document.getElementById('displayGreet').innerHTML = 'Hi! ' + displayName();
}
The greetings() function would be called as soon as we click on the Display Greetings button, and it calls the displayName() directly, which is defined in the fileOne.js file because it is a global function.
It gets the value returned by the displayName() and change the innerHTML of an element whose id is displayGreet.
Think of private functions and make the displayName() function private. To do that, we can create an object that will contain this function as follows.
fileOne.js:
javascriptCopymyfunctions = {
displayName: function displayName() {
let firstName = 'Mehvish';
let lastName = 'Ashiq';
return firstName + ' ' + lastName;
}
// you can add more functions here
}
Now, the question is how to call it in fileTwo.js because displayName() is a private function now? We can invoke it as myfunctions.displayName().
fileTwo.js:
javascriptCopyfunction greetings() {
document.getElementById('displayGreet').innerHTML =
'Hi! ' + myfunctions.displayName();
}
Implement Global and Private Functions in JavaScript Classes
Suppose we have a class named oneClass in fileOne.js. How can we make displayName() private and global now?
fileOne.js:
javascriptCopyclass oneClass {
constructor() {}
displayName = function displayName() {
let firstName = 'Mehvish';
let lastName = 'Ashiq';
return firstName + ' ' + lastName;
}
// you can write more functions
}
fileTwo.js:
javascriptCopyfunction greetings() {
const one = new oneClass();
document.getElementById('displayGreet').innerHTML =
'Hi! ' + one.displayName();
}
Here, we create an instance of class oneClass and save its reference in one.
We can call displayName() directly via using one instance class object because the displayName() is a public function also known as global function.
fileOne.js:
javascriptCopyclass oneClass {
constructor() {}
#displayName = function displayName() {
let firstName = 'Mehvish';
let lastName = 'Ashiq';
return firstName + ' ' + lastName;
} getDisplayName() {
return this.#displayName();
}
// you can write more functions
}
fileTwo.js:
javascriptCopyfunction greetings() {
const one = new oneClass();
document.getElementById('displayGreet').innerHTML =
'Hi! ' + one.getDisplayName();
}
Here, we use the # symbol to denote that this particular function is private, and we know we can’t access it directly.
We will write another function getDisplayName() inside the class that can access #displayName.
In this way, we get the value of #displayName via getDisplayName() in fileTwo.js. You can find more here in detail.
