Optional parameters in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of function with optional parameter

What is the output of this TypeScript code when calling greet() and greet('Anna')?

Typescript

function greet(name?: string) {
  if (name) {
    return `Hello, ${name}!`;
  } else {
    return 'Hello, stranger!';
  }
}

console.log(greet());
console.log(greet('Anna'));

A Hello, stranger!\nHello, Anna!

B Hello, undefined!\nHello, Anna!

C Hello, !\nHello, Anna!

D Hello, stranger!\nHello, stranger!

💡 Hint

Optional parameters can be omitted and are undefined if not passed.

When greet() is called without arguments, name is undefined, so the else branch runs returning 'Hello, stranger!'. When called with 'Anna', it returns 'Hello, Anna!'.

❓ Predict Output

intermediate

Function call with missing optional parameter

What will be the output of this code snippet?

Typescript

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

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

A 5\n15

B 10\n6

C NaN\n15

D 10\n15

💡 Hint

The ?? operator returns the right side if the left side is null or undefined.

If b is not provided, it is undefined, so b ?? 2 evaluates to 2. So multiply(5) returns 5*2=10. multiply(5,3) returns 5*3=15.

🔧 Debug

advanced

Identify the error with optional parameters

What error will this TypeScript code produce?

Typescript

function log(message: string, prefix?: string) {
  console.log(prefix.toUpperCase() + ': ' + message);
}

log('Hello');

A SyntaxError: Unexpected token

B TypeError: Cannot read property 'toUpperCase' of undefined

C No error, outputs 'undefined: Hello'

D ReferenceError: prefix is not defined

💡 Hint

Optional parameters can be undefined if not passed.

Since prefix is optional and not passed, it is undefined. Calling toUpperCase() on undefined causes a runtime TypeError.

❓ Predict Output

advanced

Output with default and optional parameters

What is the output of this code?

Typescript

function buildName(firstName: string, lastName?: string, title = 'Mr.') {
  if (lastName) {
    return `${title} ${firstName} ${lastName}`;
  } else {
    return `${title} ${firstName}`;
  }
}

console.log(buildName('John'));
console.log(buildName('John', 'Doe'));
console.log(buildName('John', undefined, 'Dr.'));

A Mr. John\nMr. John Doe\nDr. John

B Mr. John\nMr. John Doe\nMr. John

C John\nJohn Doe\nDr. John

D Mr. John\nundefined\nDr. John

💡 Hint

Default parameters are used if the argument is undefined.

When lastName is omitted, the function returns title + firstName. The default title is 'Mr.'. When lastName is provided, it includes it. Passing undefined for lastName triggers default title usage.

❓ Predict Output

expert

Count of arguments with optional parameters

What will be the output of this code?

Typescript

function countArgs(a: number, b?: number, c?: number) {
  return arguments.length;
}

console.log(countArgs(1));
console.log(countArgs(1, 2));
console.log(countArgs(1, 2, 3));

A 0\n1\n2

B 3\n3\n3

C 1\n2\n3

D 1\n1\n1

💡 Hint

The arguments object counts how many arguments were passed.

The arguments.length property returns the number of arguments actually passed to the function, regardless of optional parameters.