Null and undefined types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of function with null and undefined

What is the output of this TypeScript code?

Typescript

function checkValue(x: number | null | undefined) {
  if (x === null) return "Null";
  if (x === undefined) return "Undefined";
  return x * 2;
}

console.log(checkValue(null));
console.log(checkValue(undefined));
console.log(checkValue(5));

A "Null"\n"Undefined"\n10

B null\nundefined\n10

C "Undefined"\n"Null"\n10

D TypeError at runtime

💡 Hint

Check how the function compares the input to null and undefined explicitly.

The function returns "Null" if the input is exactly null, "Undefined" if exactly undefined, otherwise doubles the number. So the outputs are "Null", "Undefined", and 10.

❓ Predict Output

intermediate

Value of variable after assignment

What is the value of variable result after running this code?

Typescript

let value: string | null | undefined = undefined;
value = value ?? "default";
const result = value;

A undefined

B "default"

C null

D TypeError

💡 Hint

The nullish coalescing operator (??) returns the right side if the left side is null or undefined.

Since value is initially undefined, value ?? "default" evaluates to "default". So result is "default".

🔧 Debug

advanced

Why does this code cause an error?

This TypeScript code causes a compile-time error. What is the reason?

Typescript

function greet(name: string | null) {
  console.log("Hello, " + name.toUpperCase());
}

greet(null);

A toUpperCase() is not a function in TypeScript

B Function greet must return a string

C "name" can be null, so calling toUpperCase() causes an error

D null is not assignable to parameter of type string

💡 Hint

Think about what happens if name is null and you call a method on it.

The parameter name can be null, but the code calls name.toUpperCase() without checking. This causes a compile-time error because null has no methods.

🧠 Conceptual

advanced

Difference between null and undefined in TypeScript

Which statement correctly describes the difference between null and undefined in TypeScript?

A <code>null</code> means a variable has no value; <code>undefined</code> means a variable has not been assigned a value

B <code>undefined</code> means a variable has no value; <code>null</code> means a variable has not been assigned a value

C <code>null</code> and <code>undefined</code> are exactly the same in TypeScript

D <code>null</code> is a type; <code>undefined</code> is a value

💡 Hint

Think about what happens when you declare a variable but don't assign it, versus assigning null explicitly.

In TypeScript, undefined means a variable has not been assigned a value yet, while null is an explicit assignment meaning 'no value'.

❓ Predict Output

expert

Output of complex null and undefined checks

What is the output of this TypeScript code?

Typescript

function test(x: string | null | undefined) {
  switch (x) {
    case null:
      return "Null case";
    case undefined:
      return "Undefined case";
    default:
      return x.length;
  }
}

console.log(test(null));
console.log(test(undefined));
console.log(test("hello"));

A "Null case"\n"Undefined case"\n0

B "Undefined case"\n"Null case"\n5

C TypeError at runtime

D "Null case"\n"Undefined case"\n5

💡 Hint

Remember how switch compares values and how string length works.

The switch matches null and undefined cases exactly, returning strings. For "hello", it returns length 5.

Practice

1. What does null represent in TypeScript?

easy

A. A variable that has not been declared

B. A variable that holds a number zero

C. A variable that is still loading

D. A variable that has no value assigned

Solution

1. Step 1: Understand the meaning of null

   null means a variable explicitly has no value.

2. Step 2: Compare with other options

   The incorrect options describe different states or values, not null.

3. Final Answer:

   A variable that has no value assigned -> Option D

4. Quick Check:

   null means no value [OK]

Hint: Remember: null means no value assigned [OK]

Common Mistakes:

• Confusing null with undefined
• Thinking null means variable is undeclared
• Assuming null means zero or empty string

2. Which of the following is the correct way to declare a variable that can hold a string or null in TypeScript?

easy

A. let name: string | null;

B. let name: string & null;

C. let name: string or null;

D. let name: string? null;

Solution

1. Step 1: Recall union type syntax

   In TypeScript, the pipe | is used to allow multiple types.

2. Step 2: Check each option

   let name: string | null; uses | correctly. The other options use invalid syntax.

3. Final Answer:

   let name: string | null; -> Option A

4. Quick Check:

   Union types use | symbol [OK]

Hint: Use | to combine types like string | null [OK]

Common Mistakes:

• Using & instead of | for union types
• Writing 'or' instead of |
• Using invalid syntax like ? null

3. What will be the output of this TypeScript code?

let value: number | undefined;
console.log(value);

medium

A. undefined

B. null

C. 0

D. Error: Variable not initialized

Solution

1. Step 1: Understand variable initialization

   The variable value is declared but not assigned, so it defaults to undefined.

2. Step 2: Check console.log output

   Logging value prints undefined because it has no assigned value.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Unassigned variable = undefined [OK]

Hint: Uninitialized variables print undefined [OK]

Common Mistakes:

• Expecting null instead of undefined
• Assuming default is zero
• Thinking it causes an error

4. Identify the error in this TypeScript code:

let age: number;
age = null;

medium

A. No error, code is correct

B. Variable age is not declared

C. Cannot assign null to a variable of type number

D. Missing semicolon after declaration

Solution

1. Step 1: Check variable type and assignment

   age is declared as number only, so it cannot hold null.

2. Step 2: Understand TypeScript strict null checks

   By default, null is not assignable to number unless union type includes null.

3. Final Answer:

   Cannot assign null to a variable of type number -> Option C

4. Quick Check:

   Assigning null to number causes error [OK]

Hint: Add | null to allow null assignment [OK]

Common Mistakes:

• Ignoring TypeScript strict null checks
• Thinking null is allowed by default
• Confusing missing semicolon as error

5. How can you declare a function parameter in TypeScript that accepts either a string, null, or undefined?

hard

A. function greet(name?: string & null) { console.log(name); }

B. function greet(name: string | null | undefined) { console.log(name); }

C. function greet(name: string & null & undefined) { console.log(name); }

D. function greet(name: string | null?) { console.log(name); }

Solution

1. Step 1: Understand union types for parameters

   To accept multiple types, use | to combine them.

2. Step 2: Analyze each option

   function greet(name: string | null | undefined) { console.log(name); } correctly uses string | null | undefined. function greet(name: string & null & undefined) { console.log(name); } uses & which means intersection (not correct). function greet(name?: string & null) { console.log(name); } uses & which means intersection (not correct). function greet(name: string | null?) { console.log(name); } has invalid syntax.

3. Final Answer:

   function greet(name: string | null | undefined) { console.log(name); } -> Option B

4. Quick Check:

   Use | to allow multiple types in parameters [OK]

Hint: Use | to combine string, null, and undefined types [OK]

Common Mistakes:

• Using & instead of | for union types
• Confusing optional parameter with undefined union
• Writing invalid syntax like null?