SKU // 38

Functions: The Path

Functions are the single most important building block in JavaScript. Almost everything you write from here on will live inside one. This lesson is a map of where the Functions sections are headed, so each new idea has a place to land. Learn them in order: first the idea, then how to make them, then how to use them.

// What a Function Is

A function is a named, reusable block of code designed to do one particular task. You write it once, then run it whenever you need it, as many times as you like, with different inputs each time.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Ada"));
console.log(greet("Grace"));

Hello, Ada! Hello, Grace!

// Why They Matter

Reuse: write logic once instead of copying it everywhere
Naming: calculateTax(price) explains itself far better than the raw math
Fixing: a bug fixed inside the function is fixed everywhere it is used
Organizing: big problems become a set of small pieces you can test one at a time

// You Have Already Used Them

Every time you wrote console.log(), Math.random(), Number("42"), or "hi".toUpperCase(), you called a function someone else wrote. In JS Control Flow you even saw a preview of writing your own. Now you will learn to write them properly.

// The Vocabulary

function add(a, b) {      // DECLARING the function; a and b are PARAMETERS
  return a + b;           // the BODY; return sends back the RESULT
}

let sum = add(2, 3);        // CALLING it; 2 and 3 are ARGUMENTS

Term	Meaning	In the example
Parameters	The placeholder names in the definition	a, b
Arguments	The real values passed in when calling	2, 3
Body	The work done inside the braces	return a + b;
Return value	What comes back out	5

Keep these straight

Parameters are the names; arguments are the values. And declaring a function only describes it: nothing runs until you call it.

// Think of It Like a Recipe

A recipe card (the function) lists ingredients (parameters) and steps (the body). Writing the card does not make dinner. Cooking it (calling the function) with real ingredients (arguments) produces a meal (the return value). You can cook the same recipe many times with different ingredients.

// The Road Ahead

The Functions sections build one idea at a time:

Step	Lesson	Question it answers
1	Function Intro	How do I write one?
2	Function Invocation	How do I run it, and when does it run?
3	Function Parameters	How do I give it information?
4	Function Returns	How do I get an answer back?
5	Function Arguments	What if I pass more or fewer values?
6	Function Expressions	Can a function be stored in a variable?
7	Arrow Functions	Is there a shorter way to write them?
8	JS Timers	How do I run a function later, or repeatedly?

Steps 1 to 4 are the beginner core; get those solid before moving on. Steps 5 to 8 build on them.

Further down the road

Functions go much deeper than this, and later sections return to them. So the names are familiar when you meet them, here is what the advanced path covers:

Callbacks: passing a function into another function, to be "called back" later
The this keyword: how a function knows which object it belongs to (Objects section)
call(), apply(), bind(): running a function with a chosen this
Self-invoking functions (IIFE): functions that run themselves the moment they are defined
Closures: functions that remember variables from where they were created, even after that code has finished

// Quick Check

In function area(w, h) { return w * h; } followed by area(4, 5), what are 4 and 5?

Parameters
Arguments
Return values
The body

Show answer

B. Arguments are the real values passed in at the call. w and h are the parameters, and 20 is the return value.

You write a function declaration but never call it. What happens when the page loads?

It runs once automatically
It runs every time the page is clicked
Nothing: its code does not run
You get an error

Show answer

C. A declaration only describes what to do. The code inside runs only when something calls the function.

Which of these is not a reason to use functions?

Writing logic once and reusing it
Making code run faster automatically
Fixing a bug in one place instead of many
Breaking a big problem into small named pieces

Show answer

B. Functions are about organization, reuse, and readability. They do not make code faster on their own.

// Try It

List three built-in functions you have already used in earlier lessons
Click Open Playground and call greet with three different names
In the add example, point to the parameters, the arguments, the body, and the return value
Think of a task you have repeated in earlier Try It steps (like formatting a price). What would you name a function that does it?

// Video Walkthroughs

Last updated: Oct 10, 2026, 12:51 AM ET