6-JS OOP: Class Members
Tags: javascript, oop, typescript
Published: 2022-11-19 20:19:01

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

## Introduction

Class members are the attributes/fields/properties and methods of a class.

## What is a Class Member?

A class member is a variable or a function that is defined inside a class.

## Class Members Types

There are 3 types of class members:

* Instance Members
* Static Members
* Abstract Members

## Instance Members

Instance members are the attributes/fields/properties and methods of a class that are defined inside the class body.

### Class properties

Class properties also called `fields` and `attributes` are the variables that are defined inside a class.

Let's see an example in JS:

```js
class Human {
    name = 'Hasan';
    age = 33;
}
```

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

### Class methods

Class methods are the functions that are defined inside a class.

So basically any function inside a class is called a `method`.

Let's see an example in JS:

```js
class Human {
    name = 'Hasan';
    age = 33;

    sayHello() {
        console.log('Hello');
    }
}
```

## The `this` keyword

OK now we saw the `instance members`, but how can we access these members?

We can access the instance members using the `this` keyword, it is referred to the created objects of class.

Let's see an example in JS:

```js
class Human {
    name = 'Hasan';
    age = 33;

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const human = new Human();

console.log(human.sayHello()); // Hello, my name is Hasan
```

As we can see in the example above, we can access the `name` property using the `this` keyword.

It can be also used to access the `methods`:

```js
class Human {
    name = 'Hasan';
    age = 33;

    getMyInfo() {
        return `My name is ${this.name}, I'm ${this.age} years old, i was born in ${this.getBirthYear()}`;
    }

    getBirthDate() {
        const currentYear = new Date().getFullYear();
        return currentYear - this.age;
    }
}

const me = new Human();

console.log(me.getMyInfo()); // My name is Hasan, I'm 33 years old, i was born in 1988
```

We here used the `this` keyword to access the `getBirthYear` method.

## Static Members

Static members are the properties and methods of a class that are defined inside the class body using the `static` keyword.

They are prefixed with `static` keyword, and they are accessed using the class name.

The major difference between `static` members and `instance` members is that `static` are called from the class itself, which means they are related to the type of the thing not the thing itself (The object i mean).

Let's see an example in JS:

```js
class GoogleEmployee {
    static company = 'Google';

    static getCompany() {
        return Employee.company;
    }
}

console.log(Employee.company); // Google
```

In our previous example, we defined class called `GoogleEmployee` that has 2 static members, `company` and `getCompany` method.

Why we have the `company` as static property? because regardless of who is that employee is (The object created of the class), the company is always the same, so it is related to the type of the thing not the thing itself.

Let's see another example:

```js
class Fruit {
    static grownAs = 'Tree';
}

console.log(Fruit.grownAs); // Tree
```

As fruits only grow in trees, we don't have to create the `grownAs` property to by instance member, as all fruits are the same (as far as i know), so how it grows it is related to the type of the thing (The Fruit class).

Returning back to what we were talking about, static members can be access from the class itself:

## Difference between static and instance members

| Static Members | Instance Members |
| --- | --- |
| They are accessed using the class name | They are accessed using the `this` keyword |
| They are related to the type of the thing | They are related to the thing itself |
| They are called from the class itself | They are called from the object created of the class |
| They are prefixed with `static` keyword | They are not prefixed with `static` keyword |
| Can not call non static members from static members | Can call static members from non static members |

### Calling static members from instance members

We can call static members from instance members using the `ClassName` followed with `.`, then the static member name.

```js
class Human {
    static company = 'Google';

    getCompany() {
        return Human.company;
    }
}
```

There is another way to access static members from instance members, and that is using the `this` keyword and `constructor`

```js
class Human {
    static company = 'Google';

    getCompany() {
        return this.constructor.company;
    }
}
```

### Accessing static members in static methods using `this`

We can access static members in static methods using the `this` keyword.

```js
class Human {
    static company = 'Google';

    static getCompany() {
        return this.company;
    }
}
```

So we can conclude when to use `this` keywords in the following table for static and instance members:

| Static Members | Instance Members |
| --- | --- |
| Can access static members using `this` keyword | Can not access static members using `this` keyword |
| Can access static members using `Class Name` | Can access static members using `Class Name` |
| `N/a` | Can access static members using `this.constructor` followed by `.` then the static member name |
| Can not access instance members using `this` keyword | Can access instance members using `this` keyword |

## Abstract Members

We are not going to say much about this as it's not implemented in in Javascript, but fortunately it can be implemented in `Typescript`.

Abstract members are the members that are defined inside the class body using the `abstract` keyword.

They can be defined only in `abstract classes`.

They are implemented by the `concrete classes` (Child classes) that inherit from the `abstract class`.

When to use them?

When we have a class that has some members that are not implemented, and we want to force the child classes to implement them.

A real world example is the `Animal` class, as each animal has its own `voice` so we'll make the `voice` method as abstract so the child class (An actual animal) will implement that voice method.

Let's see a pseudo code example:

```ts
abstract class Animal {
    abstract voice(): void;
}

class Dog extends Animal {
    voice() {
        console.log('Woof');
    }
}
```

That how abstract members work.

## 🎨 Conclusion

In this article we learned about the `class` keyword, `instance members`, `static members`, `abstract members`, and the `this` keyword and when to use `this` in either static or instance members.

> Instance members are also called `non static members`.

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