JavaScript - Encapsulation

Hello there, budding programmers! Today, we're going to embark on an exciting journey into the world of JavaScript encapsulation. Don't worry if you're new to programming – I'll be your friendly guide, and we'll explore this concept together, step by step. So, grab your virtual backpacks, and let's get started!

What is Encapsulation?

Imagine you have a treasure chest. You don't want just anyone to open it and take your precious gems, right? That's essentially what encapsulation does in programming. It's like putting your code in a protective bubble, allowing only certain parts to be accessed from the outside.

In simpler terms, encapsulation is the bundling of data and the methods that operate on that data within a single unit or object. It's a way of hiding the internal details of how an object works and only exposing what's necessary.

What is the need for encapsulation?

You might be wondering, "Why do we need this fancy encapsulation thing?" Well, let me tell you a little story.

Once upon a time, in a land of spaghetti code, there lived a programmer named Bob. Bob's code was open for anyone to change, and soon, other programmers started meddling with it. Chaos ensued! Nobody knew which part of the code did what, and bugs multiplied like rabbits.

This is where encapsulation comes to the rescue. It helps us:

1. Protect our data from accidental modification
2. Hide complex implementation details
3. Make our code more organized and easier to maintain
4. Reduce dependencies between different parts of our code

Different Ways to Achieve Encapsulation in JavaScript

In JavaScript, we have several tricks up our sleeves to achieve encapsulation. Let's explore them one by one:

Achieving Encapsulation Using Function Closures

Closures are like magical bubbles in JavaScript that remember the environment in which they were created. We can use them to create private variables and methods. Let's look at an example:

function createBankAccount(initialBalance) {
    let balance = initialBalance;

    return {
        deposit: function(amount) {
            balance += amount;
            console.log(`Deposited ${amount}. New balance is ${balance}`);
        },
        withdraw: function(amount) {
            if (amount <= balance) {
                balance -= amount;
                console.log(`Withdrawn ${amount}. New balance is ${balance}`);
            } else {
                console.log("Insufficient funds!");
            }
        },
        getBalance: function() {
            return balance;
        }
    };
}

const myAccount = createBankAccount(1000);
myAccount.deposit(500);  // Deposited 500. New balance is 1500
myAccount.withdraw(200); // Withdrawn 200. New balance is 1300
console.log(myAccount.getBalance()); // 1300
console.log(myAccount.balance); // undefined

In this example, balance is our private variable. It's not directly accessible from outside the createBankAccount function. We can only interact with it through the methods we've exposed: deposit, withdraw, and getBalance. This is encapsulation in action!

Achieving Encapsulation Using ES6 Classes and Private Variables

With the introduction of ES6 classes, we got a more familiar way to create objects and achieve encapsulation. Here's how we can do it:

class BankAccount {
    #balance;  // Private field

    constructor(initialBalance) {
        this.#balance = initialBalance;
    }

    deposit(amount) {
        this.#balance += amount;
        console.log(`Deposited ${amount}. New balance is ${this.#balance}`);
    }

    withdraw(amount) {
        if (amount <= this.#balance) {
            this.#balance -= amount;
            console.log(`Withdrawn ${amount}. New balance is ${this.#balance}`);
        } else {
            console.log("Insufficient funds!");
        }
    }

    getBalance() {
        return this.#balance;
    }
}

const myAccount = new BankAccount(1000);
myAccount.deposit(500);  // Deposited 500. New balance is 1500
myAccount.withdraw(200); // Withdrawn 200. New balance is 1300
console.log(myAccount.getBalance()); // 1300
console.log(myAccount.#balance); // SyntaxError: Private field '#balance' must be declared in an enclosing class

In this example, we use the # symbol to declare balance as a private field. This means it can only be accessed within the BankAccount class, not from outside.

Achieving Encapsulation Using Getters and Setters

Getters and setters are special methods that allow us to define how a property is accessed or modified. They're like security guards for our object's properties. Let's see them in action:

class Circle {
    constructor(radius) {
        this._radius = radius;
    }

    get radius() {
        return this._radius;
    }

    set radius(value) {
        if (value <= 0) {
            throw new Error("Radius must be positive");
        }
        this._radius = value;
    }

    get area() {
        return Math.PI * this._radius ** 2;
    }
}

const myCircle = new Circle(5);
console.log(myCircle.radius); // 5
console.log(myCircle.area);   // 78.53981633974483

myCircle.radius = 10;
console.log(myCircle.radius); // 10

myCircle.radius = -1; // Error: Radius must be positive

In this example, we use a getter to read the radius and a setter to modify it. The setter includes a check to ensure the radius is always positive. We also have a getter for area which calculates the area on-the-fly.

Benefits of Encapsulation in JavaScript

Now that we've seen how to achieve encapsulation, let's summarize its benefits:

1. Data Protection: It prevents unauthorized access to our object's internals.
2. Flexibility: We can change the internal implementation without affecting the external code that uses our object.
3. Modularity: It helps in creating self-contained code units, making our code more modular and easier to manage.
4. Debugging: By limiting where data can be modified, it's easier to track down bugs.
5. Abstraction: It allows us to hide complex implementation details and provide a simple interface for using our objects.

Methods Table

Here's a handy table summarizing the methods we've discussed for achieving encapsulation:

Method	Description	Example
Function Closures	Uses closure to create private variables	function createObject() { let privateVar = 0; return { getVar: () => privateVar }; }
ES6 Classes with Private Fields	Uses # to declare private fields in a class	class MyClass { #privateField; constructor() { this.#privateField = 0; } }
Getters and Setters	Uses special methods to control access to properties	class MyClass { get prop() { return this._prop; } set prop(value) { this._prop = value; } }

And there you have it, folks! We've journeyed through the land of encapsulation, from its basic concept to different ways of implementing it in JavaScript. Remember, encapsulation is like a good secret keeper – it knows what to share and what to keep private. As you continue your programming adventure, you'll find encapsulation to be a trusty companion in creating robust and maintainable code.

Keep practicing, stay curious, and happy coding!

Credits: Image by storyset