DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for 12-JS/TS OOP: Encapsulation In OOP
Hasan Zohdy
Hasan Zohdy

Posted on

12-JS/TS OOP: Encapsulation In OOP

Encapsulation

Encapsulation means wrapping up or hiding something, in OOP we use it to hide the implementation details of a class from the outside world.

For example, we have a class called Car, and this class has a method called start, this method will start the car, but we don't want to expose this method to the outside world, we want to hide it, so we can do that by making it a private method, so it can only be accessed from inside the class, and not from outside the class.

class Car {
  private start() {
    console.log('Car started');
  }
}
Enter fullscreen mode Exit fullscreen mode

You can think of it as a privacy to your class base code, it meant to be hidden from any outsiders, but available only to you.

When to use Encapsulation?

Let's take couple of real world examples to understand when to use Encapsulation.

Medicine Capsule

A real world example of Encaapsulation is a Medicine Capsule, it's a small container that contains a medicine, and it's wrapped up in a plastic, so it can't be seen from the outside, of course you can crack it, but the idea here is that you don't actually see the medicine, just only the plastic part that wraps the medicine.

ATM Machine

Another example is an ATM Machine, it's a machine that you can use to withdraw money, but you can't see the money inside the machine, you can only see the buttons and the screen, and you can only interact with the buttons and the screen, but what does happen inside the machine is hidden from you.

Programming Example

We can take an example of Encapsulation in programming a Cart class, that class has a job to manage the cart items, like adding, appending quantity, deleting and listing cart items.

Assume that you're adding a product to the cart for the first time, you pass the product id, the cart has a method called add and receives that product id, now the user clicks again on the Add to cart button thus another call to add method is needed here to add the same product, but in this case, the product already exists, so the add method will not re-add it again but just increase its quantity, let's see how we can do that.

I'll write the code in Typescript but you can use Javascript as well but strongly not recommended to use Javascript anymore in your life, we are about to be in 2023 man!

class Cart {
  private items: { [productId: number]: number } = {};

  public add(productId: string) {
    if (this.items[productId]) {
      this.items[productId]++;
    } else {
      this.items[productId] = 1;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

As you can see, we have a private property called items that holds the cart items, and we have a public method called add that receives the product id, and it will check if the product already exists in the cart, if it does, it will increase its quantity, if not, it will add it to the cart.

So the usage will be like this:

const cart = new Cart();

cart.add(1);
cart.add(1);
cart.add(2);
cart.add(3);

// now our items list will be: 
// { 1: 2, 2: 1, 3: 1 }
Enter fullscreen mode Exit fullscreen mode

The product with id 1 has been added twice, so its quantity is 2, the product with id 2 has been added once, so its quantity is 1, and the product with id 3 has been added once, so its quantity is 1.

So we can conclude that we don't really know what is happening here or how the add method works internally, but we know it creates or append the quantity, that's all what we need to know, and that's the idea of Encapsulation.

๐ŸŽจ Conclusion

In this article, we learned about Encapsulation in OOP, and we saw some real world examples of it, and we saw how we can use it in our code.

This concept is very important in OOP, and it's one of the pillars of OOP, so you should know it well and most importantly, you should use it in your code.

โ˜•โ™จ๏ธ Buy me a Coffee โ™จ๏ธโ˜•

If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.

๐Ÿ˜ Join our community

Join our community on Discord to get help and support.

๐Ÿ“š Bonus Content ๐Ÿ“š

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

Packages & Libraries

React Js Packages

Courses (Articles)

Top comments (0)

Create an Account!

๐Ÿ‘€ Just want to lurk?

That's fine, you can still create an account and turn on features like ๐ŸŒš dark mode.