3-JS OOP: Class Structure
Tags: javascript, oop, typescript
Published: 2022-11-18 06:10:52

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

## 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.

```js
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`.

```js
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.

```js
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.

```js
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.

```js
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.

```js
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.

```js
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.

```js
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](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/pb2vmdfhGf) 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](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)