What is Encapsulation in JavaScript and How Do You Use It?

 

Encapsulation is a fundamental concept in object-oriented programming (OOP) that helps in organising and managing code more effectively. In JavaScript, encapsulation allows developers to hide the internal state and behaviour of objects, exposing only what is necessary. This approach leads to more modular, maintainable, and less error-prone code.

What is Encapsulation?

Encapsulation refers to the bundling of data (properties) and methods (functions) that operate on the data into a single unit, usually a class or object. It restricts direct access to some of the object's components, which can help prevent unintended interference and misuse of the data.

In JavaScript, encapsulation can be achieved using different techniques such as closures, the class syntax, and ES6 modules.

Using Closures for Encapsulation

Before ES6 introduced classes, closures were a popular way to achieve encapsulation in JavaScript. Closures allow functions to retain access to their outer scope even after the outer function has finished executing. This concept can be used to create private variables and methods.

Here’s a simple example using closures:

function createCounter() {
    let count = 0; // private variable

    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
console.log(counter.getCount()); // 2(code-box)

In this example, count is a private variable that cannot be accessed directly from outside the createCounter function. The increment, decrement, and getCount methods provide controlled access to count.

Using ES6 Classes for Encapsulation

With the introduction of ES6, JavaScript now supports classes, which offer a more straightforward syntax for implementing encapsulation. Classes can have public and private fields (using the # syntax for private fields) and methods.

Here’s how you can use ES6 classes to achieve encapsulation:

class Person {
    #name; // private field

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

    greet() {
        console.log(`Hello, my name is ${this.#name}.`);
    }

    // Getter for private field
    getName() {
        return this.#name;
    }
}

const person = new Person('Alice');
person.greet(); // Hello, my name is Alice.
console.log(person.getName()); // Alice
// console.log(person.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class(code-box)

In the above example, #name  is a private field that can only be accessed within the Person class. Attempting to access #name from outside the class results in an error.

Using ES6 Modules for Encapsulation

Another way to achieve encapsulation in JavaScript is through ES6 modules. Modules allow you to export only the parts of a file that should be publicly accessible while keeping other parts private.

Here’s an example of encapsulation using modules:

module.js:

let privateValue = 42; // private variable

export function getValue() {
    return privateValue;
}

export function setValue(newValue) {
    privateValue = newValue;
}(code-box)

main.js:

import { getValue, setValue } from './module.js';

console.log(getValue()); // 42
setValue(100);
console.log(getValue()); // 100
// privateValue is not directly accessible here(code-box)

In the above example, privateValue is private to module.js and cannot be accessed directly from main.js. Only the getValue and setValue functions are exposed, providing controlled access to privateValue.

Conclusion

Encapsulation is a key principle in JavaScript that helps manage complexity by bundling data and methods into objects and controlling access to the internal state. Whether using closures, ES6 classes, or modules, encapsulation leads to cleaner, more maintainable code by protecting internal details and exposing only what is necessary.

By effectively implementing encapsulation, developers can create more robust and modular applications, making it easier to understand, test, and maintain their code bases.