3-JS OOP: Class Structure

Introduction

So we learned earlier what is a class and what is an object, now we'll learn about the structure of a class.

Structure of a class

A class is a blueprint for creating objects, it defines a set of attributes that will characterize any object of the class. The attributes are called fields or properties or attributes, and list of actions are called methods.

So a class is a definition of a type, it defines the characteristics and the actions of the type.

Class Attributes

As we said it is also called properties or fields but in JS/TS we call it attributes or properties, so what are attributes?

Attributes are the characteristics of a class, for example the Human class has the attributes name, age, gender, height, weight, etc.

Class Methods

Methods are the actions of a class, for example the Human class has the methods walk, talk, eat, sleep, etc.

They represent the behaviors of a class.

Our First Class

Let's create our first class, we'll create a class called Human, and we'll add the attributes name, age, gender, height, weight, etc.

class Human {
    name;
    age;
    gender;
    height;
    weight;    
}

So the class is defined using class keyword, then the name of the class, then the attributes are defined using the ; semicolon.

Creating an object

Now we'll create an object of the Human class, we'll create an object called me.

class Human {
    name;
    age;
    gender;
    height;
    weight;    
}

const me = new Human();

To create a new object from a class, we must use the new keyword, then the name of the class.

The class can be called with or without parenthesis (), but it is recommended to use parenthesis.

So we created an object of the Human class, and we assigned it to the variable me.

Assigning values to attributes

Now we'll assign values to the attributes of the Human class.

class Human {
    name;
    age;
    gender;
    height;
    weight;    
}

const me = new Human();

me.name = "Hasan";
me.age = 25;
me.weight = 70;
me.height = 180;
me.gender = 'male';

If you notice that syntax, it is the same syntax as we write with normal object, why? because it is literally an object, it is just a class that defines the type of the object.

Class Constructor

The constructor is a special method that is called when an object is created from a class, it is used to initialize the object.

class Human {
    name;
    age;
    gender;
    height;
    weight;

    constructor(name) {
        this.name = name;
    }
}

So we created a constructor, and we passed the name parameter to it, and we assigned the name parameter to the name attribute.

Now let's see how to use it.

class Human {
    name;
    age;
    gender;
    height;
    weight;

    constructor(name) {
        this.name = name;
    }
}

const me = new Human("Hasan");

Here we passed the Hasan string to the constructor, and it assigned it to the name attribute.

In that sense, we can say that we created a new Human (Class) which is me (Object) and we passed the Hasan string to the constructor, and it assigned it to the name attribute.

Using Class Methods

Now we'll create a method called walk in the Human class.

class Human {
    name;
    age;
    gender;
    height;
    weight;

    constructor(name) {
        this.name = name;
    }

    walk() {
        console.log(`${this.name} is walking`);
    }
}

const me = new Human("Hasan");

me.walk(); // Hasan is walking

So we created a method called walk, and we called it using the me object.

It will output in the console Hasan is walking.

Assigning values to attributes using methods

Actually, we can assign a value to any property (attribute/field) we want, but it is not recommended to do that, because it will make the code messy.

So we'll create a method called setAge in the Human class to define the age of the me object.

class Human {
    name;
    age;
    gender;
    height;
    weight;

    constructor(name) {
        this.name = name;
    }

    walk() {
        console.log(`${this.name} is walking`);
    }

    setAge(age) {
        this.age = age;
    }
}

const me = new Human("Hasan");

me.setAge(25);

In the above sample of code, we created a method called setAge, and we passed the 25 number to it, and it assigned it to the age attribute.

Getting values from attributes using methods

We can also create a method to get the value of an attribute, for example we'll create a method called getAge in the Human class to get the age of the me object.

class Human {
    name;
    age;
    gender;
    height;
    weight;

    constructor(name) {
        this.name = name;
    }

    walk() {
        console.log(`${this.name} is walking`);
    }

    setAge(age) {
        this.age = age;
    }

    getAge() {
        return this.age;
    }
}

const me = new Human("Hasan");

me.setAge(25);

console.log(me.getAge()); // 25

Here we created a method called getAge, and it returned the value of the age attribute.

🎨 Conclusion

In this lesson, we learned about the structure of a class, and we learned how to create a class, and how to create an object from a class, and how to assign values to attributes, and how to create methods, and how to use them.

Please if you are not following with me so far, write in the comments so you can keep up with me.

☕♨️ 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 (Node Js 2023 Channel).

📚 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

Comments

[Mamun Ahmed]

I'm keep up with you.

[Hasan Zohdy]

Great