Javascript OOP-1 (Classes and Objects) -

Hello Guys today i am going to discuss OOP(Object Oriented Programming) in javascript.It is one of the Important concept in any programming langauge and makes your code cleaner , reusable and safer.

Lets get started...

Classes -

• In JavaScript, classes are the special type of functions. We can define the class just like function declarations and function expressions.

• The JavaScript class contains various class members within a body including methods or constructor.

• A class can be defined by using a class declaration. A class keyword is used to declare a class with any particular name. According to JavaScript naming conventions, the name of the class always starts with an uppercase letter.

Example -

class Order{
     let orderNo = 1;
     let orderName = "Burger";
    display(){
     return "Order no. - " + orderNo + " " + "Order Name - " + 
     orderName;
    }
}
let object1 = new Order();
console.log(object1.display());

Output -

Order no. - 1 Order Name - Burger

Explaination -

• Here we have declared a class called "Order" and inside it we have created a method called "display()".
• Then inside display we have created two variables called orderNo with value 1 and orderName with value "Burger" and return their value using return statment.
• Then we created the object of Order class (we will discuss Objects after this topic) and then called the display() method using the object we have created using "." dot operator.

Objects -

• A javaScript object is an entity having state and behavior (properties and method).
• JavaScript is an object-based language. Everything is an object in JavaScript.

• JavaScript is template based not class based. Here, we don't create class to get the object. But, we direct create objects.

• There are 3 ways to create objects-
  1 Object Literal -
  

let order = {orderNo : 1 , orderName : "Burger"};

Output -

1 Burger

2 By using new keyword -

let order =  new Object();
order.orderNo = 1;
order.orderName = "Burger";

Output -

1 Burger

3 By using an Object constructor -
Here, you need to create function with arguments. Each argument value can be assigned in the current object by using "this" keyword.

function order(orderNo , orderName){
this.orderNo = orderNo;
this.orderName = orderName;
}

newOrder = new order(1 , "Pizza");

Output-

1 Pizza

Object with Class -

We can create objects of classes as objects are the instance of class and class is the blueprint of objects.

Example -

class Superhero{
    powers(){
        let heroName = "Superman";
        let superPower = "Super strength , Flying and Heat Vision";

        return "Hero Name - " + heroName + 
" Super Powers - " + superPower; 
    }
}

let Character = new Superhero();
console.log(Character.powers());

Output-

Hero Name - Superman 
Super Powers - Super strength , Flying and Heat Vision

• As you can see we have created a class named "Superhero" and then created its object using new keyword and stored it in a variable called "Character".

THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.

^^You can help me by some donation at the link below Thank you👇👇 ^^

☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well

1. https://dev.to/shubhamtiwari909/animation-with-react-spring-3k22

2. https://dev.to/shubhamtiwari909/text-to-speech-in-reactjs-52ml

3. https://dev.to/shubhamtiwari909/best-vs-code-extensions-for-web-development-2lk3

4. https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj

Comments

[Ernesto Jara Olveda]

So you Is saying that a class could include methods or constructor. So a class can AND cannot have constructor? Interesting.

heroName and powerName are adjectives, so they should be attributes of the class, not local variables of a methods.

[Shubham Tiwari]

A class body can contain methods and constructors isn't right ?

[Ernesto Jara Olveda]

The constructor() method is called automatically when a class is initiated, and it has to have the exact name "constructor", in fact, if you do not have a constructor method, JavaScript will add an invisible and empty constructor method.

[Shubham Tiwari]

By saying include , i meant the same
An invisible constructor will get invoked automatically if we don't create one

[Shubham Tiwari]

With the advancement in technology day by day , OOP will lose its reputation like procedural

[Shubham Tiwari]

I always use functional approach and these corrections helped me learn some new things thank you for that.
I just thought classes and objects are common topics that's why i tried to explain them

[Prakash_DevOps]

Nice snippets and explanation