Javascript OOP-1 (Classes and Objects) -

Shubham Tiwari - Jan 19 '22 - - Dev Community

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

Output -

Order no. - 1 Order Name - Burger
Enter fullscreen mode Exit fullscreen mode

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

Output -

1 Burger
Enter fullscreen mode Exit fullscreen mode

2 By using new keyword -

let order =  new Object();
order.orderNo = 1;
order.orderName = "Burger";
Enter fullscreen mode Exit fullscreen mode

Output -

1 Burger
Enter fullscreen mode Exit fullscreen mode

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

Output-

1 Pizza
Enter fullscreen mode Exit fullscreen mode

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

Output-

Hero Name - Superman 
Super Powers - Super strength , Flying and Heat Vision
Enter fullscreen mode Exit fullscreen mode
  • 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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player