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.

Practice

1.

What does the nullish coalescing operator ?? do in TypeScript?

easy

A. Throws an error if the left value is null or undefined.

B. Returns the right value if the left value is any falsy value like 0 or empty string.

C. Always returns the left value regardless of its content.

D. Returns the right value only if the left value is null or undefined.

Solution

1. Step 1: Understand nullish coalescing behavior

   The operator ?? checks if the left value is null or undefined.

2. Step 2: Determine when right value is returned

   If the left value is null or undefined, it returns the right value; otherwise, it returns the left value.

3. Final Answer:

   Returns the right value only if the left value is null or undefined. -> Option D

4. Quick Check:

   Null or undefined triggers right value [OK]

Hint: Only null or undefined triggers right side [OK]

Common Mistakes:

• Confusing with || operator that checks all falsy values
• Thinking 0 or empty string triggers right value
• Assuming it throws errors on null or undefined

2.

Which of the following is the correct syntax to use nullish coalescing in TypeScript?

const value = input ?? 'default';

easy

A. const value = input ?? 'default';

B. const value = input ??= 'default';

C. const value = input || 'default';

D. const value = input ? 'default' : input;

Solution

1. Step 1: Identify correct nullish coalescing syntax

   The operator ?? is used between two values to provide a fallback if the left is null or undefined.

2. Step 2: Check each option

   const value = input ?? 'default';: const value = input ?? 'default'; uses ?? correctly. const value = input ? 'default' : input; uses ternary, const value = input ??= 'default'; uses nullish assignment ??=, const value = input || 'default'; uses logical OR.

3. Final Answer:

   const value = input ?? 'default'; -> Option A

4. Quick Check:

   Correct nullish coalescing syntax uses ?? [OK]

Hint: Look for ?? between values, not ?: or || [OK]

Common Mistakes:

• Using || which treats 0 or empty string as false
• Confusing with ternary operator syntax
• Using invalid operators like ??=

3.

What is the output of this TypeScript code?

let name: string | null = "";
const displayName = name ?? "Guest";
console.log(displayName);

medium

A. "Guest"

B. null

C. "" (empty string)

D. undefined

Solution

1. Step 1: Check the value of name

   The variable name is an empty string "", which is NOT null or undefined.

2. Step 2: Apply nullish coalescing operator

   Since name is not null or undefined, name ?? "Guest" returns the left value, which is "" (empty string).

3. Final Answer:

   "" (empty string) -> Option C

4. Quick Check:

   Empty string is not nullish, so left value stays [OK]

Hint: Empty string is NOT nullish, so ?? returns left [OK]

Common Mistakes:

• Assuming empty string triggers right side
• Confusing ?? with || operator
• Expecting 'Guest' instead of empty string

4.

Identify the error in this TypeScript code using nullish coalescing:

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

medium

A. Error: nullish coalescing cannot be used with numbers

B. No error; output is 0

C. Error: count cannot be 0

D. Error: must use || instead of ??

Solution

1. Step 1: Analyze the value of count

   The variable count is 0, which is NOT null or undefined.

2. Step 2: Apply nullish coalescing operator

   Since count is 0 (a valid number), count ?? 10 returns 0, no error occurs.

3. Final Answer:

   No error; output is 0 -> Option B

4. Quick Check:

   0 is not nullish, so left value returned [OK]

Hint: 0 is valid, ?? returns left, no error [OK]

Common Mistakes:

• Thinking 0 triggers right side fallback
• Believing ?? cannot be used with numbers
• Confusing ?? with || operator

5.

You have a function that accepts an optional string parameter input. You want to return input if it is not null or undefined, but if it is, return the string "No input". Which is the best way to write this using nullish coalescing?

function getInput(input?: string): string {
  // Fill in the return statement
}

hard

A. return input ?? "No input";

B. return input || "No input";

C. return input ? input : "No input";

D. return input === null || input === undefined ? "No input" : input;

Solution

1. Step 1: Understand the requirement

   Return input if it is NOT null or undefined; otherwise, return "No input".

2. Step 2: Choose the best nullish coalescing usage

   input ?? "No input" returns input if it is not nullish, else "No input". This is concise and clear.

3. Final Answer:

   return input ?? "No input"; -> Option A

4. Quick Check:

   ?? returns left unless null/undefined [OK]

Hint: Use ?? to check only null or undefined [OK]

Common Mistakes:

• Using || which treats empty string as false
• Using ternary unnecessarily
• Checking null and undefined manually instead of ??