DEV Community: Manjunath Shenoy

C# Essentials: Operator Overloading and Custom Sorting Made Simple

Manjunath Shenoy — Sat, 30 Nov 2024 04:44:53 +0000

This blog delves into the concept of operator overloading in C#. We will also see how to perform sorting on Custom objects. While these topics are foundational, I’ve tried to present it in a way that highlights nuances we often overlook. My goal is to explain the subject so clearly that a single read-through leaves a lasting impression.

GitHub Source Code

✍1.Introduction to Operator Overloading in C#

✅Operator overloading is an interesting and intuitive feature in C#. It allows you to redefine how operators like +, -, *, or / behave for your custom classes or structs, making code more expressive and natural.

For example, consider the System.String class. It has a static method named Concat to concatenate two strings:

string name = "manju";
string type = "dev";
string result = string.Concat(name, type); // Output: "manjudev"

But instead of using the Concat method, you can achieve the same result with the + operator:

string result = name + type; // Output: "manjudev"
This behavior is possible because the + operator is overloaded for the string class. Similarly, we can overload operators for our own classes to make them intuitive and natural to use. Let’s explore this concept with an example.

✅Create a Calculator Class (custom class for our egample)

Create a Calculator class that supports arithmetic operations (+, -, *, /). Instead of relying on verbose method calls, you can define operator overloads to make the syntax more concise and intuitive.

Eg code

public class Calculator
{
    public int Value { get; set; }

    public Calculator(int value)
    {
        Value = value;
    }

    public static Calculator operator +(Calculator a, Calculator b)
    {
        return new Calculator(a.Value + b.Value);
    }
}

Now, you can use the + operator with instances of Calculator:

Calculator calc1 = new Calculator(10);
Calculator calc2 = new Calculator(20);

Calculator result = calc1 + calc2;
Console.WriteLine(result.Value); // Output: 30

Above makes the syntax concise and intuitive, resembling built-in types.

✅ Addressing the IntelliSense Gap

Operator overloading is indeed powerful, but it comes with a limitation: IntelliSense (the auto-suggestion feature in IDEs) does not show overloaded operators. This means users may not immediately realize that the +, -, or other operators are available for the class. See egample below. When I type in “Calculator” and then a “dot”, operators methods don’t show up

To bridge this gap, it’s a good practice to provide a named method alongside the operator overload. The + operator can internally call this method: For example:

public static Calculator Add(Calculator a, Calculator b)
{
    return new Calculator(a.Value + b.Value);
}
public static Calculator operator +(Calculator a, Calculator b)
{
    return Add(a, b);
}

Now, users can either use the + operator OR call the Add method directly:

Calculator result1 = calc1 + calc2; // Using the operator
Calculator result2 = Calculator.Add(calc1, calc2); // Using the method

This dual approach enhances discoverability and usability, especially for developers unfamiliar with the class.

✅When and Why to Use Operator Overloading

Operator overloading is best suited for scenarios where custom classes represent mathematical or logical entities (e.g., vectors, matrices, fractions, or even complex numbers). However, it should be used judiciously to avoid confusion. Ensure that the overloaded operators behave in a way that aligns with user expectations.
But let’s have a bit of fun! Think of operator overloading as going with the flow of intuition. If objects of a custom class can logically be added, multiplied, or divided, then why not make it happen? For example, imagine you have a Pest class. It might make sense that pests can be:

Added (+): A swarm of pests grows when combined with another swarm.
Multiplied (*): The infestation grows exponentially. -** Divided (/)**: Maybe it's reduced by pest control. By thinking creatively, operator overloading can make code more engaging and intuitive, while also injecting a touch of whimsy into programming.

✍2.Simplifying Sorting Custom Objects in C#: Understanding IComparable vs. IComparer

When I started working with sorting custom objects in C#, I found it tricky to differentiate between the two interfaces: IComparable and IComparer. Both are used for sorting, but they have distinct purposes. Let's simplify the concepts with some practical analogies and example

✅IComparable: "I Am Comparable"

Think of a class that implements IComparable as someone who compares themselves with others. For instance, imagine an Employee who is ambitious, a perfectionist, or just reflective. This person would compare their own performance or rank with another Employee.

Here’s the method it exposes:
public int CompareTo(Employee? other)

This method allows an object of the class to compare itself to another object of the same class. For example:

public class Employee : IComparable<Employee>
  {
      // Properties
      public string Name { get; set; }
      public int Age { get; set; }
      public string Role { get; set; }

      // Constructor
      public Employee(string name, int age, string role)
      {
          Name = name;
          Age = age;
          Role = role;
      }

      // Override ToString for better display
      public override string ToString()
      {
          return $"Name: {Name}, Age: {Age}, Role: {Role}";
      }

      public int CompareTo(Employee other)
      {
          if (other == null) return 1; // Current instance is greater if other is null
          return string.Compare(this.Name, other.Name, StringComparison.OrdinalIgnoreCase);
      }
  }

✅IComparer: "I Compare Others"

Now, imagine an Evaluator or an Interviewer who doesn’t evaluate themselves but compares two candidates (e.g., Employees or Customers). This is the role of a class implementing IComparer.

Here’s the method it exposes:

public int Compare(Employee? x, Employee? y)

This method allows the comparer to evaluate two different objects. For instance:

 internal class CustomerComparer : IComparer<Customer>
 {      

     public int Compare(Customer? x, Customer? y)
     {
         if (x == null && y == null) return 0; // Both are null, considered equal
         if (x == null) return -1; // Null is less than non-null
         if (y == null) return 1;  // Non-null is greater than null
         return string.Compare(x.Name, y.Name, StringComparison.OrdinalIgnoreCase);
     }
 }

Putting It All Together

✅IComparable Example:

Program.cs

oid SortingComparableEg()
{
    List<Employee> employees = new List<Employee>{
       new ("Manju s", 30, "Software Engineer"),
        new ("Tom s", 25, "Devops"),
        new ("Kristy s", 45, "Devops")
   };

    employees.Sort();// Sort employees by Name since our Employee class does so
    Console.WriteLine("Employees sorted by Name:");
    foreach (var employee in employees)
    {
        Console.WriteLine(employee);
    }
}

✅IComparer Example:

Program.cs

void SortingComparerEg()
{
    List<Customer> customers = new List<Customer>{
        new ("Manju s", 30),
        new ("Tom s", 2),
        new ("Kristy", 33)
   };
    customers.Sort(new CustomerComparer());// CustomerComparer is used to sort
    Console.WriteLine("Customer sorted by Name:");
    foreach (var customer in customers)
    {
        Console.WriteLine(customer);
    }
}

Conclusion:

In conclusion, operator overloading and sorting custom objects are foundational yet versatile features in C#. This blog aims to present these concepts in a simple, pragmatic way that leaves a lasting impression. By focusing on practical applications and clear explanations, I hope to make these topics approachable and memorable for readers. Happy coding!

✅GitHub Source Code

✅Connect with Me:

If you enjoyed this post and would like to stay updated with more content like this, feel free to connect with me on social media:

▶️YouTube : Subscribe to my YouTube Channel for video tutorials and tons of videos on various subjects

✅Medium : Follow me on Medium where I share more technical articles and insights.

📧Email: Email me on techspacedeck@gmail.com for any questions, comments, or just to say hi!
I appreciate your support and look forward to connecting with you! Happy coding! And Please do not forget to clap 👏

Tip: Bookmark this blog and revisit it whenever you want a quick refresher on these operators. Happy coding! 😊

Exploring Interesting JavaScript Operators

Manjunath Shenoy — Sun, 24 Nov 2024 23:35:15 +0000

JavaScript is full of operators that, once understood, can greatly simplify your day-to-day coding tasks. In this blog, I’ll focus on a few fascinating operators that may seem simple but are incredibly powerful when applied effectively.

1. Truthy vs. Falsy Values
✍ Before getting into operators, it’s crucial to understand the concept of truthy and falsy values. Hope the below diagram just be enough to get the hold of it

✅ Falsy Values

The following values are considered falsy in JavaScript:
false, 0, -0, 0n (BigInt zero), '' (empty string), null, undefined, and NaN.

✅ Truthy Values — Everything else is truthy, including:
'0', 'false', , {} (empty object), and function() {}.

Example:

// FALSY - All below prints false
//const val = 0;
//const val = false;
//const val = -0;
//const val = "";
//const val = ``;
//const val = null;
//const val = undefined;
//const val = NaN;

//TRUTHY
//const val = true;
//const val = "0";
//const val = `''`;
//const val = [];
//const val = {};
//const val = () => {};

if (val) {
  console.log("truthy");
} else {
  console.log("false");
}

2. || vs ??: The Difference

✍ At first glance, below 2 operators may seem similar, as they sometimes produce the same results. But they differ in an important way:

✅logical OR (||) and

✅Nullish coalescing (??)

Key Difference

|| : Uses the right-hand value if the left is falsy.
??: Uses the right-hand value if the left is null OR undefined.

Example:

console.log(0 || 'happy', 0 ?? 'happy');        // happy, 0
console.log(false || 'happy', false ?? 'happy'); // happy, false
console.log(undefined || 'happy', undefined ?? 'happy'); // happy, happy
console.log(null || 'happy', null ?? 'happy');   // happy, happy
console.log(NaN || 'happy', NaN ?? 'happy');     // happy, NaN

3. Nullish Coalescing Assignment (??=)

✍ This operator combines ?? with the assignment operator =. It assigns a value to a variable only if the variable is null or undefined.

Example:

let value;
value ??= 'default'; // value becomes 'default' because it was undefined

let anotherValue = 0;
anotherValue ??= 42; // anotherValue remains 0 because it is NOT null OR
                     // undefined

4. Optional Chaining (?.)

✍ The optional chaining operator (?.) allows you to safely access deeply nested object properties without worrying about null or undefined. If any part of the chain is null or undefined, it short-circuits and returns undefined.

Example:

const user = {
  name: 'Manju',
  location: 'AU',
};
console.log(user.profile?.email); // undefined (no error)

Pipeline Operator (|>)

✍ The pipeline operator, inspired by functional programming, is currently in the proposal stage. It makes method chaining and transformations more intuitive by clearly showing the flow of operations.

Example:

const addQuestion = (str) => str + "?";
const toUpperCase = (str) => str.toUpperCase();
const customString = (str) => str.concat("How are you");
const reverseString = (str) => str.split("").reverse().join("");

const result = "Hey Manju " |> toUpperCase |> customString |> addQuestion;
const reverseResult = result |> reverseString;

console.log(result); // Output: "HEY MANJU How are you?"
console.log(reverseResult); // Output: "?uoy era woH UJNAM YEH"

Setting Up the Pipeline Operator

Since this is still a proposal , you’ll need Babel to use it in your projects. Follow these steps:

✅Install Node.js and npm

npm install --save-dev @babel/core @babel/cli @babel/preset-env 
@babel/plugin-proposal-pipeline-operator

✅Configure Babel
Add this to your .babelrc file:

{
  "plugins": [
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ]
  ],
  "presets": [
    "@babel/preset-env"
  ]
}

✅Create and Run Your Code

Write your code in index.js.
Use these scripts in package.json:

"scripts": { "build": "babel index.js --out-file compiled.js", "start": "node compiled.js" }

and then run your code

npm run build //creates "compiled.js" since we have that mentioned in "build" of our scripts
npm start //runs compiled.js

Once your run the code is when you see the result we saw above


console.log(result); // Output: "HEY MANJU How are you?"
console.log(reverseResult); // Output: "?uoy era woH UJNAM YEH"

References: Pipeline Operator

Conclusion

Understanding these operators can help you write cleaner and more efficient JavaScript code. Whether it’s the subtle difference between || and ??, safely accessing nested properties with ?., or using the expressive pipeline operator, these tools are invaluable in modern JavaScript development.

Connect with Me

If you enjoyed this post and would like to stay updated with more content like this, feel free to connect with me on social media:

▶️YouTube : Subscribe to my YouTube Channel for video tutorials and tons of videos on various subjects

Medium : Follow me on Medium where I share more technical articles and insights.

Blog : My Personal Blog Website

Email: Email me on techspacedeck@gmail.com for any questions, comments, or just to say hi!

Understanding Vue.js Slots: A Toddler Analogy

Manjunath Shenoy — Fri, 15 Nov 2024 03:01:42 +0000

While the official documentation on v-slot is comprehensive, I wanted to share a more relatable analogy to help beginners grasp the concept of slots in Vue.js. Please find below the GitHub source code of the egamples am discussing below.

GitHub source code

Think of slots as a toddler in a parent-child relationship. Just like a parent guides a toddler on how to dress, slots allow a parent component to dictate what content a child component should display.

The Toddler Analogy

Slot as a Toddler: When you see a <slot>, think of it as a "slot outlet" or a placeholder. It's like a toddler waiting for instructions on what to wear.
Parent's Role: The parent component decides the content, akin to a parent choosing the toddler's outfit. This is known as "slot content".
Using template Tags: The parent uses <template> tags to specify what content goes where, much like a parent organizing a toddler's wardrobe.

Examples
Feel free to keep a printout of this source code excerpt handy ( below image) for quick reference

Example 1: Conditional Button Display
In ParentComponentEg1, the parent component uses a randomNum reference variable to decide which button to display in ChildComponentEg1. Depending on the random number, the parent passes either a “Success” button or a “Try Again” button to the child component, which simply has a slot outlet.

Result (based on randomNum ref)

Example 2: Multiple Slot Outlets

In ParentComponentEg2, the child component has three slot outlets: header, main, and footer. Imagine the child saying, “I need something for my head, body, and feet.” The parent component specifies what content goes into each slot.

Simplified Syntax: Instead of using <template v-slot:slotName>, you can use the shorthand <template #slotName>.

Result

Example 3: Dynamic Slot Names

In this example, slot names are dynamic, driven by variables like “top” and “footwear.” You can access these dynamic properties using either #[{variable_name}] OR v-slot:[{variable_name}].****

Final Note
In all these examples, ensure you import the correct ParentComponent into App.vue to see the magic unfold.

This version aims to make the concept of slots more relatable and memorable, using a simple analogy while keeping the content concise and engaging.

GitHub source code

How has this analogy helped you understand Vue.js slots? Do let me know 😃

Connect with Me
If you enjoyed this post and would like to stay updated with more content like this, feel free to connect with me on social media:

YouTube : Subscribe to my YouTube Channel for video tutorials and tons of videos on various subjects
Medium : Follow me on Medium where I share more technical articles and insights.
Blog : My Personal Blog Website
Email: Email me on techspacedeck@gmail.com for any questions, comments, or just to say hi!

Mastering Dates in JavaScript: The Ultimate Guide to Date & Time Handling

Manjunath Shenoy — Mon, 11 Nov 2024 06:22:42 +0000

1. Introduction

In this tutorial, we’ll dive into everything you need to know about dates in JavaScript, starting with the basics. I’ll be doing the entire walkthrough on Microsoft Edge, though you can easily follow along on Chrome as well. We’ll also cover some handy tricks to simulate different time zones right from your browser — yes, you can test across time zones directly in your browser! Plus, we’ll address common challenges and questions that newcomers often face along the way.
Rest assured, if you read through this article carefully, you’ll gain a solid understanding of dates. I’ve worked to combine all the essential information here for your benefit. Pay close attention, and consider printing the included image to keep as a handy reference for day-to-day use — I believe it will be a valuable resource!

2. Understanding Time Standards and Time Zones

2.1 UTC (Coordinated Universal Time)

✅UTC is a standard, universal time zone that serves as a baseline for all other time zones.

✅ UTC and GMT: Although UTC and GMT show the same time, they’re not exactly the same. GMT is a time zone, while UTC is a time standard.
The differences are minor and don’t typically affect date handling in JavaScript, so we can treat them as equivalent for most coding purposes.

2.2 Relative Time Zones

✅ Every other time zone is essentially an offset from UTC. For example, I’m in Australia in the AEDT time zone, which is GMT+11 (or UTC+11). JavaScript works with these offsets to calculate times accurately across zones. Below is a normal Date() object created(uses browser’s time zone) and then same in UTCString format

3. Date Formats in JavaScript

3.1 ISO 8601 format

✅ Returns a string Date and Time in ISO 8601 format. The UTC we saw above is a standard that provides a universal time reference, while ISO 8601, on the other hand, is a standardized way to format date and time values to ensure consistency ,clarity in communication and avoid confusion

✅ To understand why ISO format is required, lets think of a small story

Three old school friends — Mike in New York, Laurie in London, and Taro in Tokyo — decided it was finally time to plan a reunion. They hadn’t seen each other in years and wanted to lock down a date to catch up in person. After a long call, they agreed Mike would send an email with the details.
Later that night, Mike sent a quick email saying, “Let’s meet on 01/12/2025 at 00:00.”Laurie, in London, saw the email and thought, “Perfect, December 1st! I’ve got almost a full year to plan.” Taro, in Tokyo, also read 01/12/2025 as December 1st, so he marked it in his calendar and went back to his busy schedule.
But Mike had actually meant January 12, and New York typically formats dates as MM/DD/YYYY. On January 10, he messaged both of them: “Can’t wait to see you guys in a couple of days!”
Both Laurie and Taro were shocked. “Wait — January? I thought we were meeting in December!” Laurie panicked as he realized he’d completely misinterpreted the date, and Taro, realizing his own mistake, scrambled to find a last-minute flight.
After the date confusion, the friends agreed to use ISO 8601 format for all future plans, sticking to 2025–01–12T00:00:00Z for clear communication. Thanks to this new rule, their reunion was finally set — no misunderstandings, no panic, just a simple date everyone understood, no matter where they are.

3.2 Locale-Based Format

✅ Returns Date object as a string, using locale settings. We can use this to format date in a particular way using locale options.

✅ Egamples below, see how date output varies based on locales

// Currently in 'London' Location i.e "en-GB" locale
new Date(); // Sun Nov 10 2024 23:34:22 GMT+0000 (Greenwich Mean Time)
new Date().toLocaleDateString();// '10/11/2024'
new Date().toLocaleDateString("en-US"); // '11/10/2024'

4. Formatting Dates in JavaScript
4.1 Formatting Dates with Intl.DateTimeFormat vs toLocaleDateString

JavaScript provides two primary methods for locale-based date formatting:

✅ Intl.DateTimeFormat is a standalone object allowing flexible formatting options for dates and times.

const options = { 
day: "numeric",
month: "long",
year: "numeric" 
};

new Date().toLocaleDateString("en-GB", options); // "10 November 2024"

✅toLocaleDateString is a Date method that returns the date as a localized string. Same output as above

const options = { 
day: "numeric",
month: "long",
year: "numeric" 
};

new Date().toLocaleDateString("en-GB", options); // "10 November 2024"

4.2 Different Date Formats in Practice

✅We have toUTCString() for UTC dates , toISOString() for ISO format, and toLocaleDateString() for date-only format

new Date().toUTCString(); // e.g., 'Sun, 10 Nov 2024 23:51:54 GMT'
new Date().toLocaleString(); // e.g., '10/11/2024, 11:52:13 pm'
new Date().toISOString(); // e.g., '2024-11-10T23:52:24.867Z'

✅Date-Only Formats -return only Date

new Date().toDateString(); // 'Sun Nov 10 2024'
new Date().toLocaleDateString(); // '10/11/2024'
new Date().toLocaleDateString("en-US"); // '11/10/2024'

5. Converting and Manipulating Dates
5.1 Testing Different Time Zones in Browser- Changing Time Zones Using Sensors

✅We already saw above that when you print new Date() on browser, you get date based on Timezone your browser is in. Mine is AEDT so you get AEDT timezone. But what if you want to test out different timezone. That's where “Sensors” come to rescue. I use edge browser in all of egamples below but you can use Chrome too.

✅Dev Tools → Sensors → Choose Timezone. For eg you can choose "Location" as "London" and you will see that browser runs in Greenwich Mean Time (GMT) though am based in Australia (AEDT).Observe above how time adjustments affect date outputs in JavaScript.

5.2 Changing Date Display Formats — Convert a date formatted with spaces or slashes to one separated by hyphens?

new Date().toLocaleDateString() // '10/11/2024'
new Date().toLocaleDateString().replace(/\//g,'-') // '10-11-2024'

// If date was in '10 Nov 2024' format, with space instead of /, use below
new Date().toLocaleString("en-GB",options).replace("/ /g","-") //'10-Nov-2024'

5.3 Using getTime() to Retrieve Epoch Time

You can retrieve Epoch time from new Date().getTime() function OR using Date.now()

console.log(new Date().getTime()+ " ~~ " + Date.now())
//1731283520279 ~~ 1731283520279

6. Advanced Date Handling Tips
6.1 Using new Date() vs Date()

When called with new, Date returns a Date object.
When called without new, it returns a string representation of the current date and time.

6.2 Additional Locale Options for Date Formatting

1) const options = {
  day: "numeric",
  month: "short", //can also be long
  year: "numeric",
};
new Date().toLocaleString("en-GB",options);  //'9 Nov 2024'

2) const options = {
  day: "numeric",
  month: "short", //can also be long
  year: "numeric",
};
new Date().toLocaleString("en-GB",options);  //'9 November 2024'

3) //To display time, need to pass any time-related properties

const options = {
  day: "numeric",
  month: "short",
  year: "numeric",
  hour: "numeric",    // Add this to display the hour
  minute: "numeric",  // Add this to display the minute
  hour12: true        // Keeps time in 12-hour format
};

new Date().toLocaleString("en-GB",options)//'9 Nov 2024, 3:48 pm'
//3a) if hour12 was set to false, prints '9 Nov 2024, 15:38'
//3b) if year was set to 2-digit(instead of numeric') prints 
//    '10 Nov 24, 3:48 pm'

4) /* "day" option above,like year can also be "2-digit" or "numeric"
 - "numeric" - Displays the day as a number WITHOUT zero-padding 
               for single-digit days
 - "2-digit"- Will apply zero-padding for single-digit days
   */

 // Lets see numeric eg

const dayNumericOptions={
  day: "numeric",
  month: "short",
  year: "numeric"
}
//create a date with single digit day
new Date(2024,11,9).toLocaleString("en-GB",dayNumericOptions)//'9 Dec 2024'
// while if you passed "2-digit" to day and ran above prints '09 Dec 2024'

5) // Same way "minute" can be "numeric" or "2-digit".
   //Assume time is 3:05 pm and with "2-digit" option it will print "15:05"
   //while with numeric it will print "15:5"

6.3 Creating Date Objects with Various Parameters

The Date constructor in JavaScript is flexible. It can accept 0 or > arguments → providing a range of ways to create Date objects

7. Summary

Handling dates in JavaScript is challenging due to varying time zones and formats. This article should help you cover everything you need to know about JavaScript date handling, from understanding UTC,ISO 8601 and locale time formats. Keep the reference image and code handy for quick access to date formatting options in your projects!

References — w3schools.com

Connect with Me
If you enjoyed this post and would like to stay updated with more content like this, feel free to connect with me on social media:

YouTube: Subscribe to my YouTube Channel for video tutorials and tons of videos on various subjects

Medium: Connect on Medium for blogs on various topic

Personal Website: My Website

Email: Email me on techspacedeck@gmail.com for any questions, comments, or just to say hi!
I appreciate your support and look forward to connecting with you! Happy coding! And Please do not forget to clap 👏