Encapsulation in JavaScript – What Is Encapsulation?

Encapsulation is an object’s design pattern that prevents external code from interacting with internal data (properties). Instead, external code would use methods to operate on the object’s internal implementations.

The encapsulation concept is like a capsule whose shell prevents users from directly accessing the enclosed medicine.

Medicinal capsule depicting encapsulation in
JavaScript — A capsule’s shell is like a publicly accessible JavaScript method users can use to access an object’s internal implementations.

In other words, you encapsulate an object’s data when you make them private and provide publicly available methods for users to operate on the private data.

How Does Encapsulation Work in JavaScript?

Consider the following code:

// Create a new class:
class Name {
  // Create a private class field data:
  #myName = "Oluwatobi";

  // Create a publicly available method:
  showMyName() {
    return this.#myName;
  }

  // Create another publicly available method:
  updateMyName(value) {
    this.#myName = value;
  }
}

// Create a new object instance:
const bio = new Name();

// Check the instance's data value:
bio.myName;

// The invocation above will return: undefined

Try Editing It

The snippet above encapsulated Name’s data because it defined myName as a private feature and provided two public methods for users to read and update the class’s internal implementation.

Consequently, the bio instance object knows nothing about the class’s internal data and cannot interact with it directly.

How to Access Encapsulated Data in JavaScript

Whenever users need to access encapsulated data, they would use publicly available methods like so:

// Check the instance's data value:
bio.showMyName();

// The invocation above will return: "Oluwatobi"

// Update the instance's data value:
bio.updateMyName("Sofela");

// Check the instance's data value:
bio.showMyName();

// The invocation above will return: "Sofela"

Try Editing It

Now that we know how encapsulation works in JavaScript and how to access encapsulated data, we can discuss its benefits.

What Is the Benefit of Encapsulation in JavaScript?

Encapsulation keeps your object clean and prevents minor internal refactoring from breaking the user’s code.

For instance, consider the following code:

// Create a new class:
class Name {
  // Create a public class field data:
  myName = "Oluwatobi";
}

// Create a new object instance:
const bio = new Name();

// Check the instance's data value:
bio.myName;

// The invocation above will return: "Oluwatobi"

// Update the instance's data value:
bio.myName = "Sofela";

// Check the instance's data value:
bio.myName;

// The invocation above will return: "Sofela"

Since the snippet above did not encapsulate the class’s data, refactoring the class field’s name would break users’ code.

CodeSweetly ads

Use Flexbox like a pro

Learn CSS Flexbox with live examples and images.

Check it out

Here’s an example:

class Name {
  // Update the data's name from myName to myFirstName:
  myFirstName = "Oluwatobi";
}

// Create a new object instance:
const bio = new Name();

// Check the instance's data value:
bio.myName;

// The invocation above will return: undefined

The snippet above returned undefined because refactoring the class’s internal implementation broke the user’s bio.myName code. For the application to work appropriately, the user must update every instance of the code (which can be burdensome for large projects).

However, encapsulation prevents such refactoring from breaking the user’s code.

Here’s an example:

class Name {
  // Update the data's name from myName to myFirstName:
  #myFirstName = "Oluwatobi";

  // Create a method:
  showMyName() {
    return this.#myFirstName;
  }

  // Create another method:
  updateMyName(value) {
    this.#myFirstName = value;
  }
}

// Create a new object instance:
const bio = new Name();

// Check the instance's data value:
bio.showMyName();

// The invocation above will return: "Oluwatobi"

// Update the instance's data value:
bio.updateMyName("Sofela");

// Check the instance's data value:
bio.showMyName();

// The invocation above will return: "Sofela"

You can see that refactoring the class’s internal implementation did not break the user’s code. That’s the beauty of encapsulation!

Encapsulation allows you to provide users with an interface independent of the object’s underlying data. Therefore, you minimize the likelihood of users’ code breaking when you alter internal implementations.

Support CodeSweetly