null vs undefined vs optional

As a developer working on the Apiary platform, it's essential to understand the nuances of null, undefined, and Optional<T> in TypeScript. These concepts might seem trivial at first, but mastering them will help you avoid common pitfalls and write more robust code.

What's the difference between null and undefined?

In JavaScript, both null and undefined represent the absence of a value. However, they have distinct use cases:

Null

null is an object that represents the intentional absence of any object value. Think of it as a "nothing" or "empty" placeholder.

let x = null;
console.log(x === null); // true

Undefined

undefined, on the other hand, is a primitive value that indicates the absence of a value in a variable. It's often used to represent uninitialized variables or properties.

let y; // uninitialized variable
console.log(y === undefined); // true

Why Optional<T> matters

In TypeScript, Optional<T> is a type that represents a value that can be either T (the expected type) or null. This type helps you avoid null-pointer exceptions and makes your code more expressive.

interface User {
  name: string;
}

type OptionalUser = User | null;

let user: OptionalUser = { name: 'John' };
console.log(user); // { name: 'John' }

user = null;
console.log(user); // null

Best practices for working with null and undefined

To avoid common mistakes, follow these guidelines:

1. Use undefined instead of null whenever possible.
2. Avoid using null as a default value; instead, use the Optional<T> type to indicate that a property or variable can be absent.
3. Be explicit about nullability when working with external libraries or APIs.

Real-world example: Avoiding null-pointer exceptions

Suppose you're building an API endpoint that retrieves a user's profile. You want to ensure that the name property is never null. Here's how you can use OptionalUser to achieve this:

interface UserProfile {
  name?: string;
}

type OptionalUserProfile = UserProfile | null;

const getUserProfile = async (): Promise<OptionalUserProfile> => {
  // simulate API call
  return { name: 'John' };
};

try {
  const userProfile = await getUserProfile();
  console.log(userProfile.name); // John
} catch (error) {
  console.error(error);
}

In this example, getUserProfile() returns an OptionalUserProfile, which is either a valid UserProfile object or null. By using the ? optional property, we ensure that the name property can be absent without causing a null-pointer exception.

Related/Sources

• TypeScript documentation: Optional
• JavaScript and TypeScript: The difference between null and undefined

By mastering the nuances of null, undefined, and Optional<T>, you'll write more robust, maintainable code that avoids common pitfalls. Remember to be explicit about nullability, use undefined instead of null when possible, and take advantage of TypeScript's Optional type to ensure your code is null-pointer exception-free.