Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Implement Private properties using closures in JavaScript
In JavaScript, closures provide a powerful way to create private properties that cannot be accessed directly from outside a function. This technique encapsulates data and prevents external code from modifying internal variables.
What are Private Properties?
Private properties are variables that can only be accessed and modified through specific methods, not directly from outside the containing scope. Closures enable this by keeping variables alive in memory even after the outer function has finished executing.
How Closures Create Privacy
When an inner function references variables from its outer function, it forms a closure. The outer function's variables remain accessible to the inner function but hidden from external code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Private Properties with Closures</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
margin: 10px 0;
}
button {
padding: 10px 15px;
margin: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Private Properties using Closures</h1>
<div class="result">Counter: <span id="counter">0</span></div>
<button id="increment">Increment</button>
<button id="decrement">Decrement</button>
<button id="reset">Reset</button>
<script>
// Create a counter with private variable using closure
function createCounter() {
let count = 0; // Private variable - cannot be accessed directly
return {
increment: function() {
count++;
return count;
},
decrement: function() {
count--;
return count;
},
reset: function() {
count = 0;
return count;
},
getValue: function() {
return count;
}
};
}
// Create counter instance
const counter = createCounter();
const counterDisplay = document.getElementById('counter');
// Event listeners
document.getElementById('increment').addEventListener('click', () => {
counterDisplay.textContent = counter.increment();
});
document.getElementById('decrement').addEventListener('click', () => {
counterDisplay.textContent = counter.decrement();
});
document.getElementById('reset').addEventListener('click', () => {
counterDisplay.textContent = counter.reset();
});
// Demonstrate privacy - this will be undefined
console.log('Trying to access count directly:', counter.count);
</script>
</body>
</html>
Simple Example
Here's a basic example showing how closures create private variables:
function createPrivateVariable() {
let privateVar = 0; // This is private
return function() {
privateVar++;
return privateVar;
};
}
const increment = createPrivateVariable();
console.log(increment()); // 1
console.log(increment()); // 2
console.log(increment()); // 3
// Cannot access privateVar directly
console.log(typeof privateVar); // undefined
1 2 3 undefined
Creating Objects with Private Properties
function Person(name, age) {
// Private variables
let _name = name;
let _age = age;
// Return public interface
return {
getName: function() {
return _name;
},
setName: function(newName) {
if (typeof newName === 'string' && newName.length > 0) {
_name = newName;
}
},
getAge: function() {
return _age;
},
setAge: function(newAge) {
if (newAge > 0 && newAge
John
25
30
undefined
undefined
Benefits of Using Closures for Privacy
| Benefit | Description |
|---|---|
| Data Protection | Variables cannot be modified directly from outside |
| Controlled Access | Access only through designated methods |
| Data Validation | Can validate data before setting values |
| Clean Interface | Exposes only necessary methods and properties |
Conclusion
Closures provide an elegant way to implement private properties in JavaScript by encapsulating data within function scope. This pattern ensures data integrity and creates cleaner, more maintainable code by controlling how internal state can be accessed and modified.
189 Views
