How to Create Protected Object Properties in JavaScript?

JavaScript does not have built-in access modifiers like other languages, but we can create protected object properties using closures and WeakMap. Protected properties are accessible only through specific methods and cannot be directly accessed from outside the object, providing encapsulation and data security.

Approaches to Create Protected Object Properties

• Using Closures
• Using WeakMap
• Using Private Fields (ES2022)

Using Closures

Closures create a private scope where variables are accessible only to inner functions, effectively protecting properties from external access.

function ProtectedObject(name, age) {
    // Private variables using closure
    let _name = name;
    let _age = age;

    return {
        getName() {
            return _name;
        },
        setName(newName) {
            _name = newName;
        },
        getAge() {
            return _age;
        },
        setAge(newAge) {
            _age = newAge;
        }
    };
}

const person = ProtectedObject('Pankaj Bind', 20);
console.log(person.getName());  
console.log(person.getAge());   
person.setName('Neeraj Bind');
console.log(person.getName());  
console.log(person._name);      // Cannot access private variable

Pankaj Bind
20
Neeraj Bind
undefined

Using WeakMap

A WeakMap stores private data associated with object instances. Since WeakMap keys are object references and not enumerable, the stored data remains protected.

const privateData = new WeakMap();

class ProtectedObject {
    constructor(name, age) {
        privateData.set(this, { name, age });
    }

    getName() {
        return privateData.get(this).name;
    }

    setName(newName) {
        privateData.get(this).name = newName;
    }

    getAge() {
        return privateData.get(this).age;
    }

    setAge(newAge) {
        privateData.get(this).age = newAge;
    }
}

const person = new ProtectedObject('Pankaj Bind', 20);
console.log(person.getName());  
console.log(person.getAge());   
person.setName('Neeraj Bind');
console.log(person.getName()); 
console.log(person.name);       // Cannot access private data

Pankaj Bind
20
Neeraj Bind
undefined

Using Private Fields (ES2022)

Modern JavaScript supports private fields with the # syntax, providing true privacy at the language level.

class ProtectedObject {
    #name;
    #age;

    constructor(name, age) {
        this.#name = name;
        this.#age = age;
    }

    getName() {
        return this.#name;
    }

    setName(newName) {
        this.#name = newName;
    }

    getAge() {
        return this.#age;
    }

    setAge(newAge) {
        this.#age = newAge;
    }
}

const person = new ProtectedObject('Pankaj Bind', 20);
console.log(person.getName());
console.log(person.getAge());
person.setName('Neeraj Bind');
console.log(person.getName());
// console.log(person.#name); // Would cause SyntaxError

Pankaj Bind
20
Neeraj Bind

Comparison

Conclusion

All three methods effectively create protected properties in JavaScript. Use closures for broad compatibility, WeakMap for class-based designs, or private fields for modern environments with ES2022 support.