Abstraction in JavaScript: Washing Machine Style!

What is Abstraction?

Abstraction is an Object-Oriented Programming (OOP) principle that means hiding internal details(or complexities) and exposing only essential parts to the end users. Think of it like using a TV remote — you press a button to switch channels, but you don’t need to understand the circuitry behind it.

In code, abstraction helps keep things clean, maintainable, and secure. Users interact with simple methods, while complex logic stays away.

Why is Abstraction Important?

Abstraction is one of the four pillars of OOP, along with Encapsulation, Inheritance, and Polymorphism. It helps with:

• Simplicity: It hides unnecessary complexity.
• Security: Sensitive logic or data can be kept private.
• Maintainability: Internal changes don’t affect users of the class.
• Reusability: You can reuse the same interface across different implementations.

We can implement Abstraction in JavaScript with Constructor Functions or the Classes feature introduced in ES6. Let us now implement one with ES6 Classes.

What Are ES6 Classes?

ES6 introduced the class syntax in JavaScript to make OOP-style coding easier and more familiar. It’s just syntactic sugar over JavaScript’s existing prototype-based inheritance but makes your code cleaner and more intuitive.

class AClass {
  constructor(name) {
    this.name = name;
  }

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

Classes can have public/private fields and methods:

• Public fields/methods: Accessible from outside the class.
• Private fields/methods: Start with #, and are accessible only within the class.

class Sample {
  publicField = "I'm public";
  #privateField = "I'm private";

  showFields() {
    console.log(this.publicField);  // Can be accessed
    console.log(this.#privateField); // Can be accessed
  }
}

const s = new Sample();
console.log(s.publicField);   // Can be accessed
console.log(s.#privateField); // SyntaxError

You can learn about ES6 Classes with examples from this session.

The Washing Machine Example: Real-World Abstraction

When you run a Washing Machine, you worry about starting and stopping the Washing Machine. When you press a button to start the Washing Machine, a few things happen at the background. For example, the Washing Machine checks the power status, fill water, spin the drum, drain the water after wash, and stops.

All these complex electrical and mechanical activities are abstracted away from the customers by the Washing Machine vendors. The customers/end users just press the start button, and all that takes place at the background!

Now, if we model Washing Machine as a Class in the JavaScript world, we can think of start() and stop() as the only public methods to expose to the users. Whereas, all other actions like spin, drain, etc., should be handled as private methods. That's how we achieve abstraction.

Here is an implementation of Abstraction with the Washing Machine example:

class WashingMachine {
  brand; // public
  #powerStatus = false; // private
  #currentCycle = null;

  constructor(brand) {
    this.brand = brand;
  }

  // public
  start(cycle) {
    if (!this.#powerStatus) this.#turnOn();
    this.#currentCycle = cycle;
    console.log(`Starting ${cycle} cycle...`);
    this.#fillWater();
    this.#spin();
    this.#drain();
    this.stop();
  }

  // public
  stop() {
    console.log("Washing machine stopped.");
    this.#turnOff();
  }

  // private
  #turnOn() {
    this.#powerStatus = true;
    console.log("Power ON");
  }

  // private
  #turnOff() {
    this.#powerStatus = false;
    console.log("Power OFF");
  }

  // private
  #fillWater() {
    console.log("Filling Water...");

    console.log("Water Filled.");
  }

  // private
  #spin() {
    console.log("Spinning...");
  }

  // private
  #drain() {
    console.log("Draining...");
  }
}

What’s Abstracted?

The user of the class only needs to call:

const lgWasher = new WashingMachine("LG");
lgWasher.start("Quick Wash");

They don’t need to worry about how the machine turns on, spins, or drains—those are abstracted away using private methods like #turnOn() and #drain().

Trying to access internal workings like:

lgWasher.#powerStatus  // Error
lgWasher.#turnOn()     // Error

It throws an error. That’s true abstraction in JavaScript, thanks to ES6 private fields and methods.

Conclusion

Abstraction helps you focus on what matters while the complexities stay behind the curtain. With Classes, JavaScript finally gives you the tools (like #private fields introduced in ECMAScript 2022) to implement this cleanly—just like your Washing Machine, which works wonders with a single start().

Join 40 Days of JavaScript for FREE

There are 101 ways of learning something. But, nothing can beat the “structured” and “progressive” learning methodologies. I have designed this FREE task-based Course for you to stay structured and motivated. Sounds great? Please take a look:

Join 40 Days of JavaScript Course for FREE - Do not miss the chance to learn JavaScript in-depth with practical projects and assignments. JavaScript is omnipresent and learning the language well will help you get a better grip on many other libraries and frameworks like ReactJS, Angular, Next.js, Node.js, Remix, and many more. So, make sure to join the 40 Days of JavaScript initiative and master the language.