JavaScript Simplified · One concept, one day, one project · Day 9 of 32

Functions

Packaging a piece of work under a name so you can run it again and again. You build four calculator functions you can call any time.

By the end of today you can

Create a function and call it
Pass information in with parameters and arguments
Send a result back with return
Build reusable calculator functions

So far your code runs once, top to bottom. A function is a named block of code you can run whenever you like, as many times as you like, with different information each time. This is the start of making JavaScript reusable.

1. What a Function Is

Definition

A function is a reusable block of code with a name. You define it once, then call it (run it) by writing its name with brackets.

Real-Life Scenario

A kettle is a function. Someone built it once. You do not rebuild a kettle each time you want tea; you press the button (call it) and it does its job. A function is a button you can press as often as you need.

What this code doesfunction greet() { ... } defines the block. greet() runs it. Calling it twice runs it twice. Defining does not run it; calling does.

app.js

// define the function once
function greet() {
  console.log("Hello from a function!");
}

// call it as many times as you like
greet();
greet();

OUTPUT   TERMINAL

➜ webbo3 node app.js
Hello from a function!
Hello from a function!

2. Parameters and Arguments

Definition

A parameter is a named input a function expects, written in its brackets. An argument is the actual value you pass when you call it. Same slot, two names: the parameter is the label, the argument is the value.

What this code doesThe one function greets anyone. name is the parameter; "Ada" and "Bayo" are the arguments. One block, many results.

app.js

// name is a parameter: a placeholder for whoever we greet
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Ada");   // "Ada" is the argument
greet("Bayo");  // a different argument, a different result

OUTPUT   TERMINAL

➜ webbo3 node app.js
Hello, Ada!
Hello, Bayo!

3. Returning a Value

Definition

return sends a value back out of a function, so the caller can use it. A function that logs something just prints; a function that returns gives you a value to store and reuse.

What this code doesadd returns a + b. The caller stores it in total or uses it straight away. Returning is what makes a function a reusable calculation, not just a printer.

app.js

function add(a, b) {
  return a + b; // hand the sum back to whoever called
}

const total = add(10, 5); // store the returned value
console.log(total);
console.log(add(3, 4) * 2); // use the result right away

OUTPUT   TERMINAL

➜ webbo3 node app.js
15
14

return also ends the function

As soon as a function hits a return, it stops and hands the value back. Any code after the return on that path does not run.

Today’s Mini Project

🧮 Calculator Functions

Turn Day 4’s calculator into four reusable functions: add, subtract, multiply and divide. Once built, you can calculate anywhere by calling them.

What this code doesFour small functions, each doing one job and returning the result. Now a calculation is one short call, and you can reuse these anywhere.

app.js

function add(a, b) { return a + b; }
function subtract(a, b) { return a - b; }
function multiply(a, b) { return a * b; }
function divide(a, b) { return a / b; }

console.log("Sum: " + add(24, 6));
console.log("Difference: " + subtract(24, 6));
console.log("Product: " + multiply(24, 6));
console.log("Quotient: " + divide(24, 6));

OUTPUT   TERMINAL

➜ webbo3 node app.js
Sum: 30
Difference: 18
Product: 144
Quotient: 4

Challenge (15 minutes)

Add a fifth function percentageOf(part, whole) that returns what percent part is of whole. Expected: percentageOf(30, 60) returns 50.

Try This

Write a function square(n) that returns n * n, then print square(5) and square(9).

Expected: 25 and 81, from the same reusable function.

Picture This

Your code is no longer one long script. It is becoming a set of named tools you can pick up and use. Every big program is really a collection of small functions, each doing one clear job.

Checkpoint

What is the difference between defining and calling a function?

Defining creates the block of code under a name but does not run it. Calling, by writing the name with brackets, runs it. You define once and can call many times.

What is the difference between a parameter and an argument?

A parameter is the named placeholder in the function definition. An argument is the actual value you pass when you call it.

What does return do?

It hands a value back out of the function to whoever called it, and ends the function. It turns a function into a reusable calculation whose result you can store and use.

Tick Before You Move On

☐ I can define a function and call it
☐ I can pass values in with parameters and arguments
☐ I can send a result back with return
☐ I built the Calculator Functions

Quick Recap

A function is a named, reusable block of code. Parameters are the inputs it expects; arguments are the values you pass. return hands a value back and ends the function. Programs are built from small functions, each with one clear job.

Next: Day 10. A variable holds one value. But a shopping list has many. Tomorrow you learn arrays, for holding a list of values under one name.

Functions

1. What a Function Is

Definition

Real-Life Scenario

2. Parameters and Arguments

Definition

3. Returning a Value

Definition

Today’s Mini Project

Checkpoint

Learn this with a real instructor