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;
}

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

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.`);
    }
}

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.

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.`);
    }
}

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'.

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.`);
    }
}

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.