Back

Activity 3.2 Functions with Parameters and Return Values

divider

Introduction

Functions with Parameters and Return Values

Sending and Receiving Data in JavaScript Functions

Why Use Parameters and Returns?

So far, we've created functions that perform actions, but they couldn't accept input or return results.

Parameters and return statements allow data to flow into and out of a function.

Parameters

A parameter is a variable that receives data when a function is called. It lets us reuse one function for different inputs.

function greetUser(name) {
console.log("Hello, " + name + "!");
console.log("Welcome to the Math Utility Program.");
}

Return Values

A function can send data back to the caller using a return statement.

function square(n) {
return n * n;
}

Parameters + Returns Together

Functions can use both parameters and return values to create flexible and reusable tools.

function average(a, b) {
return (a + b) / 2;
}

Data Flow

  1. Parameters are inputs
  2. The function body is the process
  3. The return value is the output

Key Terms

Parameter
A variable listed inside a function’s parentheses that receives input when the function is called.
Argument
The actual value or expression passed into a function when it's called.
Return Value
The value a function sends back to the part of the program that called it.

Key Terms

Return Statement
The command that exits a function and sends a value back to the caller (for example: return total;).
Void Function
A function that performs an action (like printing) but does not return data.
Scope
The part of a program where a variable can be accessed. A parameter has scope only inside its function.

Next Lesson Preview

Designing with Functions: Stepwise Refinement

In the next lesson, you'll use functions to break larger problems into smaller steps and design programs in stages.

'F' → Fullscreen

Objectives

  • icon Define and call functions that take parameters.
  • icon Define and call functions that return values.
  • icon Use both to make functions reusable and flexible.
  • icon Differentiate between parameters and arguments.
divider

Activity Tasks

  • icon Create a new JavaScript file named 3-2-parameters.js.
  • icon Complete each task and test your program output after every function is added.

Task 1: Passing Data into a Function

  • icon Create a function named greetUser(name) that prints a personalized greeting.
  • icon Prompt the user for their name and call the function, passing the input as an argument.
main.js
function greetUser(name) {
console.log("Hello, " + name + "!");
console.log("Welcome to the Math Utility Program.");
console.log();
}
console.log("--- Math Utilities ---");
let userName = prompt("Enter your name: ");
greetUser(userName);

Task 2: Returning a Value from a Function

  • icon Define a function square(n) that returns the square of a number.
  • icon Ask the user for a number, call square(num), and print the result.
main.js
function greetUser(name) {
console.log("Hello, " + name + "!");
console.log("Welcome to the Math Utility Program.");
console.log();
}
function square(n) {
return n * n;
}
console.log("--- Math Utilities ---");
let userName = prompt("Enter your name: ");
greetUser(userName);
let num = parseInt(prompt("Enter a number to square: "));
let result = square(num);
console.log("The square is " + result);
console.log();

Task 3: Combining Parameters and Return Values

  • icon Create a function average(a, b) that returns the average of two numbers.
  • icon Add another function randomInRange(min, max) to return a random integer between two values.
  • icon Test both functions by prompting the user for input and displaying the results.
main.js
function greetUser(name) {
console.log("Hello, " + name + "!");
console.log("Welcome to the Math Utility Program.");
console.log();
}
function square(n) {
return n * n;
}
function average(a, b) {
return (a + b) / 2;
}
function randomInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log("--- Math Utilities ---");
let userName = prompt("Enter your name: ");
greetUser(userName);
let num = parseInt(prompt("Enter a number to square: "));
let result = square(num);
console.log("The square is " + result);
console.log();
let a = parseFloat(prompt("Enter first number: "));
let b = parseFloat(prompt("Enter second number: "));
let avg = average(a, b);
console.log("The average is " + avg);
console.log();
let min = parseInt(prompt("Enter minimum value: "));
let max = parseInt(prompt("Enter maximum value: "));
let random = randomInRange(min, max);
console.log("Random number between " + min + " and " + max + ": " + random);
divider

Sample Output

Your program output should look similar to the example below.

Sample Output
Enter your name: Anthony
Hello, Anthony!
Welcome to the Math Utility Program.
Enter a number to square: 6
The square is 36
Enter first number: 8
Enter second number: 10
The average is 9
Enter minimum value: 1
Enter maximum value: 10
Random number between 1 and 10: 4
divider

Reflection Questions

You may write your reflection answers as comments at the bottom of your code.

  1. What is the difference between a parameter and an argument?
  2. Why does a function that sends back a result need a return statement?
  3. How could one function's return value be used as input to another function?
  4. Why is using parameters and returns more flexible than relying on global variables?
divider

Submission

Submit your completed .js file and reflection answers to the appropriate dropbox.

Activity Complete