DEV Community: Sharoz Tanveer🚀

Functions vs Classes: When to Use Which and Why?

Sharoz Tanveer🚀 — Tue, 24 Sep 2024 14:32:50 +0000

One of the developers' most important decisions when writing code is whether to use functions or classes. Choosing the wrong approach can lead to unnecessarily complex, difficult-to-maintain code, potentially introducing bugs. While this might not result in catastrophic outcomes like sparking global conflict or creating black holes, it could hinder your development process. So, let's dive into how to decide when to use functions or classes to make your code cleaner, more maintainable, and less prone to errors.

Functions vs Classes: A Brief Overview

Before diving into the "when" and "why," let's clarify what functions and classes do.

Functions take input, process that input, and return a result. You can then pass that result to other functions, allowing for a data flow-driven architecture. In functional programming languages like Haskell, functions can be passed to and returned by other functions, making them flexible and action-oriented.
Classes, on the other hand, focus on structuring information. They encapsulate variables (data) into objects, often forming hierarchies where objects can inherit properties from other objects. The methods in these classes modify the state of these objects, making object-oriented programming (OOP) state-centric.

When to Use Functions

Functions shine when your code is more action-focused. For example, if you're processing data in a sequential manner where the structure of the data isn't as critical as what you're doing with it, functions are usually the better choice.

Imagine you're writing a script to process and analyze data from a weather dataset. The dataset contains information like temperature, humidity, wind speed, and precipitation over a period of time, and your goal is to identify trends, such as average temperatures over each season or the days with the highest precipitation.

In this case, organizing your code into functions would be the most straightforward and efficient approach. You might have functions to load the dataset, calculate seasonal averages, and identify weather extremes. Each function can handle a specific task: one for reading the CSV file, another for analyzing seasonal trends, and one for outputting the results in a clean format.

Using classes in this context would probably add unnecessary complexity. The primary tasks are clear and don't involve the kind of state management or complex relationships between data that would justify an object-oriented approach. Each function is independent, modular, and focused on a specific job, which makes the code easier to maintain and update if you need to tweak how the data is processed.

Moreover, testing is simpler when you use functions. Functions that don't modify the global state can be tested in isolation, making it easier to verify the correctness of each component. This leads to more reliable, testable code without the overhead of additional abstractions.

When to Use Classes

Classes, on the other hand, excel in scenarios where the code is more state-focused. This is especially true when you need to model real-world objects or concepts. For example, a banking application that manages multiple bank accounts would benefit from a class-based approach.

A BankAccount class could maintain an initial balance, and a transaction history, and provide methods for deposits, withdrawals, and balance checks. Each instance of the BankAccount class would represent a separate account with its state, making the use of OOP logical and efficient.

In such cases, trying to use functions instead of classes would make the code more cumbersome because the concept of a "bank account" naturally involves a state - it's not just a sequence of actions. By structuring your program with classes, you can more easily manage the state, encapsulate related behaviors, and reduce the complexity that would arise from trying to pass state through functions.

Real-World Examples

Consider you're building a system to manage a library. You need to model books, members, and loans. Each of these has distinct attributes and behaviors: books have titles and authors, members have names and membership IDs, and loans have due dates and statuses. This is a great case for using object-oriented programming (OOP), as classes can represent these entities with properties and methods to handle actions like checking out books or renewing loans. OOP makes the system more intuitive and scalable as it reflects real-world relationships between the objects.

On the other hand, not all problems require OOP. Imagine you're tasked with processing book return data to calculate overdue fines. If the goal is simply to take a list of return dates, compare them to due dates, and calculate the fines, functions might be a more suitable choice. Here, you don't need to create full classes for books or members because you're just working with dates and numbers in a step-by-step process. Functions would keep the code simple, reducing overhead, and allowing you to focus on the core task of processing fines rather than managing the state of multiple objects.

Combining Functions and Classes

One of Python's strengths is the ability to seamlessly integrate functions and classes, allowing you to leverage both as needed. For instance, you could create a class to represent a shopping cart, encapsulating the properties of items and their quantities. At the same time, you could employ functions to handle specific tasks, such as calculating the total price of items or applying discounts. This flexibility enables you to choose the best approach for each task, whether it involves using a class, a function, or a combination of both to achieve an efficient and organized solution.

Conclusion

Use functions when your code is action-driven and you're focusing on the flow of data.
Use classes when you're working with state and need to model real-world objects or concepts.

Ultimately, there's no one-size-fits-all solution. The best approach depends on the problem at hand. Don't hesitate to experiment with different methods and combinations. Understanding when and why to use functions versus classes will help you write cleaner, more maintainable code.

[Disclosure: This article is a collaborative effort, combining my own ideas with the assistance of ChatGPT for enhanced articulation.]

Unlocking the Power of TypeScript's "as const": The Underrated Feature You Need to Know

Sharoz Tanveer🚀 — Fri, 19 Jul 2024 20:31:15 +0000

When discussing the most underrated features in TypeScript, one that often flies under the radar is the as const assertion. This feature is incredibly useful in various scenarios, providing significant benefits for developers.

Understanding "as const"

To start, let's define what as const does. Imagine you have an object like this:

const routes = {
  home: "/home",
  profile: "/profile",
  notifications: "/notification",
};

If you hover over the properties of routes, you'll notice they are typed as string. For instance, routes.home is typed as string, not "/home". This is because TypeScript assumes these properties might change, so it infers them as mutable strings.

Now, consider a function that should accept only these specific routes. You might define the types like this:

function changeRoute(route: "home" | "profile" | "notifications") {
  // navigate to route
}

This approach works, but it's repetitive and error-prone. If you add a new route, you must update the function's type definition, which isn't ideal.

Making Objects Immutable

Here's where as const comes into play. By using as const, you can make the object immutable, and TypeScript will infer the literal types instead of just string.

const routes = {
  home: "/home",
  profile: "/profile",
  notifications: "/notification",
} as const;

Now, routes.home is typed as "/home", routes.notifications as "/notifications", and so on. This immutability ensures that these properties cannot be changed, and TypeScript recognizes their specific values.

Practical Use Case

Let's integrate as const into a function:

function changeRoute(route: typeof routes[keyof typeof routes]) {
  // navigate to route
}

Here, typeof routes gets the type of the routes object, and keyof typeof routes extracts the keys, resulting in the exact types of the route values. This makes the function adaptable to any changes in the routes object without the need for repetitive updates.

Extracting Types

Another powerful aspect of as const is how it enables type extraction. For instance:

type Routes = (typeof routes)[keyof typeof routes];

This type of definition dynamically extracts the values of the routes object, making the function more maintainable and reducing redundancy.

Conclusion

The as const assertion in TypeScript is a versatile and powerful feature that can significantly improve type safety and reduce redundancy in your code. By making objects immutable and enabling precise type inference, it simplifies maintaining and extending codebases. Give it a try, and you'll see how it can enhance your TypeScript projects!
Happy Coding!

[Disclosure: This article is a collaborative effort, combining my own ideas with the assistance of ChatGPT for enhanced articulation.]

Your First Programming Language: A Strategic Guide for Beginners

Sharoz Tanveer🚀 — Fri, 12 Jul 2024 20:08:27 +0000

In today's tech-driven world, there seems to be an overwhelming number of programming languages to choose from. This article aims to simplify your journey into programming by guiding you on which languages to learn and in what order, ensuring you learn to program as efficiently as possible.

As technology permeates every industry, programming skills are increasingly sought after in job postings. For newcomers, the abundance of resources can be both a blessing and a curse, creating confusion about where to begin. With languages like Python, Rust, Go, C++, and Javascript, choosing the right one to start with can be daunting.

Step 1: Learn How Computers Work with C

The first step in your programming journey should be understanding how computers operate, and the best language for this is C. Despite being considered low-level and seemingly outdated, C offers invaluable insights into the inner workings of computers. It teaches you about memory management, registers, and the processor's functions, providing a solid foundation for all future programming endeavours.

C can be challenging and prone to crashes, but this difficulty is a strength. It eliminates guesswork, allowing you to see exactly what your code does, and thus deepening your understanding of how computers execute programs. By working with C, you gain absolute control over the machine, learning about operating systems, kernel interfaces, and system calls.

Step 2: Learn to Program with Python

After grasping the fundamentals of computer operations with C, the next step is to learn how to program effectively. This is best achieved with an interpreted language, and Python is an excellent choice. Known for its readability and user-friendly syntax, Python allows you to focus on learning programming concepts without the distractions of low-level details.

Python's extensive library support means you can easily find tools for networking, threading, and even creating ASCII art. Its versatility and simplicity make it an ideal language for learning data structures, algorithms, and other essential programming skills.

Embrace Mistakes and Learn from Them

A crucial aspect of learning to program is being comfortable with making mistakes. As a beginner, errors are inevitable, but they are also opportunities for growth. Adopting the mindset of "failing forward" means taking each mistake as a learning experience, refining your skills with each iteration.

For example, if your C program crashes due to pointer misuse, analyse the error, understand what went wrong, and apply that knowledge to become a better programmer. Persistence and a willingness to learn from failures are key to your success in programming.

Conclusion

In summary, starting with C to understand computer fundamentals, followed by Python to learn programming concepts, provides a strong foundation for any aspiring programmer. Embrace the challenges and mistakes along the way, and you'll find yourself growing and improving continuously. Happy coding!

[Disclosure: This article is a collaborative effort, combining my own ideas with the assistance of ChatGPT for enhanced articulation.]

Creating Arrays in JavaScript: A Comprehensive Guide

Sharoz Tanveer🚀 — Fri, 12 Jul 2024 06:52:37 +0000

Creating arrays in JavaScript is a fundamental task, yet there are several nuances and gotchas that even experienced developers might overlook. Let's dive into the basics and explore some interesting aspects of array creation and manipulation that you might find enlightening.

Basic Array Creation

The simplest way to create an array is using array literals:

let arr = [];

You can then populate this array using a loop:

for (let i = 0; i < 5; i++) {
  arr.push(i);
}

This creates an array with elements [0, 1, 2, 3, 4]. However, if you create an empty array without populating it, you'll get an array with no items and no empty slots.

Using the Array Constructor

Another way to create arrays is using the Array constructor:

let arr = Array(5);

When a single numerical argument is passed, it creates a sparse array with the specified length but no actual elements:

console.log(arr.length); // 5
console.log(arr); // [empty × 5]

Sparse Arrays

Sparse arrays have "empty slots," which can lead to unexpected behaviour when using methods like map, filter, or forEach. These methods skip empty slots:

let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]

To populate such an array, you need to manually set values:

arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]

Handling Sparse Arrays

To handle sparse arrays effectively, you can use methods like fill to initialise values:

let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]

But be cautious when filling with objects or arrays:

let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]

Each element references the same object. To avoid this, use map:

let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]

Array.from Method

Array.from provides a versatile way to create arrays from array-like or iterable objects:

let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]

This method can also help when creating two-dimensional arrays:

let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]

Iterating Over Arrays

JavaScript provides several ways to iterate over arrays, each treating sparse arrays differently:

for loop: Processes every index, treating empty slots as undefined.
for...in: Iterates over indices of the array, skipping empty slots.
for...of: Iterates over values, treating empty slots as undefined.

Conclusion

Understanding the intricacies of array creation and manipulation in JavaScript can help you avoid common pitfalls and write more efficient code. Whether you're using array literals, the Array constructor, or methods like Array.from and fill, knowing how these tools work will enable you to handle arrays effectively in your projects.

If you found this guide helpful, let me know. I'm always eager to create more content that delves into the nuts and bolts of JavaScript. Thank you for reading, and happy coding!

Understanding 'any', 'unknown', and 'never' in TypeScript

Sharoz Tanveer🚀 — Wed, 10 Jul 2024 07:32:28 +0000

TypeScript offers a robust type system, but certain types can be confusing, namely any, unknown, and never. Let's break them down for better understanding.

The `any` Type

The any type is the simplest of the three. It essentially disables type checking, allowing a variable to hold any type of value. For example:

let value: any;
value = 42;             // number
value = "Hello";        // string
value = [1, 2, 3];      // array
value = () => {};       // function
value = { key: "val" }; // object
value = new Date();     // date

In all these cases, TypeScript does not raise any errors, allowing us to perform any operation on the variable without type constraints. This can be useful when migrating a JavaScript project to TypeScript. However, relying on any negates the benefits of type safety, making it a poor choice in most cases. Instead, consider using unknown.

The `unknown` Type

The unknown type is safer than any because it requires type checks before performing operations. It represents the set of all possible values, but with type safety enforced.

let value: unknown;
value = 42;
value = "Hello";

// To perform operations, we need to narrow down the type
if (typeof value === "number") {
  console.log(value + 1); // TypeScript knows value is a number here
}

Using unknown is beneficial for functions that accept any type of input, like logging functions, as it enforces type checks before proceeding with operations.

The `never` Type

The never type represents the empty set of values, indicating that something should never occur. No value can be assigned to a never type, making it useful for exhaustive checks and representing unreachable code.

type User = { type: "admin" } | { type: "standard" };

function handleUser(user: User) {
  switch (user.type) {
    case "admin":
      // handle admin
      break;
    case "standard":
      // handle standard
      break;
    default:
      const _exhaustiveCheck: never = user;
      // This ensures all cases are handled
  }
}

If a new user type is added, TypeScript will raise an error, ensuring that all cases are addressed, making never invaluable for maintaining exhaustive checks in your code.

Conclusion

Understanding any, unknown, and never enhances TypeScript's type safety. Use any sparingly, preferring unknown for safer type checks, and leverage never for exhaustive checks and unreachable code. These types, when used correctly, make TypeScript a powerful tool for building reliable applications.
Happy coding!

GSAP vs. Framer Motion: Which Animation Library Should You Choose for Your Creative Web Projects?

Sharoz Tanveer🚀 — Tue, 09 Jul 2024 07:56:45 +0000

When it comes to creating portfolios or other creative websites, the choice between GSAP (GreenSock Animation Platform) and Framer Motion can be challenging. As a developer with experience in both agency and freelance settings, I've encountered both libraries' strengths and weaknesses. Here's a breakdown to help you decide which to use for your projects.

GSAP: The Powerhouse of Web Animations

Pros:

Versatility and Power: GSAP is incredibly powerful, capable of creating almost any kind of animation. It comes with built-in modules like text splitting, randomisation, and morphing.
Wide Framework Compatibility: One of GSAP's biggest advantages is its compatibility with various frameworks, including React, Vue.js, and Astro. This makes it a must-learn tool for developers who work with multiple frameworks.
Strong Community Support: GSAP's community is extensive and active, thanks to its longevity. This means you'll find plenty of resources, forums, and tutorials to solve any problem you might encounter.
Advanced Features: GSAP's timeline feature is unparalleled, making it easy to create complex, sequenced animations.

Cons:

Cost: Some of GSAP's advanced features are behind a paywall, which might not be ideal for budget-conscious projects.
Integration with React: While GSAP works with React, the integration isn't seamless. Developers need to take extra steps, such as using hooks and managing cleanup processes, which can complicate the development experience.

Framer Motion: The React Solution

Pros:

Declarative Approach: Framer Motion is built for React and uses a declarative approach, making it more intuitive for React developers. This aligns well with React's functional programming style.
Performance Optimisation: With features like motionValue, Framer Motion optimises performance by only re-rendering components that actually change, avoiding the overhead of frequent state updates.
Animate Presence: This feature allows for smooth animations when components enter or leave the DOM, making it ideal for transitions between pages or adding/removing items from lists.
Simplicity: Framer Motion's simplicity and small set of tools encourage developers to think creatively and develop custom solutions, which can enhance their skills over time.

Cons:

Limited Scope: Framer Motion is not as comprehensive as GSAP. It provides essential tools for animations but leaves more complex requirements to the developer's ingenuity.
React-Only: Unlike GSAP, Framer Motion is designed exclusively for React. This makes it less versatile if you work with multiple frameworks.

Conclusion: Learn Both

Ultimately, both GSAP and Framer Motion have their own unique advantages. If you're focused on React, start with Framer Motion for its seamless integration and ease of use. However, GSAP's power and versatility make it a valuable tool for any developer's toolkit, especially when working outside the React ecosystem.

By learning both libraries, you'll be well-equipped to handle any animation requirements, regardless of the framework.
Happy coding!

Embracing Expo: The New Standard for Creating React Native Apps

Sharoz Tanveer🚀 — Mon, 08 Jul 2024 07:50:53 +0000

In a significant shift for the React Native ecosystem, using frameworks like Expo is now the recommended way to create new React Native apps. This update marks a substantial change, aiming to simplify the development process and enhance the developer experience.

The Evolution of React Native Development

Historically, setting up a React Native project was a cumbersome task. Developers had to juggle multiple components: setting up a JavaScript project, configuring an iOS and Android project with native tools, and integrating these elements using a somewhat obscure bundler called Metro. This complexity often led to frustration and inefficiencies.

Expo emerged as a solution to these challenges, providing a streamlined setup that alleviated much of the pain associated with traditional React Native development. For many developers, Expo became the go-to tool, significantly simplifying the process and improving productivity.

The Shift to Frameworks

At React Conf, the official guidelines were updated to recommend using a framework like Expo for new React Native projects. This approach aligns with the broader trend in the React ecosystem, where frameworks have become essential for managing common development challenges such as code splitting, routing, and data fetching.

Frameworks like Next.js and Remix have become popular for web development, offering solutions to these recurring problems. Similarly, Expo provides a comprehensive toolbox for React Native, allowing developers to focus on building features rather than reinventing the wheel.

Why Use a Framework?

For those deeply embedded in the Expo ecosystem, the benefits are clear. A React Native framework like Expo addresses many of the common issues faced during app development. It provides tools for navigating different screens, fetching data, managing user state, and upgrading native code between React Native versions.

Moreover, frameworks help manage dependencies and build tools, streamlining the entire development process. Xcode and Android Studio, the native development environments for iOS and Android, respectively, are known for their complexity and sluggish performance. By using a framework, much of this headache is alleviated, making development more accessible and efficient.

The Practical Benefits of Expo

Expo offers a suite of features that enhance the development experience:

Easier Upgrades: Upgrading React Native versions can be a daunting task. Expo simplifies this process, making it more manageable.
Developer Experience: Expo provides a polished developer experience, reducing the time spent on setup and configuration.
Build Tools: Expo’s EAS (Expo Application Services) allows developers to build iOS apps without needing a Mac, further lowering the barriers to entry.

The Future of React Native Development

For developers already using Expo, this update confirms that they are on the right track. Those who haven't yet adopted Expo can find migration guides on the official Expo website. While it’s possible to continue using React Native without a framework, the benefits of adopting a framework like Expo are compelling.

The move towards frameworks is about more than just easing the development process; it's about enabling developers to build more robust, production-ready applications with less hassle. As the React Native ecosystem continues to evolve, frameworks like Expo will play a crucial role in shaping its future.

Conclusion

The recommendation to use Expo for new React Native projects reflects a broader shift towards embracing frameworks that simplify and enhance the development process. By providing essential tools and addressing common challenges, Expo enables developers to focus on what matters most: creating great applications.

Feel free to share your thoughts and experiences with React Native and Expo in the comments. How do you feel about this shift towards frameworks? Until next time, happy coding!

From Framework Consumer to Framework Creator: Mastering Design Patterns

Sharoz Tanveer🚀 — Thu, 04 Jul 2024 13:29:52 +0000

When we discuss career progression in the tech industry, the typical path involves moving from junior developer to senior, then to lead, architect, and finally principal. However, this linear progression often overlooks a vital aspect of technical proficiency - the journey from a framework consumer to a framework creator. This transition involves moving from merely using frameworks like Spring or React to developing frameworks that other engineers rely on. Achieving this requires mastering various design patterns essential for building robust, reusable, and scalable software architectures.

Developing Your Technical Skills

To become a framework creator, you need a solid technical foundation. This starts with mastering the basics of your chosen programming language, such as conditionals, loops, functions, and classes. Next, you need to understand data structures and algorithms. Finally, you must master design patterns, which provide reusable solutions to common software design problems and help create maintainable and scalable systems.

Here are five essential design patterns that can aid your transition from a framework consumer to a framework creator.

1. Singleton Pattern

The Singleton pattern ensures that a class has only one instance and provides a global point of access to it. This is particularly useful for objects like database drivers or configuration settings, where multiple instances could lead to inconsistencies.

Pros:

Simplifies instance access.
Ensures uniformity across the application.

Cons:

Overuse can complicate refactoring.
Challenging to test due to global state.

Example: Database Driver:

class DatabaseDriver {
  private static instance: DatabaseDriver;
  private connectionString: string;

  private constructor(connectionString: string) {
    this.connectionString = connectionString;
    console.log("Connecting to database..."); // Simulate connection logic
  }

  public static getInstance(connectionString?: string): DatabaseDriver {
    if (!DatabaseDriver.instance) {
      if (!connectionString) {
        throw new Error("Connection string is required for the first instance.");
      }
      DatabaseDriver.instance = new DatabaseDriver(connectionString);
    } else if (connectionString && connectionString !== DatabaseDriver.instance.connectionString) {
      console.warn("Singleton already initialized with a different connection string. Ignoring new connection string.");
    }
    return DatabaseDriver.instance;
  }

  // Database operations (connect, query, etc.)
}

// Usage
const db1 = DatabaseDriver.getInstance("connection_string_1");
const db2 = DatabaseDriver.getInstance(); // Throws error if not called first with connection string
const db3 = DatabaseDriver.getInstance("connection_string_2"); // Warns about different connection string being ignored

// Ensures only one instance exists throughout the application
// and provides a centralized access point

2. Facade Pattern

The Facade pattern provides a simplified interface to a complex subsystem, similar to the front of a building hiding its intricate details. For instance, a compiler has many internal components (parser, lexical analyzer, tokenizer), but a facade can offer a simple interface for compiling code.

Pros:

Simplifies usage for consumers.
Reduces subsystem dependencies.

Cons:

Risk of oversimplification leading to leaky abstractions.
Can become overly specific, reducing general usability.

Example: Compiler Interface:

class Compiler {
    parse(code: string) {  }
    analyze(code: string) {  }
    generate(code: string) {  }
}

class CompilerFacade {
    private compiler: Compiler;

    constructor() {
        this.compiler = new Compiler();
    }

    compileCode(code: string) {
        this.compiler.parse(code);
        this.compiler.analyze(code);
        this.compiler.generate(code);
    }
}

3. Bridge Pattern

The Bridge pattern decouples an abstraction from its implementation, allowing them to vary independently. Think of a camera body with interchangeable lenses, where the body represents the abstraction and the lenses the implementations.

Pros:

Promotes flexibility and extensibility.
Separates interface and implementation.

Cons:

Can lead to complexity if overused.
Requires careful planning to implement effectively.

Example: Camera System:

//Abstraction
abstract class CameraBody {
    protected lens: Lens;

    constructor(lens: Lens) {
        this.lens = lens;
    }

    abstract takePhoto(): void;
}
//Interface
interface Lens {
    capture(): string;
}

//Concrete Implementations
class PrimeLens implements Lens {
    capture(): string {
        return 'Photo taken with a prime lens.';
    }
}


class ZoomLens implements Lens {
    capture(): string {
        return 'Photo taken with a zoom lens.';
    }
}

//Extend the Abstraction
class DSLRCamera extends CameraBody {
    takePhoto(): void {
        console.log('DSLR Camera: ' + this.lens.capture());
    }
}

class MirrorlessCamera extends CameraBody {
    takePhoto(): void {
        console.log('Mirrorless Camera: ' + this.lens.capture());
    }
}

//usage
const primeLens: Lens = new PrimeLens();
const zoomLens: Lens = new ZoomLens();

const dslrWithPrime: CameraBody = new DSLRCamera(primeLens);
dslrWithPrime.takePhoto(); // Output: DSLR Camera: Photo taken with a prime lens.

const dslrWithZoom: CameraBody = new DSLRCamera(zoomLens);
dslrWithZoom.takePhoto(); // Output: DSLR Camera: Photo taken with a zoom lens.

const mirrorlessWithPrime: CameraBody = new MirrorlessCamera(primeLens);
mirrorlessWithPrime.takePhoto(); // Output: Mirrorless Camera: Photo taken with a prime lens.

const mirrorlessWithZoom: CameraBody = new MirrorlessCamera(zoomLens);
mirrorlessWithZoom.takePhoto(); // Output: Mirrorless Camera: Photo taken with a zoom lens.

4. Strategy Pattern

The Strategy pattern defines a family of algorithms, encapsulates each one, and makes them interchangeable. For instance, a notification system can use different strategies for filtering customers and sending notifications.

Pros:

Promotes cleaner code with well-defined responsibilities.
Allows easy extension and modification of behaviors.

Cons:

Can increase the number of classes.
Requires careful management of strategy objects.

Example: Notification System:

interface NotificationStrategy {
    sendNotification(customer: Customer, message: string): void;
}

class EmailNotification implements NotificationStrategy {
    sendNotification(customer: Customer, message: string): void {
        console.log(`Sending email to ${customer.email}: ${message}`);
    }
}

class SMSNotification implements NotificationStrategy {
    sendNotification(customer: Customer, message: string): void {
        console.log(`Sending SMS to ${customer.phoneNumber}: ${message}`);
    }
}

class PushNotification implements NotificationStrategy {
    sendNotification(customer: Customer, message: string): void {
        console.log(`Sending push notification to ${customer.name}: ${message}`);
    }
}

class Customer {
    constructor(public name: string, public email: string, public phoneNumber: string, public preference: string) {}
}

class NotificationContext {
    private strategy: NotificationStrategy;

    constructor(strategy: NotificationStrategy) {
        this.strategy = strategy;
    }

    setStrategy(strategy: NotificationStrategy) {
        this.strategy = strategy;
    }

    sendNotification(customer: Customer, message: string) {
        this.strategy.sendNotification(customer, message);
    }
}

// Usage
const customers: Customer[] = [
    new Customer("John Doe", "john@example.com", "1234567890", "email"),
    new Customer("Jane Smith", "jane@example.com", "0987654321", "sms"),
    new Customer("Bob Johnson", "bob@example.com", "1112223333", "push")
];

const emailNotification = new EmailNotification();
const smsNotification = new SMSNotification();
const pushNotification = new PushNotification();

const notificationContext = new NotificationContext(emailNotification);

customers.forEach(customer => {
    switch (customer.preference) {
        case "email":
            notificationContext.setStrategy(emailNotification);
            break;
        case "sms":
            notificationContext.setStrategy(smsNotification);
            break;
        case "push":
            notificationContext.setStrategy(pushNotification);
            break;
        default:
            console.log(`Unknown preference for ${customer.name}`);
            return;
    }
    notificationContext.sendNotification(customer, "Hello! This is a test notification.");
});

5. Observer Pattern

The Observer pattern, also known as Publish-Subscribe (Pub-Sub), allows an object to notify other objects about state changes. This pattern is prevalent in event-driven systems.

Pros:

Enables loose coupling between objects.
Supports dynamic relationships between objects.

Cons:

Can lead to complex event chains.
Hard to debug if overused.

Example: Event System:

// Observer Interface
interface Observer {
  update(eventData: string): void;
}

// Concrete Observer
class EventListener implements Observer {
  update(eventData: string): void {
    console.log("Event received: " + eventData);
  }
}

// Subject
class EventPublisher {
  private observers: Observer[] = [];

  addObserver(observer: Observer): void {
    this.observers.push(observer);
  }

  removeObserver(observer: Observer): void {
    this.observers = this.observers.filter((obs) => obs !== observer);
  }

  notifyObservers(eventData: string): void {
    for (const observer of this.observers) {
      observer.update(eventData);
    }
  }
}

// Usage
const eventPublisher = new EventPublisher();

const listener1 = new EventListener();
const listener2 = new EventListener();

eventPublisher.addObserver(listener1);
eventPublisher.addObserver(listener2);

eventPublisher.notifyObservers("Event 1 triggered!"); // Output: Event received: Event 1 triggered! (twice)

eventPublisher.removeObserver(listener2);

eventPublisher.notifyObservers("Event 2 triggered!"); // Output: Event received: Event 2 triggered! (once)

Conclusion

Understanding and applying design patterns is essential for any developer aiming to enhance their software architecture skills. These patterns provide proven solutions to common design challenges, making your code more modular, maintainable, and scalable. By incorporating these patterns into your development practice, you can create more efficient and flexible systems that are easier to manage and extend. Whether you're working on client-side applications or server-side infrastructure, mastering these design patterns will significantly boost your proficiency and set you apart in the tech industry.

If you have any questions or comments, feel free to share them below.

Happy coding!

DEV Community: Sharoz Tanveer🚀

Functions vs Classes: When to Use Which and Why?

Functions vs Classes: A Brief Overview

When to Use Functions

When to Use Classes

Real-World Examples

Combining Functions and Classes

Conclusion

Unlocking the Power of TypeScript's "as const": The Underrated Feature You Need to Know

Understanding "as const"

Making Objects Immutable

Practical Use Case

Extracting Types

Conclusion

Your First Programming Language: A Strategic Guide for Beginners

Step 1: Learn How Computers Work with C

Step 2: Learn to Program with Python

Embrace Mistakes and Learn from Them

Conclusion

Creating Arrays in JavaScript: A Comprehensive Guide

Basic Array Creation

Using the Array Constructor

Sparse Arrays

Handling Sparse Arrays

Array.from Method

Iterating Over Arrays

Conclusion

Understanding 'any', 'unknown', and 'never' in TypeScript

The any Type

The unknown Type

The never Type

Conclusion

GSAP vs. Framer Motion: Which Animation Library Should You Choose for Your Creative Web Projects?

GSAP: The Powerhouse of Web Animations

Pros:

Cons:

Framer Motion: The React Solution

Pros:

Cons:

Conclusion: Learn Both

Embracing Expo: The New Standard for Creating React Native Apps

The Evolution of React Native Development

The Shift to Frameworks

Why Use a Framework?

The Practical Benefits of Expo

The Future of React Native Development

Conclusion

From Framework Consumer to Framework Creator: Mastering Design Patterns

Developing Your Technical Skills

1. Singleton Pattern

2. Facade Pattern

3. Bridge Pattern

4. Strategy Pattern

5. Observer Pattern

Conclusion

The `any` Type

The `unknown` Type

The `never` Type