Javascript Encapsulation | Best Practices. JavaScript is a strong object-oriented programming language, which is competent in building complex applications on both the client and the server-side. However, the bigger the complexity in the implementation, the more reliable maintainable, and flexible code is required to undertake the situation. Encapsulation, one of the basics of Object-Oriented Programming is the key to obtain such goals.
By definition, JavaScript Encapsulation is a process of securing the data with the functions which act against the data. Encapsulation permits us to manage and validate the data. In JavaScript, variables parallel data.
Encapsulation proposes information hiding i.e. the concept that the internal entities of an object should not be direct bare as public entities. This will assist reduce the unauthorized use of the variables. Preferably, if the callers desire to achieve a specified result it should use the public method or public entities inside the object to access the private variables of the Javascript object.
Example of Javascript Encapsulation
Let’s take an easy problem where a “person” object contains two attributes “name” attribute.
<script type="text/javascript">
var person = {
name : "Muhammad Rauf",
};
alert(person.name); // Muhammad Rauf
person.name = "Muhammad Ali";
document.write(person.name); // Muhammad Ali
</script>Everything seems fine in the above example. We created the object, printed its attribute value, and changed it. But the problem looks to appear when some user seeks to set an integer value to the name attribute.
person.name = "Muhammad Usman"; alert(person.name); // Muhammad Usman
As far as JavaScript is concerned this is quite legal as in JavaScript a variable can take any type supplied to it. In order to improve this, we require to set the range of valid characters that can be set to the attribute name of the object. These Validations can’t work if the caller can obtain and change the value of these data. The simple solution for this would be…
<script type="text/javascript">
var person = {
name : "Muhammad Rauf",
setName : function (value) {
var exp = new RegExp(/\d+/);
if( exp.test(value) ) {
alert("Invalid Name");
}
else {
this.name = value;
}
},
"getName" : function() {
return this.name;
}
};
alert( person.getName() ); // Muhammad Rauf
person.setName( "Muhammad Ali" );
alert( person.getName() ); // Muhammad Ali
person.setName( 42 ); // Invalid Name
alert( person.getName() ); // Muhammad Ali
</script>
The above example utilizes the validation but still has some errors as if the caller access the name immediately, he can still modify it.
person.getName( 42 ); // Invalid Name; Here name won't be changed. person.name = 42; // No validation happens and the name is changed alert( person.getName() ); // 42 is printed.
The end object over here is that the variable name should not be accessed globally with the object “person”. Encapsulation assists it out. This can be done by the ideas Function Scope and Closures.
Closures, Javascript Encapsulation:)
When two or more functions are bundled mutually with references to their enclosing case environment is known as a closure. In easy words, closure provides access to a local variable of a function to be used by another function inside a parent function. Here we have a variable name hiding inside the function setName from the outside world. But the inner object (myObj), can access it:
<script type="text/javascript">
var person = function () {
var name = "Muhammad Rauf";
var eg = new Regeg(/\d+/);
var myObj = {
setName : function (value) {
if( eg.test(value) ) {
alert("invalid name");
}
else {
name = value; // The object has access to "name"
}
},
getName : function () {
return name; // The object has access to "name"
}
}; // End of the Object
};
person.getName(); // doesn't work!
</script>
Function Scope Javascript Encapsulation:)
Any Variable which is composed inside the code block of the functions remains hidden from outside.
<script type="text/javascript">
function myFunction()
{
var person = "Hi!";
alert( person ) // "Hi!";
}
alert( person ) // error; person is not accessible outside the function.
</script>Hence if we drive the variable “name” inside the function “setName” then the callers won’t be able to access it immediately. But this is not simple to directly put the variable “name” inside the function “setName” as the variable inside a function block can not be used outside its scope, hence name would not be available for the “getName” method. For this Closure will help.
Advantages of Encapsulation in JavaScript:)
The main benefit of using encapsulation in JavaScript is to present security to the data. Other benefits of encapsulation include:
- Encapsulation secures an object upon illegal access.
- Encapsulation assists to achieve a level without exposing its complex details.
- This will overcome human errors.
- Make the application extra flexible and manageable.
- Analyzes the application.
Conclusion
Encapsulation is the mechanism in JavaScript that can be used to make the complex process easy and manageable with obtaining the overall application secure and easy to work.