null and undefined in TypeScript

null represents an intentional absence of a value.

let value: null = null;

Here, the variable explicitly contains no value.

undefined usually means that a value has not been assigned.

let value: undefined = undefined;

The variable currently has an undefined value.

Both represent the absence of a normal value, but they are commonly used in different situations.

let selectedUser: null = null;

let userName: string | undefined;

null can indicate an intentionally empty value, while undefined can indicate that a value has not been assigned.

A variable can be assigned null when its type allows null.

let name: string | null = null;

This variable can contain either a string or null.

A variable can be assigned undefined when its type allows it.

let name: string | undefined = undefined;

The variable can contain a string or undefined.

A union type allows a variable to contain a string or null.

let message: string | null = "Hello";

message = null;

Both assignments are valid.

A union type can also allow undefined.

let message: string | undefined = "Hello";

message = undefined;

The variable can contain a string or undefined.

A variable can allow both values using a union type.

let value: string | null | undefined;

value = "Hello";
value = null;
value = undefined;

All three values are allowed.

TypeScript can use the strictNullChecks compiler option to provide stronger checking for null and undefined.

{
    "compilerOptions": {
        "strictNullChecks": true
    }
}

When enabled, null and undefined are not automatically accepted where another specific type is expected.

If a variable should contain either a string or null, explicitly use a union type.

let username: string | null = null;

username = "Rahul";

This clearly describes the possible values.

A number variable can also allow null.

let age: number | null = null;

age = 20;

The variable can contain a number or null.

A boolean can also be combined with null.

let loggedIn: boolean | null = null;

loggedIn = true;

This can be useful when the boolean state is not yet known.

Use an if statement to check whether a value is null.

let name: string | null = null;

if (name === null) {
    console.log("Name is empty");
}

You can compare a value with undefined.

let name: string | undefined;

if (name === undefined) {
    console.log("Name is undefined");
}

The typeof operator returns "undefined" for an undefined value.

let value: undefined = undefined;

console.log(typeof value);

The result is "undefined".

JavaScript has a special behavior for typeof null.

let value = null;

console.log(typeof value);

The result is "object". This is a long-standing JavaScript behavior.

Sometimes a value may not be available. In such cases, undefined can represent the missing value.

let phone: string | undefined;

phone = "9876543210";

A function can return either a value or null.

function getUser(): string | null {
    return null;
}

The return type clearly tells us that the function may return a string or null.

A function can also return undefined.

function getName(): string | undefined {
    return undefined;
}

The return type describes the possible result.

When a function can return null, check the result before using it.

function getUser(): string | null {
    return null;
}

let user = getUser();

if (user !== null) {
    console.log(user.toUpperCase());
}

In React applications, null can be useful when a value is intentionally empty.

let selectedUser: string | null = null;

Later, the selected user can be assigned a string value.

An optional value in a React application may be undefined before it becomes available.

let username: string | undefined;

The value can later be assigned.

In React Native, null can represent an intentionally empty value, such as no selected item.

let selectedItem: string | null = null;

selectedItem = "Home";

React Native applications can also have values that are not available yet.

let token: string | undefined;

token = "ABC123";

The type indicates that the value may initially be undefined.

An API may return null when a particular value does not exist.

type User = {
    name: string;
    profileImage: string | null;
};

Here, profileImage may contain a URL or intentionally contain null.

An optional property may be absent from an object.

type Student = {
    name: string;
    email?: string;
};

If email is not provided, accessing it can produce an undefined value.

The ?? operator provides a fallback when a value is null or undefined.

let name: string | null = null;

let displayName = name ?? "Guest";

console.log(displayName);

The result is "Guest".

A common mistake is using a value that may be null without checking it.

let name: string | null = null;

// Check before using it
if (name !== null) {
    console.log(name.toUpperCase());
}

Checking first makes the code safer.

A variable can allow both null and undefined.

let value: string | null | undefined;

value = "Hello";
value = null;
value = undefined;

This is useful when an application needs to distinguish between normal data and missing or empty values.

null and undefined are both used for values that are not normal data values.

let name: string | null = null;

let age: number | undefined;

let value: string | null | undefined;

Use union types and appropriate checks when a value can be missing.