Functions: Reusable Code
Learn how functions let you write code once and use it many times -- just like mathematical functions!
What is a Function?
A function is like a recipe. You write it once, give it a name, and then you can use it whenever you need it. Functions take inputs (called parameters), do something with them, and often give back a result (called a return value).
Functions are Like Recipes
Recipe (Real Life)
Name: makeSmoothie
Ingredients (inputs): fruit, milk
Steps: Blend fruit with milk
Result (output): A smoothie!
Function (Code)
function makeSmoothie(fruit, milk) {
return blend(fruit, milk);
}Anatomy of a Function
function calculateArea(length, width) {
let area = length * width;
return area;
}function -- keyword that says "I'm defining a function"
calculateArea -- the function's name (you choose this)
(length, width) -- parameters (inputs the function needs)
return area -- sends the result back to whoever called the function
Maths Connection: f(x) IS a Function!
In Maths, you write functions like this:
f(x) = 2x + 3
When x = 5: f(5) = 2(5) + 3 = 13
In JavaScript, it is written as:
function f(x) {
return 2 * x + 3;
}
display( f(5) ); // Output: 13The input (x) goes in, a calculation happens, and the output comes back. It's the same concept in Maths and in code!
Try It: Interactive Code Examples
Area Calculator Function
function calculateArea(length, width) {
return length * width;
}
// Call the function with different inputs:
display("Area = " + calculateArea(length, width));Even/Odd Checker Function
function isEven(number) {
return number % 2 === 0;
}
// Test the function:
display(number + " is even: " + isEven(number));Maths Function: f(x) = 2x + 3
function f(x) {
return 2 * x + 3;
}
// Test with different values of x:
for (let x = 1; x <= 5; x++) {
display("f(" + x + ") = " + f(x));
}Key Vocabulary
Function
A reusable block of code that performs a specific task. Define once, use many times.
Parameter
An input variable that a function receives. Listed in the parentheses when defining the function.
Argument
The actual value passed to a function when you call it. E.g., in f(5), 5 is the argument.
Return Value
The output that a function sends back using the return keyword.
Call / Invoke
To use a function by writing its name followed by parentheses: calculateArea(5, 3)
Modular Code
Breaking code into small, reusable pieces (functions) instead of one long script.
Worked Examples
What does greet("Sam") return?
function greet(name) {
return "Hello, " + name + "! Welcome.";
}Step 1: The function is called with name = "Sam"
Step 2: It concatenates: "Hello, " + "Sam" + "! Welcome."
Answer: It returns "Hello, Sam! Welcome."
What is the output of this code?
function double(n) {
return n * 2;
}
let result = double(7) + double(3);
display(result);Step 1: double(7) returns 7 * 2 = 14
Step 2: double(3) returns 3 * 2 = 6
Step 3: result = 14 + 6 = 20
Answer: It displays 20. One function, called twice with different arguments!
Write a function to calculate the perimeter of a rectangle
Think: Perimeter = 2 x (length + width). The function needs two parameters.
function perimeter(length, width) {
return 2 * (length + width);
}
display( perimeter(8, 5) ); // Output: 26Answer: perimeter(8, 5) = 2 x (8 + 5) = 2 x 13 = 26
Knowledge Check
Select the correct answer for each question.
Question 1
What does add(4, 6) return?
function add(a, b) {
return a + b;
}Question 2
What is the name for the values you pass INTO a function?
Question 3
If f(x) = 3x - 1, what is f(4)?
Question 4
What does this code display?
function square(n) { return n * n; }
display( square(3) + square(4) );Question 5
Which function correctly calculates the area of a circle (Area = pi x r x r)?
Key Concepts Summary
- ●A function is a reusable block of code. Define it once, use it as many times as you like.
- ●Parameters are inputs to a function. Return values are outputs.
- ●Mathematical functions like f(x) = 2x + 3 are exactly the same concept as coding functions.
- ●Functions make code modular, easier to read, and easier to debug.
- ●You call a function by writing its name followed by parentheses with arguments.