Suggest an edit

Improve this article

Refine the answer for “What does the protected access modifier do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The `protected` modifier in TypeScript is an "intermediate" access level between `private` and `public`.
It makes a property or method **accessible inside the class and in all of its subclasses**,
but **not accessible from outside** (through a class instance).

---

## 1. Syntax and meaning

```javascript
class Animal {
  protected type: string;

constructor(type: string) {
    this.type = type;
  }

protected move() {
    console.log(`${this.type} is moving`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.type} says: Woof!`);
    this.move(); // the protected method can be called
  }
}

const dog = new Dog("Dog");
dog.bark();  // ok
dog.type;    // Error - protected
dog.move();  // Error - protected
```

Here:

- `type` and `move()` are visible **inside** `Animal` **and** `Dog`,
- but are not accessible **from outside** through an instance.

---

## 2. Visibility rules

| Where we access from | Access to `protected` |
|---|---|
| Inside the class itself | yes |
| In a subclass | yes |
| From outside (through an object) | no |

---

## 3. Example: "protected" used for base logic

```javascript
class Vehicle {
  protected speed: number = 0;

protected accelerate(amount: number) {
    this.speed += amount;
  }

public showSpeed() {
    console.log(`Speed: ${this.speed}`);
  }
}

class Car extends Vehicle {
  drive() {
    this.accelerate(50); // accessible
    this.showSpeed();
  }
}

const car = new Car();
car.drive();       // Speed: 50
car.accelerate(50); // Error - protected
```

> `accelerate()` can only be used in classes that inherit from `Vehicle`.

---

## 4. Difference from `private`

| Modifier | Access in the class | Access in a subclass | Access from outside |
|---|---|---|---|
| `public` | yes | yes | yes |
| `protected` | yes | yes | no |
| `private` | yes | no | no |

---

## 5. Combining `protected` + `readonly`

```javascript
class User {
  protected readonly role: string;

constructor(role: string) {
    this.role = role;
  }
}

class Admin extends User {
  printRole() {
    console.log(this.role); // can be read
    // this.role = "user";  // cannot be changed - readonly
  }
}
```

> You can use `protected readonly` - accessible in subclasses, but not modifiable.

---

## 6. A protected constructor (a Singleton / Factory example)

Sometimes the **constructor** itself is made `protected`,
to prevent creating instances directly,
while still allowing subclasses to do so:

```javascript
abstract class BaseService {
  protected constructor(public name: string) {}
}

class UserService extends BaseService {
  constructor() {
    super("UserService");
  }
}

new UserService(); // ok
new BaseService("Base"); // Error - constructor is protected
```

> Used when a class is not meant to be instantiated directly (often in design patterns).

---

## 7. An example from real code

```javascript
abstract class Component {
  protected renderHTML(html: string) {
    console.log("Render:", html);
  }
}

class Button extends Component {
  render() {
    this.renderHTML("<button>Click me</button>"); // allowed
  }
}

const btn = new Button();
btn.render();        // ok
btn.renderHTML("");  // Error - protected
```

> A great example for UI components or services:
> a base class provides protected utilities,
> and concrete subclasses use them without exposing them outside.

---

## Summary

| Property | Value |
|---|---|
| Accessible in the class itself | yes |
| Accessible in subclasses | yes |
| Accessible from outside (through an instance) | no |
| Common use | Base classes, templates, inheritance |
| Can be used with `readonly` | yes |
| Can be applied to methods and constructors | yes |

---

**In simpler terms:**

> `protected` is like `private`,
> but "accessible to children".

Markdown · drag & drop images · ⌘B / ⌘I shortcuts584 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.