Implement private properties in a JavaScript class

Written byPhuoc Nguyen

Created

05 Jan, 2024

In our previous post, we learned how to safeguard an object's properties so they can't be modified or accessed from outside. Object-oriented programming has three types of properties: public, protected, and private. Public properties are accessible from anywhere in the code, whereas protected and private properties can only be accessed within the object or class they belong to.

Protected properties can be accessed by the class and any subclasses that inherit from it, providing flexibility for code reuse and modification. Private properties, however, are only accessible by methods within the same class. This helps prevent interference from external code and maintains data integrity.

Private fields can't be accessed or modified from outside the class they belong to, which makes code more secure and reliable. By restricting access to sensitive data, developers can have more confidence in their code's behavior and avoid potential bugs or security vulnerabilities.

Private fields also make code more readable and maintainable by clarifying which parts of a class are public-facing and which are internal implementation details. In modern JavaScript, private fields are defined using the hash symbol (#) before the field name.

However, in this post, we'll delve into how to create private properties of a class with JavaScript Proxy.

#Naming private properties

As we discussed in the previous post, we'll use the underscore (_) prefix to indicate protection properties.

In the following example, we create a constructor for the `Person` class that takes three parameters: `name`, `age`, and `_ssn`. The `name` and `age` parameters are public properties that can be accessed outside the class, while `_ssn` is a private property that can only be accessed within the class.

class Person {
    constructor(name, age, ssn) {
        this.name = name;
        this.age = age;
        this._ssn = ssn;
    }
}

To make a new `Person`, simply use the `new` keyword followed by the class name and required parameters. Let's say we want to create a person named John Smith who is 42 years old and has an SSN of 123-45-6789. We pass these values as parameters. A new instance of the `Person` class is created with those properties set.

const person = new Person('John Smith', 42, '123-45-6789');

We can access the `_ssn` property directly by using dot notation.

console.log(person._ssn);       // 123-45-6789

#Setting up Proxy traps

When it comes to protecting the private properties of a class, we can use the same approach that we introduced in our previous post, with just a slight modification.

The `get` and `set` traps work the same way, preventing users from accessing or modifying properties whose names start with an underscore. Here's a quick reminder of the code snippet we used earlier:

const handler = {
    get(target, key) {
        if (key.startsWith('_')) {
            throw new Error(`Cannot access private property '${key}'`);
        }

        return target[key];
    },
    set(target, key, value) {
        if (key.startsWith('_')) {
            throw new Error(`Cannot modify private property '${key}'`);
        }

        target[key] = value;
        return true;
    },
};

Now, let's create a `ProtectedPerson` class that acts as a proxy for our original `Person` class.

const ProtectedPerson = new Proxy(Person, handler);

Next, we create a fresh `person` instance using our `ProtectedPerson` constructor. While it may seem like a good idea in theory, in reality, it doesn't work.

const person = new ProtectedPerson('John Smith', 42, '123-45-6789');

console.log(person._ssn);       // 123-45-6789

When we try to pass the `Person` class to the `Proxy`, it doesn't work as expected because a class is not an object, but rather a blueprint for creating objects. So, when we create an instance of the `ProtectedPerson` proxy, we're actually creating an instance of the `Person` class, which lacks the protections that our handler provides.

To solve this issue, we can use the `Proxy` in the constructor of the `ProtectedPerson` class. This creates a new instance of `ProtectedPerson` and applies the traps defined in the `handler`. This way, we can ensure that the protections are applied to the `ProtectedPerson` instance itself, rather than the `Person` class.

class ProtectedPerson {
    constructor(name, age, ssn) {
        this.name = name;
        this.age = age;
        this._ssn = ssn;

        return new Proxy(this, handler);
    }
}

In the example above, we define a new class called `ProtectedPerson` that's similar to our original `Person` class. However, instead of directly returning an instance of `this`, we're wrapping it with a `Proxy`.

When we create an instance of the `ProtectedPerson` class, it returns a new `Proxy` object that wraps the original `Person` object. Our handler checks if any private properties are being accessed or modified.

Now, let's try to access the `_ssn` property of the `person` instance created with the `ProtectedPerson` class. As expected, we get an error message because `_ssn` is a private property that can't be accessed from outside the class.

const person = new ProtectedPerson('John Smith', 42, '123-45-6789');

// Uncaught Error: Cannot access private property '_ssn'
console.log(person._ssn);

#Accessing private properties internally

However, there's another issue we need to address. Private properties are not only inaccessible from outside, but also from inside the class. To demonstrate this issue, let's add a function called `getSsn` that returns the value of the `_ssn` property.

class ProtectedPerson {
    getSsn() {
        return this._ssn;
    }
}

Even if we execute the `getSsn()` function on a new instance, it will still throw the same error as when we access the `_ssn` property directly. This happens because the new instance is proxied to `this`, and it can't access the `_ssn` property directly due to the protection.

const person = new ProtectedPerson('John Smith', 42, '123-45-6789');

// Uncaught Error: Cannot access private property '_ssn'
person.getSsn();

To address the issue, we need to make a slight modification to the `get` trap handler. In the previous version, the handler threw an error if a property name started with an underscore. However, in this updated version, we first retrieve the value from the `target` object and check if it's a function. If it is, we bind it to the target object, making it accessible within the instance. This allows us to access private properties within class methods without encountering any errors.

Here's what the updated `get` trap looks like:

const handler = {
    get(target, key) {
        if (key.startsWith('_')) {
            throw new Error(`Cannot access private property '${key}'`);
        }
        const value = target[key];
        return (typeof value === 'function') ? value.bind(target) : value;
    },
};

Now that we've implemented the updated handler, we can confidently call the `getSsn()` method on a `ProtectedPerson` instance without encountering any errors.

const person = new ProtectedPerson('John Smith', 42, '123-45-6789');

console.log(person.getSsn());   // 123-45-6789

#Conclusion

In this post, we explored how to create private properties within a class using the JavaScript Proxy feature. We learned that private fields can't be accessed or modified from outside of the class they belong to, which is great for maintaining data integrity and preventing unintended side effects from external code. Additionally, private fields can make code more readable and maintainable by making it clear which parts of a class are public-facing and which are internal implementation details.

While using the hash symbol (#) before the field name is one way to define private fields in modern JavaScript, we can also use a `Proxy` object with `get` and `set` traps for more control over how our private properties are accessed and modified.

By using proxies, we add an extra layer of security to our code and ensure that sensitive information remains protected.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Use JavaScript Proxy to protect internal properties←

Overload the in operator→

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn