Classes in JS before learning React
Tags: javascript, webdev, react, beginners
Published: 2021-09-06 11:57:18

Hello Everyone...:wave:
In this Post, we briefly look at object-oriented programming concepts in JavaScript like classes and objects. Do visit previous articles of this series. And feel free to suggest me new topic to talk about in the :speech_balloon:.

-----

#What is a class?
A class is a kind of separate mini-program with a context of its own — __methods (functions)__ and __properties (variables)__. Disparate _instances_ _(called objects)_ of a class can be created and treated as variables.

###Create a JavaScript class

```javascript
 class Author {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }

  getName() {
    return `${this.firstname} ${this.lastname}`;
  }
}

//A new object can be created with the new keyword and 
var me = new Author('Rajshree', 'vats'); 
//the ‘constructor’ of the class can be called at the same time

console.log(me.getName());
```
Various class methods such as `getName()` can be used to read or write the `properties` of the `object`. The `console.log()` method prints whatever is passed as an argument to it.

###Object Creation in JavaScript
JavaScript objects are containers for named values, called __properties__ and __methods__. Objects are variables too. But objects can contain many values. 
Here, we define two objects `student1` and `students2`. 
1. The named values, in JavaScript objects, are called 
      properties.
     ```javascript
         const student1 = {   //common practice is to use `const`
         Name:"Rajshree",             
         Roll : '800',
         Cgpa : '8.5'
         };
 ```
2. An object method is an object property containing a function 
   definition.
    ```javascript
     let student2 = {
     Name:"Rajshree",
     Roll : '800',
     Cgpa : '8.5',
     printScore() {
     console.log(this.Cgpa)
     }
    }
```
-----
##The `this` keyword
The value of this depends on what context it is used in. So, if it is used in a function, it’s value will depend on how that function is invoked.
The ways `this` can be assigned :
* Implicit Binding : When the dot notation is used to call a 
  function. :point_down:
  ```javascript 
getName() {
    return `${this.firstname} ${this.lastname}`;
  }
```
* Explicit Binding : where the function is part of the object. :point_down:
```javascript 
var printName = function() {
  console.log(`My name is ${this.firstname} ${this.lastname}`);
};
var me = new Author('Rajshree', 'vats');
printName.call(me);
```
`.call()` can be used to explicitly bind a function to an object and `.apply()` to Pass all the arguments in one array.
* `bind()` :  `.bind()` sets a this context and returns a new function with a bound this context.
```javascript
   var printName = function() {
  console.log(`My name is ${this.firstname} ${this.lastname}`);
   };

var me = new Author('Rajshree', 'vats');

// Here we bind the me object to the printName() and get a new function newPrintName()
const newPrintName = printName.bind(me);
```
* Global Context : When `this` is used outside of any context such as a `class`, `function`, or `object`, it refers to the global object.

* Arrow functions and `this` :  Methods like `apply()`, and `bind()`, etc. don’t have any effect on `this` in an arrow function in JavaScript. The value of `this` remains the same as it was when the function was called.

-----

##Composition
Object composition, in programming, is just classes containing instances of other classes as attributes to implement the desired functionality instead of inheriting classes. How that is done in React and JavaScript is somewhat advanced.
##Inheritance 
Inheritance enables new classes to take on the properties and methods of existing classes. A class that another class inherits is called a superclass or base class. A class that inherits from a superclass is called a subclass or derived class.

However, inheritance is somewhat limited compared to class composition. composition makes the code dynamic and adaptable to change, it also introduces fewer bugs.

-----

###This was all for today!!! 
I hope you liked it. Connect to me on [Twitter](https://twitter.com/RajshreeVatsa) if you have any doubts regarding this, or any suggestions for me :blush:.