7-JS/TS OOP: Class Access Modifiers
Tags: javascript, oop, typescript
Published: 2022-11-20 05:00:59

---
title: 7-JS/TS OOP: Class Access Modifiers
published: true
description: 
series: jstsoop
tags: javascript, oop, typescript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fps6mabsbf8bkpad4k9r.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 09:51 +0000
---

## 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:

```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

```ts
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:

```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

```ts
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:

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

```ts
// 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 `#`.

```js
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](https://www.paypal.com/paypalme/hassanzohdy), it will help me to keep going and keep creating more content.

## 😍 Join our community

Join our community on [Discord](https://discord.gg/uBh98KZGGF) 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](https://dev.to/hassanzohdy/event-driven-architecture-the-best-paradigm-that-i-love-to-work-with-in-javascript-and-node-js-1gnk)
* [Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript](https://dev.to/hassanzohdy/best-practices-for-case-styles-camel-pascal-snake-and-kebab-case-in-node-and-javascript-55oi)
* [After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
](https://dev.to/hassanzohdy/after-6-years-of-practicing-mongodb-here-are-my-thoughts-on-mongodb-vs-mysql-574b)

Packages & Libraries

* [Collections: Your ultimate Javascript Arrays Manager](https://dev.to/hassanzohdy/collections-your-ultimate-javascript-array-handler-3o15)
* [Supportive Is: an elegant utility to check types of values in JavaScript](https://dev.to/hassanzohdy/supportive-is-an-elegant-utility-to-check-types-of-values-in-javascript-1b3e)
* [Localization: An agnostic i18n package to manage localization in your project](https://dev.to/hassanzohdy/mongez-localization-the-simplest-way-to-translate-your-website-regardless-your-favorite-framework-4gi3)

 React Js Packages

* [useFetcher: easiest way to fetch data in React Js](https://dev.to/hassanzohdy/usefetcher-the-easiest-way-to-fetch-data-in-react-45o9)

Courses (Articles)

* [ES6++: The Ultimate Guide to ES6 and Beyond](https://dev.to/hassanzohdy/es6-1-introduction-h3e)
* [Node Js 2023 Course: Node With Typescript, The Ultimate Guide](https://dev.to/hassanzohdy/nodejs-course-2023-introduction-to-nodejs-3n4e)
* [React Js: Let"s Create File Manager With React Js and Node Js](https://dev.to/hassanzohdy/lets-create-a-file-manager-from-scratch-with-react-and-typescript-chapter-i-a-good-way-to-expand-your-experience-5g4k)