Parameters & Return Values — I can use parameters and return values to build reusable solutions and distinguish returning from logging. - Computer Programming 1 JavaScript

SECTION 1

Historical Context & Motivation

Long before JavaScript existed, programmers faced a fundamental problem: they kept writing the same blocks of code over and over again. Early programs in the 1940s were just long lists of instructions with no way to reuse logic. If you needed to calculate a tax rate in three different places, you literally copied and pasted the same math three times. This was slow, error-prone, and painful to update.

The idea of subroutines — reusable chunks of code that accept inputs and produce outputs — changed everything. Mathematicians and computer scientists realized that functions in math (like f(x) = 2x + 1) could inspire the design of programming languages. A function takes something in, does work, and hands something back. This concept evolved over decades into what we now call parameters and return values in modern JavaScript.

1950s • FORTRAN Introduces Subroutines

FORTRAN became the first widely used language to let programmers define reusable subroutines with named inputs, dramatically reducing code duplication.

1972 • C Language Standardizes Functions

The C programming language formalized the idea that every function declares its parameters and returns a single value, creating a pattern that nearly all modern languages follow.

1995 • JavaScript Is Born

Brendan Eich created JavaScript in just 10 days, borrowing C-style function syntax with parameters and return values, making these concepts core to the web.

2015 • ES6 Modernizes Functions

ECMAScript 2015 (ES6) introduced arrow functions, default parameters, and rest parameters, giving developers even more powerful ways to write reusable code.

The central question this lesson addresses is: how do we write functions that are truly reusable? Instead of hardcoding specific values inside a function, we use parameters to let the caller customize the behavior. Instead of just printing results to the console, we use return values so other parts of the program can actually use the output. Understanding the difference between returning a value and logging a value is one of the most important distinctions you'll make as a beginning programmer.

SECTION 2

Core Principles & Definitions

Before diving into code, let's nail down the vocabulary. These four ideas form the foundation of everything in this lesson. Once you understand them, writing and reading functions in JavaScript becomes far more intuitive.

Parameter

A parameter is a named variable listed in a function's definition. It acts as a placeholder for the data the function expects to receive. Think of it as a blank on a form waiting to be filled in.

Argument

An argument is the actual value you pass into a function when you call it. If the parameter is the blank on the form, the argument is the ink you write in that blank.

Return Value

A return value is the data a function sends back to the code that called it. The return keyword stops the function and hands back a result that can be stored, displayed, or used in further calculations.

console.log (Logging)

Calling console.log() prints a value to the developer console for debugging. It does not send a value back to the calling code — the rest of your program cannot use a logged value.

✦

KEY TAKEAWAY

Think of a function like a vending machine. The parameters are the coin slot and selection buttons (inputs). The return value is the snack that drops into the tray (the output you can grab and use). Calling console.log() is like the machine displaying a message on its screen — you can see it, but you can't pick it up and eat it. If you want the rest of your program to actually use the result, you need return.

SECTION 3

Visual Explanation: How Data Flows Through a Function

The diagram below traces exactly what happens when you define a function with parameters and then call it with arguments. Follow the numbered arrows to see how data enters the function, gets processed, and either gets returned to the calling code or merely logged to the console.

Arrow ① shows the argument 5 flowing into the parameter num. Arrow ② shows return sending 10 back to the calling code where it is stored in result. Arrow ③ shows console.log sending 10 only to the console — the calling code gets undefined because no return exists.

Notice the critical difference in the diagram. The top path uses return and produces a value the rest of the program can store and reuse. The bottom path uses console.log and sends output only to the developer console. When a function lacks a return statement, JavaScript automatically returns undefined. This means if you try to save that function's result in a variable, you'll get undefined — even though the correct answer appeared in the console. That disconnect is the number-one source of confusion for new programmers.

SECTION 4

How Parameters & Return Values Work Under the Hood

Defining Parameters

When you write a function definition, you list parameter names inside the parentheses. These names behave like local variables that only exist inside the function body. You can have zero, one, or many parameters separated by commas.

FUNCTION SYNTAX

function name(param₁, param₂, ..., paramₙ) { body; return result; }

param₁ … paramₙ = parameter names (placeholders). body = logic that uses those parameters. result = the value handed back to the caller.

Calling with Arguments

When you call the function, you pass arguments — the real values — in the same order as the parameters. JavaScript matches them up by position: the first argument goes to the first parameter, the second to the second, and so on. If you pass fewer arguments than there are parameters, the extra parameters receive undefined. If you pass more arguments than parameters, the extras are silently ignored.

CALLING SYNTAX

let output = name(arg₁, arg₂, ..., argₙ);

Each arg is matched to the corresponding param by position. The return value is stored in output.

The return Keyword

The return keyword does two things simultaneously. First, it sends a value back to wherever the function was called. Second, it immediately stops the function — any code after a return statement in the same block will never execute. This is a common source of bugs: if you accidentally place code after return, that code is dead code and will be silently skipped.

⚠

Common Mistake

Many beginners write console.log() inside a function thinking it "returns" the result. It doesn't! console.log() is for debugging — it shows you a value in the console but does not pass anything back to the calling code. If you need the result elsewhere, use return.

SECTION 5

Return vs. Log — A Detailed Comparison

This section digs deeper into the distinction between returning and logging. Both return and console.log() involve producing some kind of output, but they serve very different purposes in your program. Understanding when to use each one is essential to writing clean, reusable code.

On the left, the function uses return, so the result 10 is stored in sum and can be reused in math or conditionals. On the right, console.log prints 10 to the console, but sum receives undefined, causing downstream errors like NaN.

Feature	return	console.log()
Purpose	Sends a value back to the caller	Displays a value in the developer console
Can the value be stored?	Yes — assign it to a variable	No — it vanishes after printing
Stops the function?	Yes — nothing after return runs	No — the function continues running
Used in production code?	Absolutely — the backbone of reusable functions	Mainly for debugging — rarely in final products
Can result be used in expressions?	`add(3,7) * 2` → 20	`add(3,7) * 2` → NaN

Key differences between return and console.log()

SECTION 6

Worked Example: Building a Reusable Tip Calculator

Let's build a function step by step that calculates the tip on a restaurant bill. The function should be reusable for any bill amount and any tip percentage, and it should return the result so the rest of the program can display it, add it to a total, or use it however it wants.

Tip Calculator Function

1
Step 1 — Identify the Inputs

We need two pieces of information to calculate a tip: the bill amount and the tip percentage. These become our parameters.

Parameters: billAmount and tipPercent
2
Step 2 — Write the Function Signature

We declare the function with the function keyword, give it a descriptive name, and list our parameters inside parentheses: function calculateTip(billAmount, tipPercent) { }

function calculateTip(billAmount, tipPercent)
3
Step 3 — Write the Logic Inside the Body

Inside the curly braces, we calculate the tip by multiplying billAmount by tipPercent / 100 (dividing by 100 converts the percentage to a decimal). We store the result in a variable called tip.

let tip = billAmount * (tipPercent / 100);
4
Step 4 — Return the Result

We use the return keyword to send tip back to whatever code called this function. This is what makes the function reusable — the caller decides what to do with the returned value.

return tip;
5
Step 5 — Call the Function with Arguments

Now we call the function with specific values. Suppose the bill is $50 and we want a 20% tip. We pass 50 and 20 as arguments and store the return value in a variable called myTip. Now myTip holds 10 and can be used anywhere in our program — we can add it to the bill, display it, or pass it to another function.

let myTip = calculateTip(50, 20); → myTip is 10

💡

Full Code Listing

function calculateTip(billAmount, tipPercent) {
  let tip = billAmount * (tipPercent / 100);
  return tip;
}

let myTip = calculateTip(50, 20);  // 10
let total = 50 + myTip;            // 60
console.log("Total: $" + total);   // prints Total: $60

SECTION 7

When to Return, When to Log, and Common Pitfalls

Now that you understand both approaches, the natural question is: when should I use which? The short answer is that you should almost always return from functions that compute or transform data. Reserve console.log() for temporary debugging when you want to peek at a value while developing. The table below outlines common scenarios and which approach to use.

Scenario	Use return?	Use console.log?	Why
Calculate a grade percentage	✓ Yes	Only for debugging	Other code needs the grade to assign a letter or update a gradebook
Convert Fahrenheit to Celsius	✓ Yes	Only for debugging	The converted value needs to be displayed in the UI or used in further calculations
Check if a value is halfway through a loop	Not usually	✓ Yes	You just want to see what's happening during development
Build a greeting message from a name	✓ Yes	Only for debugging	The greeting string needs to be shown on a webpage or sent to a user

Common scenarios: return vs. console.log

Common Pitfalls

Forgetting to return: You write perfect logic inside a function but forget the return keyword. The function silently returns undefined.
Returning AND logging: Some students write return console.log(value). This actually returns undefined because console.log() itself returns undefined.
Mismatched arguments: Passing arguments in the wrong order (e.g., tip percent first, bill amount second) produces incorrect results with no error message.
Code after return: Any lines after return in the same block are unreachable dead code that will never execute.

✦

KEY TAKEAWAY

Think of return as handing a note to a friend — they can read it, save it, or pass it to someone else. Think of console.log() as shouting the answer out loud in a crowded room — you might hear it, but nobody can grab those words and do something with them later. When in doubt, return first, log for debugging.

SECTION 8

Connection to Advanced Concepts

Parameters and return values are foundational, but they open the door to much more powerful ideas. As you advance in programming, you'll encounter techniques that build directly on what you've learned here. The table below previews how today's concepts connect to topics you'll see in future courses.

What You Learned Today	Where It Leads
Functions accept parameters	Default parameters: ES6 lets you set fallback values like `function greet(name = "stranger")`
Functions return one value	Returning objects/arrays: You can return a single object or array that holds multiple values, effectively returning many results at once
Storing return values in variables	Function composition: You can pass one function's return value directly as an argument to another function, chaining operations together
Writing reusable functions	Higher-order functions: Functions like `.map()` and `.filter()` accept other functions as arguments
Distinguishing return from console.log	Unit testing: Automated tests verify return values — they can't check what was logged to the console

Today's concepts as stepping stones

One particularly exciting preview is function composition. Once you're comfortable returning values, you can start writing code like let result = formatCurrency(calculateTip(50, 20)); — where the return value of calculateTip flows directly into formatCurrency as an argument. This chaining of small, focused functions is the hallmark of clean, professional JavaScript code.

SECTION 9

Practice Problems

Work through these five problems in order. They start with conceptual understanding and build to more challenging applications. For each problem, try writing your answer before looking at the solution.

Question 1: CONCEPTUAL

Consider the following function:

function mystery(x) {
  console.log(x * 3);
}

If you write let answer = mystery(4);, what value does answer hold? What appears in the console? Explain why.

Show answer

The variable answer holds undefined, and the console displays 12. The function uses console.log() instead of return, so the calculated value (4 × 3 = 12) is printed to the console for the developer to see but is never sent back to the calling code. Since there is no return statement, JavaScript automatically returns undefined. This is the classic "return vs. log" trap.

Question 2: BASIC CALCULATION

Write a function called areaOfRectangle that takes two parameters (width and height) and returns the area. Then call it with width = 8 and height = 5, storing the result in a variable called myArea.

Show answer

Here is the solution:

function areaOfRectangle(width, height) {
  return width * height;
}
let myArea = areaOfRectangle(8, 5);

The function declares two parameters, width and height. The body multiplies them and uses return to send the product back. When called with 8 and 5, myArea receives 40. Because we used return instead of console.log, we can now use myArea anywhere else in our program.

Question 3: INTERMEDIATE

Write a function called celsiusToFahrenheit that takes a temperature in Celsius as a parameter and returns the equivalent in Fahrenheit (formula: F = C × 9/5 + 32). Then use the function's return value inside a console.log statement that prints: "72°F" (assuming you pass in a Celsius value that yields 72). What Celsius value should you pass?

Show answer

The solution:

function celsiusToFahrenheit(celsius) {
  return celsius * 9 / 5 + 32;
}
console.log(celsiusToFahrenheit(22.22) + "°F");

To get approximately 72°F, you need to pass roughly 22.22°C (since 22.22 × 9/5 + 32 ≈ 72). The key insight here is that the function returns the numeric value, and then we use that return value inside console.log(). This is the proper pattern: return the data from the function, then let the calling code decide whether to log it, store it, or use it in another calculation. The function itself stays reusable because it doesn't force logging.

Question 4: APPLIED

You're building a simple shopping cart. Write two functions: (1) applyDiscount(price, discountPercent) that returns the discounted price, and (2) addTax(price, taxRate) that returns the price with tax added. Then write code that starts with an item costing $80, applies a 25% discount, then adds 8% tax, and stores the final price in a variable called finalPrice. What is finalPrice?

Show answer

Here is the complete solution:

function applyDiscount(price, discountPercent) {
  return price - price * (discountPercent / 100);
}

function addTax(price, taxRate) {
  return price + price * (taxRate / 100);
}

let discounted = applyDiscount(80, 25);  // 60
let finalPrice = addTax(discounted, 8);  // 64.8

First, applyDiscount(80, 25) calculates 80 − 80 × 0.25 = 60 and returns it. We store that in discounted. Then addTax(60, 8) calculates 60 + 60 × 0.08 = 64.8 and returns it. The final price is $64.80. This demonstrates function composition — the return value of one function feeds into another.

Question 5: CRITICAL THINKING

A classmate writes this code and says it doesn't work. They expect isOldEnough to be true or false, but it's always undefined. Find and fix all the bugs:

function checkAge(age, minimum) {
  let result = age >= minimum;
  console.log(result);
  return;
}

let isOldEnough = checkAge(17, 16);
console.log("Eligible: " + isOldEnough);

Show answer

There are two bugs. First, the return statement is empty — it says return; with no value after it, which returns undefined. It should be return result;. Second, while not a bug per se, the console.log(result) inside the function is unnecessary for production code — it adds noise. The fixed version is:

function checkAge(age, minimum) {
  let result = age >= minimum;
  return result;
}

let isOldEnough = checkAge(17, 16);
console.log("Eligible: " + isOldEnough);

Now isOldEnough correctly holds true because 17 >= 16 evaluates to true, and that value is properly returned. This problem highlights why bare return; statements can be sneaky bugs — they look correct but silently discard the result.

SUMMARY

Lesson Summary

Summary

In this lesson you learned that parameters are named placeholders in a function definition, while arguments are the actual values you pass when calling the function. Together, they make functions reusable — the same logic works for any set of inputs without rewriting code. The return keyword sends a value back to the calling code and immediately stops the function, allowing the result to be stored in a variable, used in expressions, or passed to another function.

The most important distinction in this lesson is between returning and logging. Calling return makes a value available to the rest of your program; calling console.log() merely prints it to the developer console for debugging. A function without a return statement automatically returns undefined. These concepts are the foundation of function composition, modular design, and testable code — skills you'll build on throughout your programming career.