Nullish coalescing with types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this code using nullish coalescing?

Consider the following TypeScript code snippet. What will be logged to the console?

Typescript

const value: string | null = null;
const result = value ?? "default";
console.log(result);

A "default"

B null

C undefined

D TypeError

💡 Hint

Remember that nullish coalescing returns the right side only if the left side is null or undefined.

The variable 'value' is null, so the nullish coalescing operator '??' returns the right side, which is the string "default".

❓ Predict Output

intermediate

What is the output when using nullish coalescing with undefined?

Analyze this TypeScript code. What will be printed?

Typescript

let input: number | undefined = undefined;
const output = input ?? 42;
console.log(output);

A undefined

B 0

C 42

D TypeError

💡 Hint

Nullish coalescing treats undefined as nullish and returns the right side.

Since 'input' is undefined, the expression 'input ?? 42' evaluates to 42.

❓ Predict Output

advanced

What is the output when nullish coalescing is combined with a falsy value 0?

Look at this TypeScript code. What will be logged to the console?

Typescript

const count: number | null = 0;
const result = count ?? 10;
console.log(result);

A undefined

B 0

C null

D 10

💡 Hint

Nullish coalescing only treats null or undefined as nullish, not other falsy values like 0.

The variable 'count' is 0, which is falsy but not null or undefined, so 'count ?? 10' returns 0.

❓ Predict Output

advanced

What is the type of the variable after nullish coalescing with union types?

Given this TypeScript code, what is the type of 'finalValue'?

Typescript

type Input = string | null | undefined;
const input: Input = null;
const finalValue = input ?? "fallback";

A never

B string | null

C string | null | undefined

D string

💡 Hint

Nullish coalescing narrows the type by removing null and undefined from the left side.

Since 'input' can be string, null, or undefined, and nullish coalescing replaces null or undefined with a string, 'finalValue' is always a string.

🧠 Conceptual

expert

Which option correctly explains the difference between || and ?? operators in TypeScript?

Choose the best explanation about how the logical OR (||) operator differs from the nullish coalescing (??) operator in TypeScript.

A || returns the right side if the left side is falsy (like 0, '', null, undefined), while ?? returns the right side only if the left side is null or undefined.

B Both || and ?? behave the same and return the right side if the left side is falsy.

C || returns the right side only if the left side is null or undefined, while ?? returns the right side if the left side is falsy.

D || and ?? are interchangeable and have no difference in behavior.

💡 Hint

Think about how 0 or empty string are treated by each operator.

The || operator returns the right side if the left side is any falsy value (0, '', null, undefined), while ?? only returns the right side if the left side is null or undefined.