DEV Community: Akram Mahmoud

Mutable or Immutable: Understanding JavaScript's Yin and Yang

Akram Mahmoud — Mon, 01 May 2023 16:21:16 +0000

As a JavaScript developer, understanding the concepts of mutability and immutability is crucial. These concepts refer to the ability of an object to be changed or not. Mutability means that an object can be altered, while immutability means that an object cannot be changed once it is created.

Let's explore these concepts further and see how they can affect our code.

Mutability

In JavaScript, most objects are mutable by default. This means that you can change their properties, add new properties, or even delete properties. For example, consider the following code:


let person = {
  name: "John",
  age: 30,
};

person.age = 31;
console.log(person);

In this example, we are changing the value of the age property of the person object. This is possible because objects in JavaScript are mutable.

While mutability can be useful in certain cases, it can also lead to unexpected behavior. Consider the following code:

let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(4);

console.log(arr1); // Output: [1, 2, 3, 4]

In this example, we are creating two arrays arr1 and arr2. We then assign arr1 to arr2, which means that they both refer to the same object. We then add a new element to arr2, which also modifies arr1 because they are the same object. This can lead to unexpected bugs in our code.

Immutability

Immutability, on the other hand, means that an object cannot be changed once it is created. In JavaScript, primitive types such as strings and numbers are immutable. This means that you cannot change their value once they are created.

For example, consider the following code:

let str = "Hello";
str[0] = "h";
console.log(str); // Output: "Hello"

In this example, we are trying to change the first character of the str variable from "H" to "h". However, since strings are immutable in JavaScript, this has no effect on the value of str.

Immutability can be useful in certain cases because it can help prevent unexpected changes to our code. For example, consider the following code:

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4];

console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3, 4]

In this example, we are creating a new array arr2 by using the spread operator (...) to copy the elements of arr1 and adding a new element to the end. This creates a new array and leaves the original arr1 unchanged.

Conclusion

Understanding the concepts of mutability and immutability is important for writing reliable and bug-free code in JavaScript. While mutability can be useful in certain cases, it can also lead to unexpected behavior and bugs. Immutability, on the other hand, can help prevent unexpected changes to our code and make it more reliable.

[Design Pattern] Chain of responsibility in Typescript with real world example

Akram Mahmoud — Fri, 28 Apr 2023 18:07:49 +0000

The Chain of Responsibility design pattern is a behavioral pattern that allows for a chain of objects to handle requests.

Each object in the chain has the ability to either handle the request or pass it along to the next object in the chain.

This pattern is useful when there are multiple objects that can handle a request and the object that handles the request needs to be determined at runtime.

It promotes loose coupling between the sender of the request and the receiver, and it provides a way to reduce the dependency on specific objects.

However, care must be taken to avoid creating very long chains, as this can impact performance and make the code difficult to maintain.b

real-world example of the Chain of Responsibility pattern in TypeScript:

Suppose you're building an online store that sells various products. You want to implement a system for applying discounts to orders based on the type of products being purchased. You have the following product types:

Electronics
Books
Clothing
Toys
You want to apply the following discounts based on the product type:

Electronics: 10% discount
Books: 15% discount
Clothing: 20% discount
Toys: no discount

here's the same example code without using the Chain of Responsibility design pattern:


class DiscountCalculator {
  public calculateDiscount(products: string[], originalPrice: number): number {
    let discount = 0;

    if (products.includes('Electronics')) {
      discount = originalPrice * 0.1;
    } else if (products.includes('Books')) {
      discount = originalPrice * 0.15;
    } else if (products.includes('Clothing')) {
      discount = originalPrice * 0.2;
    }

    return originalPrice - discount;
  }
}

const calculator = new DiscountCalculator();

console.log(calculator.calculateDiscount(['Electronics', 'Clothing'], 100)); // Output: 72
console.log(calculator.calculateDiscount(['Books'], 100)); // Output: 85
console.log(calculator.calculateDiscount(['Toys'], 100)); // Output: 100
console.log(calculator.calculateDiscount(['Books', 'Clothing'], 100)); // Output: 64

To implement this system, you could use the Chain of Responsibility pattern as follows:

interface DiscountHandler {
  setNext(handler: DiscountHandler): DiscountHandler;
  applyDiscount(products: string[], originalPrice: number): number;
}

abstract class AbstractDiscountHandler implements DiscountHandler {
  private nextHandler: DiscountHandler;

  public setNext(handler: DiscountHandler): DiscountHandler {
    this.nextHandler = handler;
    return handler;
  }

  public applyDiscount(products: string[], originalPrice: number): number {
    if (this.canHandle(products)) {
      return this.handleDiscount(originalPrice);
    } else if (this.nextHandler) {
      return this.nextHandler.applyDiscount(products, originalPrice);
    } else {
      return originalPrice;
    }
  }

  protected abstract canHandle(products: string[]): boolean;
  protected abstract handleDiscount(originalPrice: number): number;
}

class ElectronicsDiscountHandler extends AbstractDiscountHandler {
  protected canHandle(products: string[]): boolean {
    return products.some(p => p === 'Electronics');
  }

  protected handleDiscount(originalPrice: number): number {
    return originalPrice * 0.9;
  }
}

class BooksDiscountHandler extends AbstractDiscountHandler {
  protected canHandle(products: string[]): boolean {
    return products.some(p => p === 'Books');
  }

  protected handleDiscount(originalPrice: number): number {
    return originalPrice * 0.85;
  }
}

class ClothingDiscountHandler extends AbstractDiscountHandler {
  protected canHandle(products: string[]): boolean {
    return products.some(p => p === 'Clothing');
  }

  protected handleDiscount(originalPrice: number): number {
    return originalPrice * 0.8;
  }
}

class ToysDiscountHandler extends AbstractDiscountHandler {
  protected canHandle(products: string[]): boolean {
    return products.some(p => p === 'Toys');
  }

  protected handleDiscount(originalPrice: number): number {
    return originalPrice;
  }
}

class DiscountCalculator {
  private discountHandler: DiscountHandler;

  constructor() {
    const electronicsHandler = new ElectronicsDiscountHandler();
    const booksHandler = new BooksDiscountHandler();
    const clothingHandler = new ClothingDiscountHandler();
    const toysHandler = new ToysDiscountHandler();

    electronicsHandler.setNext(booksHandler).setNext(clothingHandler).setNext(toysHandler);

    this.discountHandler = electronicsHandler;
  }

  public calculateDiscount(products: string[], originalPrice: number): number {
    return this.discountHandler.applyDiscount(products, originalPrice);
  }
}

const calculator = new DiscountCalculator();

console.log(calculator.calculateDiscount(['Electronics', 'Clothing'], 100)); // Output: 72
console.log(calculator.calculateDiscount(['Books'], 100)); // Output: 85
console.log(calculator.calculateDiscount(['Toys'], 100)); // Output: 100
console.log(calculator.calculateDiscount(['Books', 'Clothing'], 100)); // Output: 64

why should use chain of responsibility design pattern?

some potential benefits of using the Chain of Responsibility design pattern:

Decouples the sender and receiver of a request: The pattern allows for more flexibility and extensibility by reducing the direct coupling between the object that initiates a request and the object that handles it. This can make it easier to add, remove, or modify handlers without affecting the rest of the system.
Promotes a more modular design: By breaking up a complex set of processing logic into smaller, more focused handlers, the Chain of Responsibility pattern can promote a more modular and reusable design.
Enables dynamic handling of requests: The pattern allows for dynamic assignment and reassignment of handlers at runtime, giving developers more control over how requests are processed.
Simplifies the design of client code: With the Chain of Responsibility pattern, client code does not need to know which handler will ultimately process a request, as this is determined at runtime. This can simplify the code required to initiate and process requests.
Supports open/closed principle: The Chain of Responsibility pattern can help satisfy the open/closed principle by allowing new handlers to be added without modifying existing code. This can promote a more stable and maintainable system over time.

typing animation - pure css

Akram Mahmoud — Sun, 09 Feb 2020 16:55:15 +0000

A simple typing animation with css