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.
☕♨️ 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
- Event Driven Architecture: A Practical Guide in Javascript
- Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
- After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
Packages & Libraries
- Collections: Your ultimate Javascript Arrays Manager
- Supportive Is: an elegant utility to check types of values in JavaScript
- Localization: An agnostic i18n package to manage localization in your project
React Js Packages
Courses (Articles)
Top comments (0)