Default parameters with types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of function with default typed parameters

What is the output of this TypeScript function when called as greet()?

Typescript

function greet(name: string = "Guest", age: number = 30): string {
  return `Hello, ${name}! You are ${age} years old.`;
}

console.log(greet());

A TypeError: greet is not a function

B "Hello, undefined! You are undefined years old."

C "Hello, ! You are 0 years old."

D "Hello, Guest! You are 30 years old."

💡 Hint

Check the default values assigned to the parameters in the function signature.

The function greet has default values for both parameters. When called without arguments, it uses these defaults and returns the greeting with "Guest" and 30.

❓ Predict Output

intermediate

Effect of overriding default parameters

What will be the output when calling calculateArea(5) with this function?

Typescript

function calculateArea(width: number, height: number = width): number {
  return width * height;
}

console.log(calculateArea(5));

A 25

B NaN

C 5

D TypeError: height is undefined

💡 Hint

Look at how the default value for height depends on width.

The height parameter defaults to the value of width if not provided. So calculateArea(5) computes 5 * 5 = 25.

🔧 Debug

advanced

Identify the error with default parameter types

What error does this TypeScript code produce?

Typescript

function multiply(a: number = 2, b: number): number {
  return a * b;
}

console.log(multiply(undefined, 3));

A Error: A required parameter cannot follow an optional parameter

B TypeError: b is undefined

C NaN

D 6

💡 Hint

Check the order of parameters with and without default values.

In TypeScript, parameters with default values must come after required parameters. Here, 'a' has a default but comes before 'b' which is required, causing a compile-time error.

❓ Predict Output

advanced

Output with complex default parameter expressions

What is the output of this code?

Typescript

function buildName(firstName: string, lastName: string = firstName.toUpperCase()): string {
  return `${firstName} ${lastName}`;
}

console.log(buildName("john"));

A "john john"

B "john JOHN"

C "undefined undefined"

D TypeError: Cannot read property 'toUpperCase' of undefined

💡 Hint

The default value for lastName uses firstName's value.

The lastName defaults to firstName converted to uppercase. So calling buildName("john") returns "john JOHN".

🧠 Conceptual

expert

Understanding default parameter evaluation timing

Consider this TypeScript code. What will be the output when foo() is called?

Typescript

let x = 10;
function foo(a: number = x) {
  console.log(a);
}

x = 20;
foo();

A ReferenceError: x is not defined

B undefined

C 20

D 10

💡 Hint

Default parameters are evaluated at call time, not at function definition time.

The default parameter 'a' uses the current value of 'x' when foo() is called. Since x was changed to 20 before calling foo(), it prints 20.