What Is a Function in JavaScript Beginner Guide

A function is a reusable block of code that does one specific job. You write the code once, give it a name, and then call that name whenever you need the job done. Instead of copying and pasting the same five lines every time, you call the function.

Think of a function like a recipe. The recipe tells you what ingredients to use and what steps to follow, but the recipe itself does not cook anything. You have to follow it. A function is the same: defining it writes the instructions, but calling it actually runs them.

javascript

// Define the function (write the recipe)
function greet() {
  console.log("Hello there!");
}
 
// Call the function (follow the recipe)
greet();
greet();
greet();

Calling greet three times runs the same two lines of code three times over, so the console prints the same greeting three times in a row. Nothing about the function changes between calls, only the number of times you choose to call it does.

text

Hello there!
Hello there!
Hello there!

Three lines of output from two lines of logic. The function body runs fresh every time you call it. That is the core idea: define once, use many times.

Why Functions Matter

Without functions, every program would be one long flat list of instructions. If you needed to do the same calculation in three places, you would copy the same code three times. When a bug appears, you fix it in three places. When requirements change, you update three places.

Functions solve this by giving logic a name and a home. You write the logic once, and every call site just says "do that thing."

This principle has a name: DRY -- Do not Repeat Yourself. Functions are the primary tool for keeping JavaScript code DRY.

Anatomy of a Function

Every function has four parts:

javascript

function add(a, b) {
  return a + b;
}

1. The function keyword -- tells JavaScript you are about to define a function.

2. The name (add) -- what you use to call the function later. Choose names that say what the function does.

3. The parameters (a and b) -- placeholders for values you pass in when calling. They act like local variables inside the function body.

4. The body (the curly-brace block) -- the code that runs every time the function is called.

Calling add with 3 and 4 fills the a and b slots, runs the body, and returns 7.

Parameters and Arguments

Parameters and arguments are easy to confuse because they look like the same thing. They are not.

• Parameters are the names listed in the function definition. They are placeholders.
• Arguments are the actual values you pass when calling the function.

javascript

// price and quantity are PARAMETERS (placeholders)
function calculateTotal(price, quantity) {
  return price * quantity;
}
 
// 19.99 and 3 are ARGUMENTS (actual values)
calculateTotal(19.99, 3); // returns 59.97

If you want to dig deeper into the distinction, see JS Function Parameters vs Arguments Differences.

Return Values

The return statement does two things: it sends a value back to the caller, and it immediately stops the function.

javascript

function double(n) {
  return n * 2;
  console.log("This line never runs");
}
 
const result = double(5);
console.log(result);

The return line sends the doubled value straight back to the caller, so the function exits before the log statement inside it ever runs. That returned value gets stored in the result variable, and logging it prints:

text

10

The line after return is unreachable. Once return executes, the function exits.

If a function has no return statement, it implicitly returns undefined:

javascript

function sayHi() {
  console.log("Hi!");
}
 
const value = sayHi();
console.log(value); // undefined

This is why a logging call prints to the console but its own return value is always undefined. It does a job but returns nothing.

Functions Are Values

In JavaScript, functions are first-class objects. That means you can treat a function like any other value: assign it to a variable, pass it to another function, or return it from a function.

javascript

// Assign a function to a variable
const sayHello = function() {
  console.log("Hello!");
};
 
sayHello(); // Works exactly like a declared function

The function itself has no name here. It is an anonymous function stored in the sayHello variable. You call it through the variable name.

Because functions are values, you can pass them around:

javascript

function runTwice(action) {
  action();
  action();
}
 
runTwice(() => console.log("Running!"));

The runTwice function receives another function through its action parameter, then calls that parameter twice inside its own body. Each call runs the small arrow function passed in, so the console prints the same line twice:

text

Running!
Running!

This pattern, passing functions as arguments, is the foundation of callbacks and higher-order functions.

Function Declaration vs Expression

JavaScript gives you two common ways to define a function. A function declaration names the function directly:

javascript

function multiply(a, b) {
  return a * b;
}

A function expression instead assigns an unnamed function to a variable, so the variable becomes the way you call it:

javascript

const timesTwo = function(a, b) {
  return a * b;
};

The key difference is hoisting. A function declaration is hoisted, meaning you can call it before the line where it appears in the code. A function expression is not hoisted, the variable exists, but the function is not assigned until the line runs.

javascript

// This works (declaration is hoisted)
console.log(double(4)); // 8
 
function double(n) {
  return n * 2;
}
 
// This fails (expression is not hoisted)
console.log(triple(4)); // ReferenceError
 
const triple = function(n) {
  return n * 3;
};

For a full comparison, read JavaScript Function Expressions vs Declarations.

A Quick Look at Arrow Functions

ES6 introduced a shorter syntax called arrow functions. Written as a regular function expression, adding two numbers looks like this:

javascript

const addNumbers = function(a, b) {
  return a + b;
};

The same logic as an arrow function drops the function keyword and the curly braces around a single return statement:

javascript

const addNumbers = (a, b) => a + b;

Arrow functions are concise and do not have their own this binding, which makes them useful for callbacks and functional patterns.

Common Beginner Mistake: Forgetting to Call the Function

A function definition does nothing on its own. Seeing function greet() in your code does not mean it ran. You must write greet() with parentheses to actually call it.

javascript

function greet() {
  console.log("Hi!");
}
 
greet;   // Does nothing visible (just references the function)
greet(); // Prints "Hi!" (calls the function)

The parentheses are the trigger. Without them, you are just pointing at the function, not running it.

Where to Go Next

A function only does its job once you call it, and it can hand data back through a return value. That is the whole idea. From here, learn how to declare and call functions in each of the three available styles, then explore recursion once calling and returning feel natural.