6-JS OOP: Class Members

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:

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:

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:

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:

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:

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:

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

Calling static members from instance members

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

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

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.

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:

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:

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

• useFetcher: easiest way to fetch data in React Js

Courses (Articles)

• ES6++: The Ultimate Guide to ES6 and Beyond
• Node Js 2023 Course: Node With Typescript, The Ultimate Guide
• React Js: Let"s Create File Manager With React Js and Node Js