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.