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.

Practice

1.

What is the main purpose of default parameters in TypeScript functions?

easy

A. To provide fallback values when arguments are missing

B. To enforce strict typing on function return values

C. To declare variables inside functions

D. To create anonymous functions

Solution

1. Step 1: Understand default parameters

   Default parameters give a value to a function argument if no value is passed.

2. Step 2: Identify the purpose

   This helps avoid errors when arguments are missing by providing fallback values.

3. Final Answer:

   To provide fallback values when arguments are missing -> Option A

4. Quick Check:

   Default parameters = fallback values [OK]

Hint: Default parameters fill missing arguments automatically [OK]

Common Mistakes:

• Confusing default parameters with return type enforcement
• Thinking default parameters declare variables
• Mixing default parameters with anonymous functions

2.

Which of the following is the correct syntax for a TypeScript function with a default parameter of type number?

function multiply(x: number, y: number = 2) { return x * y; }

easy

A. function multiply(x: number, y = 2: number) { return x * y; }

B. function multiply(x = 2: number, y: number) { return x * y; }

C. function multiply(x: number, y: number = 2) { return x * y; }

D. function multiply(x:, y: number = 2) { return x * y; }

Solution

1. Step 1: Check parameter type and default value syntax

   In TypeScript, the type annotation comes before the default value: param: type = default.

2. Step 2: Verify each option

   function multiply(x: number, y: number = 2) { return x * y; } correctly uses y: number = 2. Others have syntax errors or wrong order.

3. Final Answer:

   function multiply(x: number, y: number = 2) { return x * y; } -> Option C

4. Quick Check:

   Type before default value = correct syntax [OK]

Hint: Type annotation before default value: param: type = value [OK]

Common Mistakes:

• Placing default value before type annotation
• Omitting type annotation on default parameter
• Assigning default to wrong parameter

3.

What is the output of the following TypeScript code?

function greet(name: string = "Guest") {
  return `Hello, ${name}!`;
}

console.log(greet());
console.log(greet("Alice"));

medium

A. Hello, undefined!\nHello, Alice!

B. Hello, Guest!\nHello, Alice!

C. Hello, !\nHello, Alice!

D. Error: Missing argument for name

Solution

1. Step 1: Analyze default parameter usage

   Calling greet() without argument uses default "Guest".

2. Step 2: Check outputs for both calls

   First call prints "Hello, Guest!"; second call prints "Hello, Alice!".

3. Final Answer:

   Hello, Guest!\nHello, Alice! -> Option B

4. Quick Check:

   Default parameter used when argument missing [OK]

Hint: Default parameter fills missing argument in function call [OK]

Common Mistakes:

• Expecting undefined instead of default value
• Thinking missing argument causes error
• Ignoring template literal output format

4.

Identify the error in this TypeScript function and choose the correct fix:

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

medium

A. Move the parameter with default value to the end: function calculateArea(height: number, width: number = 5) {...}

B. Remove the default value from width: function calculateArea(width: number, height: number) {...}

C. Add a default value to height: function calculateArea(width: number = 5, height: number = 10) {...}

D. No error; function is correct as is

Solution

1. Step 1: Understand parameter order rules

   In TypeScript, parameters with default values must come after parameters without defaults.

2. Step 2: Fix parameter order

   Moving width with default to the end fixes the error.

3. Final Answer:

   Move the parameter with default value to the end: function calculateArea(height: number, width: number = 5) {...} -> Option A

4. Quick Check:

   Default parameters must be last [OK]

Hint: Put default parameters after required ones [OK]

Common Mistakes:

• Placing default parameters before required ones
• Ignoring TypeScript parameter order rules
• Assuming no error when order is wrong

5.

Consider this function that merges two objects with default parameters:

function mergeOptions(options: { verbose?: boolean } = { verbose: false }, defaults: { verbose: boolean } = { verbose: true }) {
  return { ...defaults, ...options };
}

console.log(mergeOptions());
console.log(mergeOptions({ verbose: true }));

What is the output of the two console.log calls?

hard

A. Error due to conflicting default parameters

B. { verbose: true }\n{ verbose: true }

C. { verbose: true }\n{ verbose: false }

D. { verbose: false }\n{ verbose: true }

Solution

1. Step 1: Understand default parameter values

   Both options and defaults have default objects with verbose flags.

2. Step 2: Analyze object merging

   Using spread, { ...defaults, ...options } merges with options overriding defaults.

3. Step 3: Evaluate calls

   First call uses defaults: options = { verbose: false }, defaults = { verbose: true }, merged result is { verbose: false } because options overwrites defaults.

4. Step 4: Check second call

   Second call passes { verbose: true } as options, so merged result is { verbose: true }.

5. Final Answer:

   { verbose: false }\n{ verbose: true } -> Option D

6. Quick Check:

   Options override defaults in merge [OK]

Hint: Spread merges with later objects overriding earlier ones [OK]

Common Mistakes:

• Confusing which object overrides which in spread
• Assuming default parameters merge automatically
• Ignoring optional property in type