DEV Community

Cover image for 6-JS OOP: Class Members
Hasan Zohdy
Hasan Zohdy

Posted on

6-JS OOP: Class Members

#javascript #oop #typescript

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;
}
Enter fullscreen mode Exit fullscreen mode

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');
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

class Human {
    static company = 'Google';

    getCompany() {
        return Human.company;
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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:

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

class Dog extends Animal {
    voice() {
        console.log('Woof');
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Packages & Libraries

React Js Packages

Courses (Articles)

Top comments (0)

Read next

andrew_mclean_09 profile image

anyone wanna join me building my first app?(I'm a beginner bare with me)

Andrew Mclean -

blamsa0mine profile image

Build a Simple Chatbot with Svelte and ElizaBot

A0mineTV -

emarifer profile image

A minimalist password manager desktop app: a foray into Golang's Wails framework (Part 2)

Enrique Marín -

cordlesswool profile image

How to use generics in pipe-and-combine

Wolfgang Rathgeb -