What is JavaScript Class?

 Class in javascript: A class is a blue print for creating objects. We can create with “class” keyword and need to add “constructor” method, if you will not add “constructor” method it will create a blank constructor method when it initialize. Class have property and methods, property like a variable and methods be a javascript functions.

Need to create class then create new object then access it, we can not access before creating class as we access function. As below example:

<script>

        class Add {

            constructor(width, length) {

                this.area = width * length;

            }

        }

 

        const add = new Add(20, 30);

        console.log(add.area);

 // Add();

//console.log(Add());

 

        // "TypeError: Class constructor Add cannot be invoked without 

'new' instance"

 

        // Out put will be 

        // 600

    </script>

 

Also we can write class as “class expression”:

    <script>

        const Add = class {

            constructor(width, length) {

                this.area = width * length;

            }

        }

 

        const add = new Add(20, 30);

        console.log(add.area); // Out put will be 600

    </script>

 

Javascript Class example that how we can access property and methods:

<script>

        class Person {

            name = 'Sheo';

            gender = 'Male';

            constructor() {

                this.lastName = 'Sagar';

            }

 

            PrintMyName() {

                this.edu = 'MA';

                this.Contact = '9313520000';

                this.MyWork = function () {

                    console.log('My work');

                }

                console.log(this.name + ' ' + this.lastName);

            }

 

        }

 

        const person = new Person();

        person.PrintMyName();// "Sheo Sagar"

        console.log(person.lastName);// "Sagar"

 

        const personSS = new Person();

        personSS.PrintMyName(); // "Sheo Sagar"

        console.log(personSS.name); // "Sheo"

        console.log(personSS.lastName); // "Sagar"

        console.log(personSS.gender);// "Male"

        console.log(personSS.edu);// "MA"

        console.log(personSS.Contact); // "9313520000"

        personSS.MyWork(); // "My work"

       </script>

 

 Javascript class inheritance: we can inherit another class in the any class we call it with “extends” keywords. Most important things that when we extends any class then need to use super() method in the constructor otherwise it will not access any property or methods. As below example for the Class inheritance:

<script>

        class MyFriends {

            friend = 'Raj';

        }

 

        class Person extends MyFriends {

            name = 'Sheo';

            gender = 'Male';

            constructor() {

                super();

                this.lastName = 'Sagar';

            }

 

            PrintMyName() {

                this.edu = 'MA';

                this.Contact = '9313520000';

                this.MyWork = function () {

                    console.log('My work');

                }

                console.log(this.name + ' ' + this.lastName);

            }

 

        }

 

        //const person = new Person();

        //person.PrintMyName();

        //console.log(person.lastName);

 

        const personSS = new Person();

        personSS.PrintMyName();

        console.log(personSS.name);

        console.log(personSS.lastName);

        console.log(personSS.gender);

        console.log(personSS.edu);

        console.log(personSS.Contact);

        console.log('Extended property from the class MyFriends: ' 

+ personSS.friend);

        personSS.MyWork();

 

        // Output with extedned class

        // "Sheo Sagar"

        // "Sheo"

        // "Sagar"

        // "Male"

        // "MA"

        // "9313520000"

        // "Extended property from the class MyFriends: Raj"

        // "My work"

 

    </script>

 

How to use getter and setter in the Javascript Class?

We need to get() and set() methods then we need to access as a variable as as below example:

<script>

        class Animal {

             constructor(legs) {

                this.name = legs;

            }

 

            get newName() {

                return this.name;

            }

 

            set newName(ss) {

                this.name = ss;

            }

 

        }

 

        const animal = new Animal('Cow');

        console.log(animal.name);

        // OutPut: "Cow"

 

        animal.newName = 'Camel';

        console.log(animal.name);

    // OutPut: "Camel"

    </script>

 

 What is static keyowd in the Javascript Class?

Static keyword is the reserved keyword, if we need to access it then we access without creating new objects and also we can not use as a console need to use return keyword. As below example:

<script>

        class Add {

            constructor(width, len) {

                this.area = width * len;

            }

 

            static Perimeter() {

                return 'Test';

                //console.log('TEST');

            }

 

            Subtract() {

                // return 'Subtract Returned Value';

                console.log('Subtract Returned Value');

            }

        }

 

        const add = new Add(8, 9);

 

        //console.log(Add.Perimeter());

 

        console.log(Add.Perimeter());

 

        console.log(add.area);

 

        //add.Perimeter();

        //Output : "TypeError: add.Perimeter is not a function"

 

        add.Subtract();

        // out put "Subtract Returned Value"

 

    </script>