JavaScript Functions: How to Declare and Call Them

A JavaScript function is a named block of code you can run whenever you need it. Learn how to declare a function, call it, and name it well.

Why do functions exist? The recipe analogy

A function is like a recipe. You write the recipe for pancakes once. After that, whenever you want pancakes, you just say "make pancakes" and follow the same steps. You do not rewrite the recipe every morning.

In code, a function is a set of instructions with a name. You write it once and use it as many times as you like. This brings three big benefits:

• Less repetition: you write the steps one time.
• Easier changes: fix a bug in one place and it is fixed everywhere.
• Clearer code: a good name like showWelcomeMessage() tells the reader what happens without reading every line.

How to declare a function in JavaScript

Creating a function is called declaring (or defining) it. A function declaration looks like this:

function greetUser() {
  console.log("Hello! Welcome to CodeCraft.");
  console.log("Let's write some JavaScript today.");
}

Let's look at each part:

• function is the keyword that tells JavaScript "a function starts here".
• greetUser is the name you choose.
• () round brackets come after the name. Later you will put inputs here.
• { } curly braces hold the body, the code that runs when the function is used.

If you run this code, nothing appears in the console. That is normal. Declaring a function is like writing down a recipe: no pancakes are made yet.

How to call a function

To run the code inside a function, you call it (also called "invoking" it). Write its name followed by round brackets:

function greetUser() {
  console.log("Hello! Welcome to CodeCraft.");
}

greetUser();
greetUser();
// Output:
// Hello! Welcome to CodeCraft.
// Hello! Welcome to CodeCraft.

Each greetUser(); runs the whole body once. We called it twice, so the message appears twice.

Common mistake: Writing greetUser without the brackets. That does not run the function. It only refers to it, like pointing at a recipe book without cooking. Always add () to call a function.

The DRY idea: Don't Repeat Yourself

Programmers have a rule called DRY: Don't Repeat Yourself. If you copy and paste the same lines in several places, those lines probably belong in a function.

Here is a small shop example. Without a function, we repeat the same divider lines:

console.log("==========");
console.log("Order #1 received");
console.log("==========");
console.log("Order #2 received");
console.log("==========");

With a function, the divider lives in one place:

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

printDivider();
console.log("Order #1 received");
printDivider();
console.log("Order #2 received");
printDivider();
// Output is the same as before

Now if your boss wants the divider to be ---------- instead, you change one line, not five. In the next lesson you will see how to pass information into functions, so even the order number can be handled by a function.

How to name functions: use verbs

Functions do things, so their names usually start with a verb (an action word). Use camelCase, as you do for variables.

Good name	Why it works
showMenu()	Clear action and target
calculateTotal()	Says exactly what it computes
isLoggedIn()	Starts with "is", so it answers yes or no
data() (bad)	No verb, so you cannot guess what it does

Tip: If you cannot think of a short name for a function, it may be doing too many things. Try splitting it into two smaller functions.

What is hoisting? (in simple words)

JavaScript reads your whole file before it runs it. During that first read, it notes all function declarations. This means you can call a function declaration before the line where you wrote it. This behaviour is called hoisting, as if the function is "lifted" to the top.

sayGoodMorning();

function sayGoodMorning() {
  console.log("Good morning!");
}
// Output: Good morning!

This works only for function declarations (the function name() {} style). In the Arrow Functions lesson you will meet other ways to create functions that are not hoisted like this. Many developers still prefer to declare functions first and call them after, because the code then reads from top to bottom.

Practice exercise

Write a function called printBusinessCard that prints three lines to the console: your name, a job title, and an email address. Call it three times. Then change the job title inside the function and run the code again to see every card update.

Hint: Put three console.log() lines inside the curly braces, then write printBusinessCard(); three times below the function.

Key takeaways

• A function is a named, reusable block of code, like a recipe.
• Declare it with function name() { ... } and call it with name();.
• Follow DRY: when you repeat code, move it into a function.
• Start function names with a verb, such as showMenu or calculateTotal.
• Function declarations are hoisted, so they can be called before the line where they are written.

Frequently asked questions

What is the difference between declaring and calling a function?

Declaring creates the function and gives it a name, but runs nothing. Calling, with name(), actually runs the code inside it.

How many times can I call a function?

As many times as you want. That is the whole point of a function: write once, use many times.

Can a function call another function?

Yes. A function body can contain any code, including calls to other functions. This is how big programs are built from small pieces.