Javascript OOP-1 (Classes and Objects) -
Tags: javascript, programming, productivity, oop
Published: 2022-01-19 15:32:45

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 - 
```javascript
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  - 
```javascript 
let order = {orderNo : 1 , orderName : "Burger"};
```
####Output - 
```
1 Burger
```

2 By using new keyword - 
```javascript
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.

```javascript
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 - 
```javascript
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