Understanding JavaScript OOP

What You Will Learn

In this course, you will conceptually explore:

• The fundamental ideas behind Object-Oriented Programming.
• How objects are structured and used in JavaScript.
• The concept and syntax of JavaScript classes (ES6).
• The role and implementation of constructor methods.
• Understanding the 'this' keyword in different contexts.
• The principles and implementation of inheritance.
• Prototypes and how prototypal inheritance works in JavaScript.
• The concept and benefits of encapsulation.
• Understanding and applying polymorphism.
• The idea and importance of abstraction.
• A summary of the key principles of OOP.

Object-Oriented Programming (OOP) is a programming paradigm based on the concept of "objects," which can contain data, in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods).

Key Concepts in OOP:

• Objects: Fundamental building blocks that encapsulate data and behavior.
• Classes: Blueprints or templates for creating objects.
• Inheritance: A mechanism where a new class (subclass/derived class) inherits properties and methods from an existing class (superclass/base class).
• Encapsulation: Bundling data and methods that operate on the data within a single unit (the object), and restricting direct access to some of the object's components.
• Polymorphism: The ability of different objects to respond to the same method call in their own way.
• Abstraction: Simplifying complex reality by modeling classes appropriate to the problem, and working at the level of interfaces rather than concrete implementation details.

Objects are the fundamental building blocks of JavaScript. They can be created in several ways.

Object Literal Notation:

// Creating an object using literal notation
const person = {
  firstName: "Alice",
  lastName: "Smith",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
  }
};

Here, person is an object with properties (firstName, lastName, age) and a method (greet).

Creating Objects with `new Object()`:

// Creating an object using the Object constructor
const car = new Object();
car.brand = "Toyota";
car.model = "Camry";
car.startEngine = function() {
  console.log("Engine started.");
};

This is another way to create objects, although literal notation is more common.

The primary purpose of the constructor is to initialize the object's properties.

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  calculateArea() {
    return this.width * this.height;
  }
}

const rect1 = new Rectangle(10, 5);
console.log(rect1.width); // Output: 10
console.log(rect1.calculateArea()); // Output: 50

The constructor takes arguments (width, height) and assigns them to the object's properties using the this keyword.

The value of this depends on how a function or method is called.

In Methods:

const myObject = {
  propertyName: "My Object",
  logName: function() {
    console.log(this.propertyName); // 'this' refers to myObject
  }
};
myObject.logName(); // Output: My Object

In Constructors (and Classes):

class Circle {
  constructor(radius) {
    this.radius = radius; // 'this' refers to the new Circle object being created
  }

  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}
const circle1 = new Circle(5);
console.log(circle1.radius); // Output: 5

Understanding how this behaves is crucial for working with objects and classes in JavaScript.

Inheritance promotes code reuse and the creation of hierarchical relationships between classes.

class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  start() {
    console.log("Vehicle started.");
  }
}

class Car extends Vehicle {
  constructor(make, model, numDoors) {
    super(make, model); // Calls the constructor of the superclass
    this.numDoors = numDoors;
  }

  honk() {
    console.log("Honk honk!");
  }
}

const myCar = new Car("Honda", "Civic", 4);
myCar.start(); // Inherited from Vehicle
myCar.honk();
console.log(myCar.make); // Inherited property

The extends keyword is used to establish inheritance. super() is called in the subclass constructor to invoke the superclass constructor.

Every object in JavaScript has an internal link to another object called its prototype. When you try to access a property of an object, and the object doesn't have that property, JavaScript looks up the prototype chain until it finds the property or reaches the end of the chain (which is usually `null`).

// Creating an object
const animal = {
  sound: "Generic animal sound",
  makeSound: function() {
    console.log(this.sound);
  }
};

// Creating another object that inherits from 'animal'
const cat = Object.create(animal);
cat.sound = "Meow";
cat.makeSound(); // Output: Meow (overrides the prototype's property)

// Accessing a property from the prototype
console.log(cat.__proto__.sound); // Output: Generic animal sound

Classes in ES6 provide a more convenient syntax for working with prototypes, but the underlying mechanism is still prototypal inheritance.

Encapsulation helps to hide the internal implementation details of an object and protect its data from direct external modification. While JavaScript doesn't have strict access modifiers like `private` in some other OOP languages, conventions and closures are used to achieve encapsulation.

// Encapsulation using closures (older approach)
function createCounter() {
  let count = 0; // Private variable

  return {
    increment: function() {
      count++;
    },
    decrement: function() {
      count--;
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // Output: 1
// console.log(counter.count); // Undefined (private due to closure)

In modern JavaScript classes, you can use naming conventions (e.g., prefixing with an underscore _) to indicate intended privacy, although it's not enforced by the language itself.

Polymorphism allows you to write more flexible and adaptable code.

class Shape {
  calculateArea() {
    console.log("Area calculation not defined for this shape.");
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  calculateArea() {
    return Math.PI * this.radius * this.radius;
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }

  calculateArea() {
    return this.width * this.height;
  }
}

function printArea(shape) {
  console.log(`Area: ${shape.calculateArea()}`);
}

const myCircle = new Circle(5);
const myRectangle = new Rectangle(10, 5);

printArea(myCircle); // Calls Circle's calculateArea
printArea(myRectangle); // Calls Rectangle's calculateArea

The printArea function can work with different Shape objects, and each object's calculateArea method behaves according to its specific type.

Abstraction helps to manage complexity by focusing on the "what" an object does rather than the "how" it does it.

// Abstraction example
class DataFetcher {
  constructor(url) {
    this.url = url;
  }

  fetchData() {
    console.log("Fetching data...");
    // Complex logic to make an HTTP request and process data (abstracted away)
    const data = this._processResponse(this._makeRequest(this.url));
    return data;
  }

  _makeRequest(url) {
    // Implementation details of making an HTTP request (hidden)
    console.log(`Making request to: ${url}`);
    return "Raw data from the server";
  }

  _processResponse(rawData) {
    // Implementation details of processing the raw data (hidden)
    console.log("Processing raw data...");
    return "Processed data";
  }
}

const fetcher = new DataFetcher("https://api.example.com/data");
const data = fetcher.fetchData();
console.log(data); // The user only interacts with fetchData, not the internal details

The user of the DataFetcher class only needs to call fetchData() without needing to know the intricate details of making the request and processing the response (which are "abstracted away" in private-like methods).

• Objects: Encapsulate data and behavior.
• Classes: Blueprints for creating objects.
• Inheritance: Enables code reuse and hierarchical relationships.
• Encapsulation: Protects data and hides implementation details.
• Polymorphism: Allows objects to respond differently to the same method call.
• Abstraction: Simplifies complexity by showing only necessary information.