Mastering Object-Oriented Programming in JavaScript

In simple terms, OOP in JavaScript helps you structure your code in a more organized and logical way by creating objects that represent real-world entities or concepts. These objects can have characteristics (like color or size) and actions (like moving or changing). By using OOP, you can create code that is easier to manage, understand, and reuse, making your JavaScript programs more efficient and scalable.

Let's explore the key terms in Object-Oriented Programming (OOP) in JavaScript.

• Classes: In JavaScript, we can use the "class" keyword to define classes, which serve as blueprints for creating objects that represent real-life entities.

  Inside classes, we define two essential components: properties and behavior.

  • Properties: In technical terms, properties in a class are called data members. They represent attributes or information related to an object. Examples of data members include name, description, price, rating, and more. They store specific values that describe an object's characteristics.

  • Behavior: In technical terms, the behavior of an object is referred to as member functions. These member functions define the actions or operations that an object can perform. Examples of member functions include behaviors like update, buy, and display.

• Objects: In JavaScript, objects are real instances that represent specific entities or concepts. Objects are created from classes or constructed directly using object literals.

• Constructor: A constructor function is a special function that is used to create and initialize objects. It serves as a blueprint or template for creating new instances of an object with predefined properties and behaviors.

      class Product{
         constructor(n,p) {
  
          console.log("constructor called");
          this.name = n;
          this.price = p;
          this.display = function () {
            console.log(this.name, this.price);
            }
          }
         // members function
         displayProduct() {
          }
         }
        let iphone = new Product("Iphone 11", 5000000);
        let macbook = new Product("Macbook air", 110000);
        let p1 = new Product("Ibook air", 340000);
  
        console.log(iphone, macbook);
        console.log(typeof macbook);
        p1.display();
  

The Power of 'this' Keyword in JavaScript:

• In JavaScript, the behavior of the 'this' keyword differs from that in languages like C++ or Java. In JavaScript, the 'this' keyword refers to the calling site, meaning it represents the object or context from which a function or class is invoked.

The Power of 'new' Keyword in JavaScript:

• Beyond constructors and classes, it transforms functions into constructors, allowing object creation and fresh execution contexts. This versatility enables advanced techniques like factory functions and prototypal inheritance.

Unveiling the 4-Step Execution Process of the 'new' Keyword in JavaScript.

Step 1: Creating Fresh JavaScript Objects from Scratch with the 'new' Keyword.

Step 2: The Intricate Process of Object Linking with the 'new' Keyword.

Step 3: When the 'new' keyword is used, it calls the function with the 'this' property assigned to the previously created empty object.

Step 4: As the function execution begins, the 'this' keyword references the calling site, providing access to the object or context from which the function was called.

• Finally, if the function does not explicitly return a specific object, it automatically returns the 'this' object. However, if a different object is explicitly returned, that object takes precedence and is returned instead.

Function Syntax vs. Class Syntax in JS

• Function syntax: No 'new' Keyword is Required, but Behaves as a Normal Function with an Undefined Return.

    let x = Product(4, 3);
  
    function Product(a, b) {
    // Function returns the product of a and b
      return a * b;
  

• Class syntax: Class Constructors: Mandatory 'new' Keyword Usage for JavaScript Developers.

    class Product{
     constructor(n, p) {
  
       this.name = n;
       this.price = p;
       }
    }
  
    let iphone = new Product("Iphone 11", 5000000);
    let macbook = new Product("Macbook air", 110000);
  
    console.log(iphone, macbook);
    console.log(typeof macbook);
  

  Exploring JavaScript Prototypes

• Prototypes serve as the mechanism through which JavaScript objects inherit features from one another.

• A prototype is an actual object that serves as a property, and any modifications made to it will be reflected in previously created objects as well

    class Category {
     constructor(c) {
      this.Categoryname = c;
     }
  
     getCategoryName() {
      console.log("category is", this.categoryname);
     }
    }
  
    class Product extends Category{
     constructor(n, p, c) {
      super(c);
       this.name = n;
      this.price = p;
  
     }
  
     display() {
      console.log("Details of the product are");
      console.log("Name", this.name);
      console.log("price", this.price);
      this.getCategoryName();
     }
    }
  
    let p = new Product("iphone", 100000, "electronic");
  

• Every object possesses an inherent property known as its prototype. The prototype, being an object itself, establishes a prototype chain by having its own prototype. This chain continues until a prototype with a null prototype is encountered, signifying the end of the chain.