Function parameters in Javascript - Step-by-Step Execution

Concept Flow - Function parameters

Define function with parameters

↓

Call function with arguments

↓

Parameters receive argument values

↓

Function body uses parameters

↓

Function returns result or ends

This flow shows how a function is defined with parameters, called with arguments, and how parameters get values to be used inside the function.

Execution Sample

Javascript

function greet(name) {
  return `Hello, ${name}!`;
}

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

This code defines a function with one parameter and calls it with an argument, printing a greeting.

Execution Table

Step	Action	Parameter 'name' Value	Output
1	Function greet defined with parameter 'name'	undefined
2	Function greet called with argument 'Alice'	Alice
3	Function body executes: return `Hello, Alice!`	Alice	Hello, Alice!
4	console.log prints the returned string	Alice	Hello, Alice!
5	Function execution ends	undefined

💡 Function ends after returning the greeting string.

Variable Tracker

Variable	Start	After Call	After Return	Final
name	undefined	Alice	Alice	Alice

Key Moments - 2 Insights

Why does the parameter 'name' have the value 'Alice' inside the function?

Because when the function is called (see execution_table step 2), the argument 'Alice' is passed and assigned to the parameter 'name'.

What happens if we call the function without an argument?

The parameter 'name' would be undefined inside the function, so the output would be 'Hello, undefined!'. This is because no value was passed to 'name'.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'name' at step 3?

A null

B undefined

C 'Alice'

D '' (empty string)

💡 Hint

Check the 'Parameter 'name' Value' column at step 3 in the execution_table.

At which step does the function return the greeting string?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for the step where the output column shows the greeting string.

If we call greet() without any argument, what will be printed?

A Hello, !

B Hello, undefined!

C Hello, null!

D Error

💡 Hint

Recall that missing arguments make parameters undefined, see key_moments explanation.

Concept Snapshot

Function parameters are placeholders in function definitions.
When calling the function, arguments fill these parameters.
Inside the function, parameters hold the passed values.
If no argument is passed, parameter is undefined.
Use parameters to make functions flexible and reusable.

Full Transcript

This visual trace shows how function parameters work in JavaScript. First, a function is defined with a parameter named 'name'. When the function is called with the argument 'Alice', the parameter 'name' receives the value 'Alice'. Inside the function body, this value is used to create a greeting string. The function returns this string, which is then printed by console.log. If the function is called without an argument, the parameter 'name' would be undefined, leading to a greeting with 'undefined'. This trace helps understand how parameters receive values and how they are used inside functions.

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