Javascript classes and object

 

   JavaScript classes and object








    JavaScript class-


    JavaScript classes, introduced in ES6 (ECMAScript 2015), 

    provide a more structured and object-oriented way to create objects with shared properties and methods, acting as templates JavaScript arrayor blueprints.

    JavaScript Classes are templates for JavaScript Objects.


    JavaScript Class Syntax

    Use the keyword class to create a class.

    Always add a method named constructor():


    Syntax


    class ClassName {
      constructor() { ... }
    }



    Example

    class Car {
      constructor(name, year) {
        this.name = name;
        this.year = year;
      }
    }



    Using a Class

    When you have a class, you can use the class to create objects:


    Example -

    const myCar1 = new Car("Ford"2014);
    const myCar2 = new Car("Audi"2019);


    The Constructor Method

    The constructor method is a special method:

    • It has to have the exact name "constructor"
    • It is executed automatically when a new object is created
    • It is used to initialize object properties

    If you do not define a constructor method, JavaScript will add an empty constructor method.


    Class Methods

    Class methods are created with the same syntax as object methods.

    Use the keyword class to create a class.

    Always add a constructor() method.

    Then add any number of methods.


    Syntax


    class ClassName {
      constructor() { ... }
      method_1() { ... }
      method_2() { ... }
      method_3() { ... }
    }




    Example


    <!DOCTYPE html>

    <html>

    <body>

    <h1>JavaScript Class Methods</h1>

    <p>How to define and use a Class method.</p>


    <p id="demo"></p>


    <script>

    class Car {

      constructor(name, year) {

        this.name = name;

        this.year = year;


      }

      age() {

        const date = new Date();

        return date.getFullYear() - this.year;

      }

    }


    const myCar = new Car("Ford", 2014);

    document.getElementById("demo").innerHTML =

    "My car is " + myCar.age() + " years old.";

    </script>



    Output

    JavaScript Class Methods

    How to define and use a Class method.

    My car is 11 years old.


    Object


    An object in JavaScript is a specific instance of a class. It contains its own set of data (properties) and can use the methods defined in its class. Multiple objects can be created from the same class, each having unique values for their properties.



    JavaScript Object Properties

    In JavaScript the members inside the object which are the key: values are called Object properties. For example, in the above code, name is an object property (unique to each instance), and sound is a class property (shared by all instances of the class).

    To Access Object Properties:

    1. Using dot Notation: 


    Syntax:

    object_name.key_1

    2. Using bracket Notation: 

    Syntax:

    object_name["key_1"]

    JavaScript Nested Objects: In this case, an object contains another object inside it. 

    Example:


    const dog1 = {
        name: "Rayne",
        breed: "Husky"
    };

    const dog2 = {
        name: "Buddy",
        breed: "Beagle"
    };


    JavaScript Object Methods

    In JavaScript, we can add methods to Objects.

    Example: In the given example we can see how we can apply Javascript nested objects and also use the different accessing methods.


    const Dog = {
        breed: 'Husky',
        color: 'Gray & White',
        details: {
            height: '18 inches',
            weight: '30 pounds'
        }
    };

    console.log(Dog.breed);              // Husky
    console.log(Dog.details.height);     // 18 inches
    console.log(Dog["color"]);           // Gray & White
    console.log(Dog.details["weight"]);  // 30 pounds


    Output:

    Husky
    18 inches
    Gray & White
    30 pounds



    READ MORE<< JavaScript Array
    READ MORE<< Introduction of JavaScript 
    Previous 
    NEXT 

    Post a Comment

    0 Comments