JavaScript: Classes Part-1
Tags: javascript, webdev, beginners, programming
Published: 2021-04-01 17:24:36

Classes are special functions that are used as template for creating objects. Class comprises of variables(data) and function(methods) that use the date to perform some task. If the class contain a constructor method, it is automatically called when we create object using the *new* operator. Constructor creates properties of the object using variables and methods passed to it (constructor code) in the class declaration and assigns them with the values passed during object creation, there can be only one method with name "constructor". (We use the *new* operator to create object.)  Remember class can be accessed only after class declaration. Like modules class body is executed in strict mode. Basic class syntax is given below.

Classes came into JavaScript in the ES6 specification.
```javascript
class MyClass {                     //class name
                    
  constructor() {      // class methods
      //constructor code 
  }  

  method1() {
     // code to execute 
  }

  method1() {
     // code to execute 
  }
  ...
}

let obj1 = new Myclass(val1, val2...);  // Object creation
```

Let's look at an example of a class in JavaScript.
```javascript
// Class Declaration
class Name {
    constructor(fname, lname) {
        this.fname = fname;
        this.lname = lname;
    }

    printName(){
        console.log(`${this.fname} ${this.lname}`);
    }
}

let myName = new Name("kiran", "raj"); 
myName.printName();                      // kiran raj
let myName1 = new Name("John", "Doe"); 
myName1.printName();                     // John Doe
```
The above code define a class using class declaration method. We can create class using the class expression method. Class expression methods are of two types *named* and *unnamed*. Example of class expression method is provided below. 
```javascript
// Class Expression unnamed
let FriendsName = class {
    constructor(fname, lname) {
        this.fname = fname;
        this.lname = lname;
    }

    printName(){
        console.log(`${this.fname} ${this.lname}`);
    }
}

let Friend1 = new FriendsName("kiran", "raj"); 
Friend1.printName();                      // kiran raj
let Friend2 = new FriendsName("John", "Doe"); 
Friend2.printName();                      // John Doe

// Class expression named
let EnemyName = class FakeFriend{
    constructor(fname, lname) {
        this.fname = fname;
        this.lname = lname;
    }

    printName(){
        console.log(`${this.fname} ${this.lname}`);
    }
}

// let enemy1 = new FakeFriend("kiran", "raj"); 
// Uncaught ReferenceError: FakeFriend is not defined

let enemy2 = new EnemyName("John", "Doe"); 
enemy2.printName();                     // John Doe
``` 

Let's look at te code below. THe code contain a class Admin and we created an object kiran using the Admin class. The Admin class contain a constructor which sets the *fname*, *lname* with values provided during the object creation and sets *isAdmin* to true. The Admin class has three methods `printName`, `isAdmin` and `setUser`.

```javascript
class Admin{
    constructor(fname, lname) {
        this.fname = fname;
        this.lname = lname;
        this.isAdmin = true;
    }

    printName(){
       console.log(`${this.fname} ${this.lname}`);
    }
    isAdmin(){
        if(this.isAdmin){
             console.log("The user is admin");
        } else {
             console.log("The user is admin");
        }
    }
    setUser(){ 
        this.isAdmin = false;
    }
}

let kiran = new Admin("kiran", "raj");
```
Let's look at *typeof* Admin and kiran. 
```javascript
console.log(typeof Admin);  //function
console.log(typeof kiran);  //object
``` 
Typeof *admin* is function and *typeof* kiran is object, we already know that class is a "special function" and it is confirmed by the typeof operator.

When we declare a class the class methods are stored in the *className.prototype*. In JavaScript objects inherit features from one another using prototypes. When an object is created using new operator the new object get the methods from prototype of the class which used to create the object. Look at the code below, from the code we will understand that Admin stores the class methods in the prototype, which can be accessed by object kiran when it is created using new operator. 
```javascript
console.log(Admin.prototype);
// {constructor: ƒ, printName: ƒ, isAdmin: ƒ, setUser: ƒ}
console.log(Admin === Admin.prototype.constructor); //true
```
Object.getOwnPropertyNames() returns the array containing all the properties of the given Object.

```javascript
console.log(Object.getOwnPropertyNames(Admin));
//["length", "prototype", "name"]

console.log(Object.getOwnPropertyNames(kiran)); 
//["fname", "lname", "isAdmin"]

console.log(Object.getOwnPropertyNames(Admin.prototype)); 
//["constructor", "printName", "isAdmin", "setUser"]

```

[JavaScript Classes: Part2- Inheritance](https://dev.to/kiranrajvjd/javascript-classes-part-2-27al)
[JavaScript Classes: Part3- Getters and Setters](https://dev.to/kiranrajvjd/javascript-classes-part-3-186c)