Function parameters in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of function with default parameters

What is the output of the following JavaScript code?

Javascript

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

console.log(greet(undefined, "Hi"));

A "Hi, Guest!"

B "Hi, undefined!"

C "Hello, Guest!"

D "Hello, undefined!"

💡 Hint

Remember that passing undefined triggers default parameters.

When you pass undefined as an argument, the default parameter is used. Here, name is undefined, so it defaults to "Guest". The greeting is "Hi" as passed.

❓ Predict Output

intermediate

Rest parameters and arguments length

What will be logged to the console when this code runs?

Javascript

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4));

A undefined

B 1234

C 10

D TypeError

💡 Hint

Rest parameters collect all arguments into an array.

The rest parameter 'numbers' collects all arguments into an array [1,2,3,4]. The reduce sums them to 10.

❓ Predict Output

advanced

Parameter destructuring with default values

What is the output of this code snippet?

Javascript

function display({name = "Unknown", age = 0} = {}) {
  console.log(`${name} is ${age} years old.`);
}

display({age: 25});

A TypeError

B "Unknown is 25 years old."

C "Unknown is undefined years old."

D "undefined is 25 years old."

💡 Hint

Missing properties use default values in destructuring.

The object passed has age:25 but no name. So name defaults to "Unknown" and age is 25.

❓ Predict Output

advanced

Effect of parameter order with default and rest

What will this code output?

Javascript

function test(a, b = 2, ...rest) {
  console.log(a, b, rest.length);
}

test(1, undefined, 3, 4);

A 1 3 1

B 1 undefined 2

C 1 2 0

D 1 2 2

💡 Hint

Undefined triggers default parameter; rest collects remaining arguments.

a=1, b=undefined triggers default 2, rest collects [3,4] so length is 2.

🧠 Conceptual

expert

Understanding parameter shadowing and closures

Consider the following code. What is the value of variable 'result' after execution?

Javascript

let result;
function outer(x) {
  return function inner(x = 5) {
    result = x;
  };
}

const fn = outer(10);
fn();

A 5

B 10

C undefined

D ReferenceError

💡 Hint

Inner function parameter shadows outer parameter; default applies when no argument passed.

The inner function has a parameter x with default 5. Calling fn() passes no argument, so x=5 inside inner, assigned to result.

Practice

1.

What is the purpose of function parameters in JavaScript?

Choose the best explanation.

easy

A. They make functions run faster.

B. They create new functions automatically.

C. They stop a function from running.

D. They allow you to send information into functions to use inside.

Solution

1. Step 1: Understand what parameters do

   Parameters let you pass values into a function so it can use them inside.

2. Step 2: Evaluate the options

   Only "They allow you to send information into functions to use inside." correctly explains this purpose. Others describe unrelated or incorrect effects.

3. Final Answer:

   They allow you to send information into functions to use inside. -> Option D

4. Quick Check:

   Function parameters = input values [OK]

Hint: Parameters are inputs to functions, like filling a form [OK]

Common Mistakes:

• Thinking parameters create functions
• Believing parameters stop functions
• Assuming parameters speed up functions

2.

Which of the following is the correct way to define a function with two parameters a and b in JavaScript?

function add(???) { return a + b; }

easy

A. (a, b)

B. a b

C. a, b

D. [a, b]

Solution

1. Step 1: Recall function parameter syntax

   Parameters are listed separated by commas inside the function parentheses.

2. Step 2: Identify the correct parameter list

   (a, b) correctly lists parameters as 'a, b' inside parentheses. 'a, b' without parentheses is invalid syntax. Extra parentheses inside parentheses are not used.

3. Final Answer:

   (a, b) -> Option A

4. Quick Check:

   Parameters separated by commas inside () [OK]

Hint: List parameters separated by commas inside function parentheses [OK]

Common Mistakes:

• Using spaces instead of commas
• Adding extra parentheses around parameters
• Using brackets instead of commas

3.

What will be the output of this code?

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('Alice'));

medium

A. "Hello, Alice!"

B. "Hello, name!"

C. undefined

D. Error

Solution

1. Step 1: Understand function call with argument

   The function greet is called with 'Alice' as the argument for parameter name.

2. Step 2: Evaluate template literal output

   The template string inserts the value of name, so it becomes 'Hello, Alice!'.

3. Final Answer:

   "Hello, Alice!" -> Option A

4. Quick Check:

   Parameter value replaces placeholder [OK]

Hint: Parameter value replaces variable inside template strings [OK]

Common Mistakes:

• Thinking parameter name is printed literally
• Expecting undefined if parameter not used
• Confusing string quotes in output

4.

Find the error in this function definition:

function multiply(x, y) {
  return x * y;
}
multiply(5);

What will happen when multiply(5) is called?

medium

A. Throws a syntax error

B. Returns 25

C. Returns NaN

D. Returns 5

Solution

1. Step 1: Check function call with missing argument

   The function multiply expects two parameters but is called with only one argument (5).

2. Step 2: Understand behavior of missing parameter

   The second parameter y is undefined, so x * y becomes 5 * undefined, which results in NaN (Not a Number).

3. Final Answer:

   Returns NaN -> Option C

4. Quick Check:

   Missing argument causes NaN in math operations [OK]

Hint: Missing parameters become undefined, causing NaN in math [OK]

Common Mistakes:

• Expecting default value 0 for missing parameters
• Thinking it throws an error
• Assuming multiply returns the single argument

5.

Consider this function that uses default parameters:

function calculateTotal(price, tax = 0.1, discount = 0) {
  return price + price * tax - discount;
}
console.log(calculateTotal(100, undefined, 5));

What is the output of the console.log statement?

hard

A. 95

B. 105

C. 105.5

D. 105.0

Solution

1. Step 1: Understand default parameters and call

   The function has tax default 0.1 and discount default 0. The call passes price=100, tax=undefined, discount=5.

2. Step 2: Evaluate how undefined affects default

   Passing undefined for tax triggers the default value 0.1 to be used.

3. Step 3: Calculate the total

   Total = 100 + 100 * 0.1 - 5 = 100 + 10 - 5 = 105.

4. Final Answer:

   105 -> Option B

5. Quick Check:

   Undefined triggers default parameter value [OK]

Hint: Passing undefined uses default parameter value [OK]

Common Mistakes:

• Thinking undefined overrides default with undefined
• Ignoring discount in calculation
• Confusing tax and discount values