How To: "Private" In JavaScript (ES6) Classes

Sean Franklin

6y12.2k2100Article

2 Comments

Join the conversation! Your thoughts help the community grow.

Steven Cooper5y ago
It's a neat trick but ultimately what's the point? The getCount function is still publicly exposed so why create the count getter in the first place? You can just call the getCount() function. A better use for encapsulation is extracting functionality into private methods to keep your functions small and manageable which is something you can't really accomplish with this. The best I've been able to do is define sub-functions as const variables inside of my public functions but you still end up with a single function definition that's really big and unsightly.
- Sean Franklin3y ago
  I get what you're saying. This trick probably isn't going to be widely useful, but it is interesting that it's possible to achieve private fields in a class. The private field isn't the getCount function, rather we are encapsulating the _count variable. I should've made this more clear in my article. Although getCount() is indeed publicly accessible, the _count variable itself cannot be directly accessed by the consuming code. We're not adding the _count variable to each Counter object itself, but by capturing it in local functions, we're keeping it alive for the duration of each Counter object's lifetime. The only way to publicly interact with _count is by increase(), decrease(), and getCount(). The idea with this Counter example is that it wouldn't be possible to directly assign a value, we need to go through the public functions to modify it. The getter is not necessary, it's just to provide syntax sugar so you can write something like "myCount.count" to get the value. It's not necessary for the encapsulation trick, but makes the API for the Counter class much more natural. Thanks for your comment, apologies it took so long for me to see it

Introduction

While using JavaScript, you might be dearly missing our friend "private" from statically-typed languages like C#, C++, and Java. Using a little finesse, we can actually achieve true encapsulation using local variables in vanilla JavaScript (ES6) classes.

There are many instances where we want to hide an object's properties from public view. In other words, we only want to allow the object's methods to operate on these properties. But how can we do this in a dynamically-typed language like JavaScript?

To do this, we can utilize block scoping using const or let within the class constructor, and provide public methods that can return or operate on these encapsulated variables.

Example - The Counter Component

For this example, let's say we're making a Counter component. This will be a reusable component that encapsulates a count and allows the user to increase or decrease the counter linearly. The user should be able to look at the count variable, but they shouldn't be able to reach in and change it by hand.

Without Encapsulation

Our first attempt could look something like this,

class Counter {
constructor(startAt = 0){
this._count = startAt;
}
increase(){
++this._count;
}
decrease(){
--this._count;
}
get count(){
return this._count;
}
}

This will work, but this._count isn't really encapsulated properly. The consumer of this class could easily reach in and change the value.

In order to fix this, we'll have to change this class around a bit.

Encapsulating the Component

First, instead of making _count an object-level property, we'll restrict it to the scope of the constructor, and add an appropriate getter for it. We'll still use the ES6 get syntax for ease-of-use

class Counter {
constructor(startAt = 0){
let _count = startAt;
this.getCount = () => _count;
}
get count(){
return this.getCount();
}
}

This might seem strange at first. If so, take a moment to play around with this and see what it does. the _count variable can not be touched outside the class constructor, effectively making it private.

This is cool, sure. But how do we operate on the value of _count?

We can do the same thing as this.getCount() because everything in the constructor has block-level access to _count, and hence will keep it alive while the object is being used.

class Counter {
constructor(startAt = 0){
let _count = startAt;
this.getCount = () => _count;
this.increase = () => ++_count;
this.decrease = () => --_count;
}
get count(){
return this.getCount();
}
}

Great! Our variable _count is now truly encapsulated. You won't be able to see or access _count from outside the class itself, which is perfect for our needs.

The class can be used exactly like the first version of our component, without making any changes to the consuming code.

const counter = new Counter();
counter.increase();
console.log(counter.count);

Conclusion

This strategy for achieving encapsulation in JavaScript objects may add slightly more boilerplate to the class definition itself, but what it gives you in return may be worth it.

Hopefully this information proves useful to you!

Stay safe everyone.