14.2 Function Parameters and Return Values (20 mins)

  1. What Are Function Parameters?

    • Parameters are variables listed as part of a function’s definition. They act as placeholders for the values you pass into the function when you call it.

    • Example:

      function greet(name) {
  console.log("Hello, " + name);
}
greet("Alice");  // Outputs: Hello, Alice

      • In this case, name is the parameter, and "Alice" is the argument passed into the function.

  2. What Are Return Values?

    • Functions can return values using the return keyword. This allows you to take the result of the function and use it in other parts of the program.

    • Once a return statement is executed, the function exits, and the value is returned.

    • Example:

      function add(a, b) {
  return a + b;
}
let sum = add(5, 3);  // sum is now 8
console.log(sum);  // Outputs: 8

  3. Difference Between Functions With and Without Return Values:

    • With Return Values: The function performs a task and returns a value that can be used elsewhere in the code.

      • Example:

        function multiply(a, b) {
  return a * b;
}
let result = multiply(4, 5);
console.log(result);  // Outputs: 20

    • Without Return Values: The function performs a task (such as printing a message) but does not return a value to the caller.

      • Example:

        function showMessage(message) {
  console.log(message);
}
showMessage("Hello!");  // Outputs: Hello!

  4. Multiple Parameters:

    • Functions can accept multiple parameters. These parameters can then be used to perform operations within the function.

    • Example:

      function subtract(a, b) {
  return a - b;
}
let difference = subtract(10, 4);
console.log(difference);  // Outputs: 6

  5. Practical Example: Temperature Conversion:

    • Task: Write a function that converts temperature from Fahrenheit to Celsius and returns the result.

    • Formula: Celsius = (Fahrenheit - 32) * 5/9

    • Example:

      function fahrenheitToCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}
let celsius = fahrenheitToCelsius(68);  // Converts 68°F to Celsius
console.log(celsius);  // Outputs: 20

Student Activity (20 mins):

Objective: Students will practice writing functions that accept parameters, return values, and differentiate between functions with and without return values.

Step-by-Step Activity:

  1. Create an HTML file (e.g., functions_parameters.html) and write JavaScript code that demonstrates the use of parameters and return values.

  2. Example Code:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Function Parameters and Return Values</title>
</head>
<body>
  <h1>Check the Console for Function Outputs</h1>

  <script>
    // Function without return value: Prints a message
    function showMessage(message) {
      console.log(message);
    }
    showMessage("Hello, World!");  // Outputs: Hello, World!

    // Function with return value: Adds two numbers
    function add(a, b) {
      return a + b;
    }
    let sum = add(5, 7);  // sum is 12
    console.log("Sum: " + sum);  // Outputs: Sum: 12

    // Function with multiple parameters and return value: Subtract two numbers
    function subtract(a, b) {
      return a - b;
    }
    let difference = subtract(10, 3);
    console.log("Difference: " + difference);  // Outputs: Difference: 7
  </script>
</body>
</html>

  3. Run the file in a browser:

    • Open the HTML file in a browser and use Developer Tools (F12 or right-click and select Inspect > Console) to view the output.

    • You should see the message printed from showMessage(), and the results from the add() and subtract() functions.

  4. Activity:

    • Step 1: Run the code and observe how parameters are passed and how return values are used.

    • Step 2: Modify the functions:

      • Write a function called multiply() that takes two numbers as parameters, multiplies them, and returns the result.

      • Write a function called divide() that takes two numbers, divides them, and prints the result (without returning it).

    Challenge:

    • Write a function called max() that takes two numbers as parameters and returns the larger of the two.

      function max(a, b) {
  if (a > b) {
    return a;
  } else {
    return b;
  }
}

console.log(max(10, 20));  // Outputs: 20
console.log(max(100, 50));  // Outputs: 100

Activity Follow-up Questions:

  1. What is the difference between a function that returns a value and one that does not?

  2. How do function parameters allow you to make functions more flexible and reusable?

  3. Can you think of a real-world use case where returning a value from a function is important?

Expected Outcome:

Students will:

  • Understand how to define functions with parameters and use them to pass values to the function.

  • Learn how to use the return keyword to return values from a function and understand the difference between functions with and without return values.

  • Practice creating and modifying functions to perform different tasks based on the values passed into them.

Previous14.1 Introduction to Functions (15 mins)Next14.3 Programming Activity (20 mins)

Last updated