JavaScript Functions

Table of Contents +

In the previous lesson, we learned how to control loops with break and continue. Now let’s learn about functions, the building blocks that let us organize and reuse our code.

📦 What is a Function?

A function is a reusable, named block of code that we can run again and again. We write the instructions once, give them a name, and then run that name whenever we need the work done.

Without functions, we would copy and paste the same lines every time we needed them. That makes our code long, hard to read, and easy to break. Functions solve this by keeping each piece of work in one place.

// A block of code we can run whenever we want
function sayHello() {
  console.log("Hello there!");
}

This code defines a function named sayHello. Let’s read it line by line:

function sayHello() starts the declaration. The function keyword tells JavaScript we are creating a function, and sayHello is the name we will use to run it.
The curly braces { ... } wrap the body, the instructions that run when we use the function.
console.log("Hello there!") is the single instruction inside, which prints a greeting when the function runs.

🧩 The Parts of a Function

Every function declaration is built from a few parts. Let’s break them down.

Part	Example	What it does
`function` keyword	`function`	Tells JavaScript we are declaring a function
Name	`sayHello`	The label we use to run the function later
Parentheses	`()`	Hold inputs for the function (empty for now)
Body	`{ ... }`	The code that runs when the function is called

🏃 Calling a Function

Defining a function does not run it. To actually run the code inside, we have to call it, also known as invoking it. We do this by writing the function’s name followed by parentheses.

function greet() {
  console.log("Welcome to the course!");
}

greet(); // Welcome to the course!
greet(); // Welcome to the course!

Here we define greet once, then run it twice. Let’s walk through what happens:

function greet() { ... } defines the function and stores its instructions, but does not run anything yet.
The first greet() calls the function, so its body runs and prints Welcome to the course!.
The second greet() calls it again, running the same body and printing the message a second time.

This is the real power of functions: write the code once, run it as many times as we like.

Defining is not running

Writing a function only stores the instructions. Nothing happens until we call it with greet(). The parentheses are what tell JavaScript to run it.

🔁 A Practical Example

Functions shine when we have a small task we repeat. Let’s say we want to print a divider line between sections of output.

function printDivider() {
  console.log("------------------------");
}

printDivider();
console.log("Section 1");
printDivider();
console.log("Section 2");
printDivider();

Here we define the divider once and reuse it around our output. Let’s trace the lines:

function printDivider() declares the function, and its body prints a line of dashes.
The first printDivider() prints a divider, then console.log("Section 1") prints the first section title.
The second printDivider() prints another divider, then console.log("Section 2") prints the second title.
The last printDivider() prints a closing divider below everything.

We wrote the divider logic once and called it three times. If we ever want to change the divider, we change it in one place and every call updates automatically. That is exactly why functions matter: they avoid repetition and keep our code organized.

Name functions by what they do

A good function name describes its action, like greet, printDivider, or saveUser. When the name reads like a verb, the code explains itself.

📥 Inputs and Outputs Are Coming

So far our functions always do the exact same thing. Real functions often take in values and hand back results. Giving a function inputs is done with parameters, and sending a value back is done with return.

We will cover both in detail next, so for now just know they exist and that the parentheses are where inputs will go.

⚠️ Common Mistakes to Avoid

Mistake	Problem	Solution
Defining a function but never calling it	The code inside never runs	Call it with its name and `()`
Using the wrong name when calling	`saiHello()` throws “is not defined”	Match the name exactly, including capitalization
Forgetting the parentheses	`greet` refers to the function but does not run it	Add `()` to call it: `greet()`

Here is the parentheses mistake side by side:

function greet() {
  console.log("Hi!");
}

greet; // ❌ Wrong: refers to the function but does not run it
greet(); // ✅ Correct: the parentheses run the function

Let’s compare the last two lines:

greet; without parentheses just refers to the function itself, so nothing runs and nothing prints.
greet(); with parentheses tells JavaScript to run the function, so its body prints Hi!.

🔧 Try It Yourself!

Declare a function named welcome that prints a greeting message.
Call welcome() and confirm the message appears in the console.
Call it three times in a row and watch the message print each time.
Write a printLine function that prints a row of dashes, then use it between two other messages.

🧩 What You’ve Learned

✅ A function is a reusable, named block of code we can run again and again
✅ Functions help us avoid repetition and keep our code organized
✅ We declare a function with function name() { ... }
✅ A function has four parts: the function keyword, a name, parentheses, and a body
✅ Defining a function does not run it; we must call it with name()

🚀 What’s Next?

Now that we can build and call functions, let’s give them inputs so they can do different work each time. Let’s continue to Parameters.

Share & Connect

Share on LinkedIn