Differences between Object-Oriented Programming (OOP) and Functional Programming (FP) - in JavaScript and TypeScript

Object-Oriented Programming (OOP) and Functional Programming (FP) are two of the most popular programming paradigms. While both are used to solve complex problems, they approach these problems in different ways. In this post, I will explore the differences between OOP and FP and illustrate these differences with code examples in JavaScript and TypeScript.

Object-Oriented Programming (OOP)

OOP is a programming paradigm that is based on the concept of "objects." Objects are instances of classes that contain data (properties) and behavior (methods). In OOP, objects interact with each other to solve problems. OOP provides a way of organizing and structuring code by encapsulating data and behavior into objects.

• JavaScript OOP

Here's an example of a simple class in JavaScript that represents a person:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getName() {
    return this.name;
  }

  setName(name) {
    this.name = name;
  }

  getAge() {
    return this.age;
  }

  setAge(age) {
    this.age = age;
  }
}

const person = new Person("Esther White", 30);
console.log(person.getName()); // Output: "Esther White"
console.log(person.getAge()); // Output: 30
person.setName("Jane Doe");
person.setAge(31);
console.log(person.getName()); // Output: "Esther White"
console.log(person.getAge()); // Output: 31

In this example, we define a Person class with properties name and age, and methods getName, setName, getAge, and setAge. The constructor method is used to create new instances of the Person class.

• TypeScript OOP

Here's an example of a simple class in TypeScript that represents a person:

class Person {
  private name: string;
  private age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  public getName(): string {
    return this.name;
  }

  public setName(name: string): void {
    this.name = name;
  }

  public getAge(): number {
    return this.age;
  }

  public setAge(age: number): void {
    this.age = age;
  }
}

const person = new Person("Esther White", 30);
console.log(person.getName()); // Output: "Esther White"
console.log(person.getAge()); // Output: 30
person.setName("Jane Doe");
person.setAge(31);
console.log(person.getName()); // Output: "Esther White"
console.log(person.getAge()); // Output: 31

In this example, we define a Person class with properties name and age, and methods getName, setName, getAge, and setAge. The properties are declared as private, meaning that they can only be accessed within the Person class. The methods are declared as public, meaning that they can be called from outside the Person class.

The constructor method is used to create new instances of the Person class. The constructor takes two parameters: name and age, which are used to initialize the name and age properties, respectively.

The getName and getAge methods return the values of the name and age properties, respectively. The setName and setAge methods are used to set the values of the name and age properties, respectively.

Finally, we create an instance of the Person class using the new operator and assign it to the variable person. We then use the methods of the person instance to get and set the values of the name and age properties.

Functional Programming (FP)

FP, on the other hand, is a programming paradigm that emphasizes the use of pure functions and immutability. In FP, functions are used to solve problems and data is treated as immutable. This leads to code that is more predictable, easier to understand, and less prone to errors.

• JavaScript FP

Here's an example of a simple function in JavaScript that calculates the factorial of a number:

function factorial(n) {
  if (n === 0) {
    return 1;
  }

  return n * factorial(n - 1);
}

console.log(factorial(5)); // Output: 120

In this example, we define a function factorial that calculates the factorial of a number n. The function uses recursion to calculate the factorial.

• TypeScript FP

Here's an example of a simple function in TypeScript that calculates the factorial of a number:

function factorial(n: number): number {
  if (n === 0) {
    return 1;
  }

  return n * factorial(n - 1);
}

console.log(factorial(5)); // Output: 120

In this example, we define a function factorial that calculates the factorial of a number n. The function uses recursion to calculate the factorial. The function's input and return types are declared using type annotations.

Differences between OOP and FP

Now that we have seen examples of OOP and FP, let's compare and contrast the two programming paradigms.

State and mutability

One of the biggest differences between OOP and FP is how they handle state and mutability. In OOP, objects maintain state and can change their state over time. This can make it difficult to reason about the behavior of objects, especially in large systems. In FP, data is treated as immutable, meaning that once data is created, it cannot be changed. This makes it easier to reason about the behavior of functions and to avoid bugs.

Encapsulation and Abstraction

In OOP, encapsulation and abstraction are used to hide the implementation details of objects and to provide a public interface for interacting with objects. This makes it easier to change the implementation of an object without affecting the rest of the system. In FP, functions are treated as pure, meaning that they do not have side effects and that their behavior can be predicted based solely on their inputs.

Composition over inheritance

Another difference between OOP and FP is how they approach code reuse. In OOP, code reuse is achieved through inheritance, where objects can inherit properties and methods from their parent class. In FP, code reuse is achieved through composition, where functions can be composed to create new functions. Composition is considered to be a more flexible and scalable approach to code reuse, as it allows for a higher degree of modularity and reuse of smaller, reusable functions.

Conclusion

In conclusion, OOP and FP are two popular programming paradigms that approach problem-solving in different ways. OOP is based on the concept of objects, while FP is based on the use of pure functions and immutability. Both paradigms have their strengths and weaknesses, and the choice between the two depends on the problem at hand and the preferences of the developer.

In JavaScript and TypeScript, developers can use either OOP or FP, or a combination of the two, to solve problems. The key is to understand the strengths and weaknesses of each paradigm and to choose the one that is best suited for the problem at hand.

I hope this post has helped you understand the differences between OOP and FP in JavaScript and TypeScript. Happy coding!