2.5 Module 2 · Variables, Data Types & Functions

Parameters & Return Values

Master how functions receive data through parameters, how arguments supply the actual values, and how return sends a result back — the complete input-process-output cycle.

Definition

Parameters are variables listed in a function definition that act as placeholders for values. Arguments are the actual values passed to the function when it is called — they fill those placeholders.

A return value is the output that a function sends back to its caller after execution, using the return statement. Without return, the function automatically returns undefined.

Simple Way

Every function follows the same flow: Input → Process → Output

Parameter → The named placeholder defined in the function — function add(a, b)

Argument → The real value passed when calling — add(5, 3)

return → Sends the output back to whoever called the function

Code Examples

Example 1 — Parameters & Arguments

function greet(name) {        // name = parameter
  console.log("Hello " + name);
}

greet("Aman");   // "Aman"  = argument
greet("Rahul");  // "Rahul" = argument — same function, different input

Output

Click ▶ Run to execute

Explanation

name is the parameter — a local variable inside the function
"Aman" and "Rahul" are arguments — the values supplied at call time
The same function produces a customised output for each argument

Example 2 — Return Value

function add(a, b) {
  return a + b;   // sends result back to the caller
}

let result = add(5, 3); // capture the returned value
console.log(result);

// You can also use the return value directly
console.log(add(10, 20));

Output

Click ▶ Run to execute

Explanation

return a + b exits the function and sends the sum back
The returned value can be stored in a variable, passed to another function, or used directly
This makes the function reusable in expressions — not just for printing

Example 3 — No Return → undefined

function test() {
  console.log("Hi"); // prints, but returns nothing
}

let output = test(); // captures the return value

console.log(output); // what is output?

Output

Click ▶ Run — can you predict it?

Explanation

A function with no return statement implicitly returns undefined
console.log() prints a value — it does not return one
Always use return if you need to use the result elsewhere in your code

Example 4 — Default Parameters

function greet(name = "Guest") {  // default value if none given
  console.log("Hello " + name);
}

greet();         // no argument → uses default "Guest"
greet("Aman");   // argument provided → uses "Aman"

Output

Click ▶ Run to execute

Explanation

Default parameters let you define a fallback value used when no argument is passed
If an argument is provided, it overrides the default
They prevent undefined bugs when a caller forgets to pass a value

Real-Life Example

Think of a food-order system at a restaurant:

Function

The kitchen — it knows how to prepare any dish

Parameter

The order slot — "what item?" is the placeholder

Argument

"Veg Pizza" — the specific value you actually order

return

The prepared food delivered back to your table

HTML + JavaScript Example

Click ▶ Preview, enter two numbers, and watch the function receive them as arguments, multiply them, and return the result to the page.

Live in Browser — Multiply with Return

<!DOCTYPE html>
<html>
<head><title>Parameters & Return</title></head>
<body style="font-family:sans-serif;padding:24px;background:#f8f9fa">

  <h2>Multiply Numbers</h2>

  <input id="n1" type="number" placeholder="Number 1"
    style="padding:8px 12px;border:1px solid #ccc;border-radius:6px;
           font-size:1rem;width:130px">

  <input id="n2" type="number" placeholder="Number 2"
    style="padding:8px 12px;border:1px solid #ccc;border-radius:6px;
           font-size:1rem;width:130px;margin-left:8px">

  <button onclick="calculate()"
    style="margin-left:8px;padding:8px 18px;background:#f7df1e;border:none;
           border-radius:6px;cursor:pointer;font-weight:700;font-size:1rem">
    Multiply
  </button>

  <div id="output" style="margin-top:16px;line-height:2;font-size:0.95rem"></div>

  <script>
    // Parameter: a, b — placeholders defined here
    function multiply(a, b) {
      return a * b;  // return sends result back
    }

    function calculate() {
      let a = Number(document.getElementById("n1").value);
      let b = Number(document.getElementById("n2").value);

      if (!document.getElementById("n1").value ||
          !document.getElementById("n2").value) {
        document.getElementById("output").innerHTML =
          "<b style='color:red'>Please enter both numbers.</b>";
        return;
      }

      // Argument: a, b — actual values passed here
      let result = multiply(a, b);

      document.getElementById("output").innerHTML =
        "<b>multiply(" + a + ", " + b + ")</b> returned: " +
        "<b style='color:#e07b00'>" + result + "</b>";
    }
  </script>

</body>
</html>

Live Preview

Tasks (Practice)

Easy Task 1 — Personalised greeting

Starter code

function sayHello(name) {
  // your code here
}

sayHello("Priya");

Inside the function, print "Hello Priya" using the name parameter
Call the function with two different names
Add a default value of "Friend" for when no argument is passed

Medium Task 2 — Average of three numbers

Starter code

function average(a, b, c) {
  // return the average
}

console.log(average(10, 20, 30));

Calculate the sum of a, b, and c
Divide by 3 and return the result
Expected output: 20

MCQs

What is a parameter in a function?

A The output value
B A named input variable in the function definition
C The function name
D A type of error

💡 B is correct. A parameter is the named placeholder inside the function definition — e.g. name in function greet(name). The argument is the actual value you pass when calling it.

What does a function return when it has no return statement?

function noReturn() {
  let x = 5;
}
console.log(noReturn());

Output

Run it to verify

A null
B 0
C undefined
D Error

💡 C is correct. JavaScript automatically returns undefined from any function that does not have an explicit return statement.

What is the output?

function test(a) {
  return a * 2;
}
console.log(test(4));

Output

Run it to verify

A 8
B 4
C undefined
D Error

💡 A is correct. The argument 4 is passed to parameter a. The function returns 4 * 2 = 8, which console.log then prints.

Pro Tips & Extra Knowledge

Always return a value if you need to use it later. A function that only console.logs cannot be reused in expressions:

console.log vs return

// ✗ Not reusable — result is lost
function sumBad(a, b) {
  console.log(a + b);
}

// ✓ Reusable — caller decides what to do with the value
function sumGood(a, b) {
  return a + b;
}

let total = sumGood(5, 10) * 2; // usable in expressions
console.log(total);

Output

Click ▶ Run to execute

02
return immediately stops the function — any code after it in the same block is unreachable:
return stops execution
```
function test() {
  return 5;
  console.log("Hello"); // never runs — dead code
}

console.log(test()); // 5
```
Output

Click ▶ Run to execute

Use default parameters to make functions safer — they prevent undefined when a caller forgets an argument:

Default parameter safety

function power(base, exponent = 2) {
  return base ** exponent;
}

console.log(power(3));    // 3² = 9  (uses default)
console.log(power(3, 3)); // 3³ = 27 (overrides default)

Output

Click ▶ Run to execute

Return values can be passed directly as arguments to another function — this is called function chaining:

Chaining return values

const double = x => x * 2;
const addTen = x => x + 10;

// Pass the return value of double() directly to addTen()
let result = addTen(double(5));
console.log(result); // double(5)=10, addTen(10)=20

Output

Click ▶ Run to execute

Mini Challenge

The return value of the first call becomes the argument of the second — trace through each step before running.

What does this print?

function calc(a, b) {
  return a + b;
}

let x = calc(2, 3);
let y = calc(x, 4);

console.log(y);

Output

Think first, then run!

Step-by-Step Explanation

// Step 1: calc(2, 3)
//         a=2, b=3 → return 2 + 3 = 5
//         x = 5

// Step 2: calc(x, 4)  →  calc(5, 4)
//         a=5, b=4 → return 5 + 4 = 9
//         y = 9

// Step 3: console.log(y)
//         Output → 9

// Key takeaway:
//   The return value of a function becomes a usable value —
//   here it is stored in x and then passed as an argument
//   to the next call. This is the power of return values:
//   functions can be chained and composed together.

2.4 Functions 2.6 Scope