Understanding the Key Differences Between | and || in TypeScript

This blog post will show the difference between these two operators.

In TypeScript, operators are essential tools that allow us to manipulate data and control the flow of applications. Among the various operators, the pipe symbol (|) and the double pipe symbol (||) are often used, but they serve very different purposes.

Understanding the difference between these two operators is crucial for writing efficient and error-free code.

What is this?

The single pipe (|) in TypeScript is known as the union type operator. It allows a variable to hold one of several types, essentially broadening the range of acceptable values for that variable.

On the other hand, the double pipe (||) is the logical OR operator, used to evaluate expressions and return the first truthy value encountered, or the last value if all are falsy.

Why is this?

The union type (|) is vital for situations where a variable can legitimately represent multiple types, offering flexibility while maintaining type safety.

The logical OR operator (||), however, is often used in control flow to set default values or short-circuit evaluations, making it a powerful tool in conditional statements.

Use Case

• Union Type (|): Suppose we're dealing with a function that can return a string or a number based on certain conditions. Using the union type allows us to define a return type that accommodates both possibilities.

  function getId(id: string | number): string {
    return `ID: ${id}`;
  }

• Logical OR (||): We might want to assign a default value to a variable if it’s undefined or null. The logical OR operator helps us to do that efficiently.

  const username = inputUsername || 'Guest';

Pros and Cons

• Union Type (|):

  • Pros:
  • Enhances flexibility and type safety.
  • Reduces the need for extensive type checks.

• Logical OR (||):

  • Pros:
  • Simplifies conditional logic.
  • Provides a quick way to set default values.
  • Cons:
  • May lead to unintended consequences if falsy values are legitimate (e.g., 0, '').
  • Overuse can reduce code clarity.

Conclusion

Both the union type (|) and the logical OR (||) operators are powerful tools in TypeScript, each with its specific use cases and benefits.

if you have any suggestions or questions let me know in comment.

Comments

[Jon Randy 🎖️]

It's probably only the Union Type operator in type definitions though, right? Unless bitwise OR has been excluded from TypeScript? Which I highly doubt.

[Akshat Soni]

Thank you for your insightful comment! You're correct, and I appreciate you bringing this up as it allows me to clarify an important distinction.

[Akshat Soni]

In this blog post, I focused only Unin type. but single pipe (|) indeed serves dual purposes in TypeScript.
a) As the Union Type operator in type definitions, which was the focus of this post.
b) As the Bitwise OR operator in expressions, just like in JavaScript.

[Akshat Soni]

we understand this by take example.

1. Union Type Operator Example `let id: string | number;

// These are valid
id = "abc123"; // OK
id = 42; // OK

// This would cause a TypeScript error
id = true; // Error: Type 'boolean' is not assignable to type 'string | number'`

In this case, TypeScript enforces that id can only be a string or a number, complaining if we try to assign a boolean value.

[Akshat Soni]

1. Bitwise OR Operator Example

let result = 5 | 3;
console.log(result); // Outputs: 7

This performs a bitwise OR operation:
5 in binary: 101
3 in binary: 011
Result: 111 (which is 7 in decimal)

[Akshat Soni]

TypeScript maintains full compatibility with JavaScript operations while extending its capabilities with features like Union Types. The context determines whether the | symbol is used for types or bitwise operations.

Thank you again for helping make this distinction clearer. It's a great reminder of how symbols can have different meanings based on their context in programming languages!

let me If I clarify you or not.

[Jon Randy 🎖️]

Typescript does not have full compatibility with JavaScript as there are examples of code that will run in JS but have a different effect in TS

[Akshat Soni]

I think TypeScript is a superset of JavaScript. Can you please provide some example for me. so I can understand.