Classes in JS before learning React

Hello Everyone...👋
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 💬.

---

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

 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.
   

        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.
   

    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. 👇

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

• Explicit Binding : where the function is part of the object. 👇

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.

   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 if you have any doubts regarding this, or any suggestions for me 😊.

Comments

[Christopher Wray]

You can also use getters in your classes like get name() returning the author's name. That way you can call author.name as a property and it will return the same thing as your method getName() example! 😊

[Pavittar Singh]

Please put up some examples on .call, .apply and .bind. Also, a simple example of composition pattern would make it better.

[John Peters]

Nice post. Tx