DEV Community 👩‍💻👨‍💻

Cover image for 7-JS/TS OOP: Class Access Modifiers
Hasan Zohdy
Hasan Zohdy

Posted on

7-JS/TS OOP: Class Access Modifiers

Introduction

Access modifiers are used to control the access of class members.

What is an Access Modifier?

An access modifier is a keyword that is used to set the accessibility of a class member.

In our situation, this is a Typescript thing not a Javascript thing.

Access Modifiers Types

There are 3 types of access modifiers:

  • Public: The default access modifier. It means that the class member is accessible from anywhere.
  • Protected: It means that the class member is accessible from the class and its subclasses.
  • Private: It means that the class member is accessible only from the class.

Public Access Modifier

The public access modifier is the default access modifier for class members.

It means that the class member is accessible from anywhere.

Let's see an example in TS:

class Human {
    public name = 'Hasan';
    public age = 33;
}
Enter fullscreen mode Exit fullscreen mode

Here we have a class called Human that has 2 public properties, name and age.

Now let's see how to use it

const human = new Human();

console.log(human.name); // Hasan
console.log(human.age); // 33
Enter fullscreen mode Exit fullscreen mode

Protected Access Modifier

The protected access modifier is used to make a class member accessible from the class and its subclasses.

Let's see an example in TS:

class Human {
    protected name = 'Hasan';
    protected age = 33;
}

class Developer extends Human {
    sayHello() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
Enter fullscreen mode Exit fullscreen mode

Here we have a class called Human that has 2 protected properties, name and age.

And we have a class called Developer that extends Human.

Now let's see how to use it

const developer = new Developer();

developer.sayHello(); // Hello, my name is Hasan and I'm 33 years old.

console.log(developer.name); // Throws an error: Property 'name' is protected and only accessible within class 'Human' and its subclasses.
Enter fullscreen mode Exit fullscreen mode

Private Access Modifier

The private access modifier is used to make a class member accessible only from the class.

Let's see an example in TS:

class Human {
    private name = 'Hasan';
    private age = 33;

    sayHello() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
Enter fullscreen mode Exit fullscreen mode

It can not be accessed either from anywhere outside the class and even from the inherited classes.

// trying to access it from outside the class
const human = new Human();

human.sayHello(); // Hello, my name is Hasan and I'm 33 years old.

console.log(human.name); // Throws an error: Property 'name' is private and only accessible within class 'Human'.

// trying to access it from a subclass

class Developer extends Human {
    sayHello() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

const developer = new Developer();

developer.sayHello(); // Throws an error: Property 'name' is private and only accessible within class 'Human'.
Enter fullscreen mode Exit fullscreen mode

As i mentioned earlier, Access modifiers are a Typescript thing not a Javascript thing, except for the private access modifier.

By default all members in JS class are public but starting from ECMAScript 2022, we can use private members in javascript classes by prefixing the class member with #.

class Human {
    #name = 'Hasan';
    #age = 33;

    sayHello() {
        console.log(`Hello, my name is ${this.#name} and I'm ${this.#age} years old.`);
    }
}
Enter fullscreen mode Exit fullscreen mode

You see we added the # before the name of the class member in both class member definition and class member call.

But i really hate this syntax, it's ugly and it's not readable at all, so i'll go with the Typescript way.

🎨 Conclusion

So we can conclude the access modifiers as a label to identify how the class members can be accessed, it has three levels of access: public which is the default, and any class member that is public can be accessed from anywhere, protected which means that the class member is accessible from the class and its subclasses, and private which means that the class member is accessible only from the class.

☕♨️ 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)

Become a Moderator Do you want us to help make DEV a better place?

Fill out this survey and help us by becoming a tag moderator here at DEV.