JavaScript Functions for Beginners: A Simple Guide

A JavaScript function is a named, reusable block of code that runs when you call it. Instead of writing the same lines of code over and over, you write them once inside a function and then use that function's name whenever you need it. This guide covers JavaScript functions for beginners from the ground up: how to write one, how to call it, how to pass it information, and how to get a result back. Every example is small enough to copy, paste, and run right away.

If you are brand new to JavaScript, it helps to already know what a variable is, since functions often work with variables. If you have not read it yet, our guide on JavaScript variables and data types is a good place to start before coming back here.

What is a function in JavaScript?

Think of a function like a small machine. You give it some ingredients (called parameters), it does a job with them, and it can hand you back a result. You build the machine once, then use it as many times as you want. In code, that "machine" starts with the word function, followed by a name you choose, a set of parentheses (), and a block of code inside curly braces {}.

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

greet();

Line by line: function tells JavaScript you are creating a function. greet is the name we chose for it. The empty parentheses () mean this function does not need any input. The code between { and } is the function body, the instructions that run every time the function is used. Finally, greet(); on its own line is how you call (run) the function. Without that last line, the function would exist but never actually run.

How to call a function

Writing a function only defines it. To actually run the code inside, you must call it by writing its name followed by parentheses. You can call the same function as many times as you like.

function sayGoodbye() {
  console.log("Goodbye, see you soon!");
}

sayGoodbye();
sayGoodbye();
sayGoodbye();

This prints "Goodbye, see you soon!" three times, once for each call. This is the whole point of functions: write the logic once, reuse it anywhere in your program without copying and pasting the code again.

Parameters and arguments: giving a function input

Most useful functions need some information to work with. You list the names of the values a function expects inside its parentheses. These names are called parameters. When you call the function, the real values you pass in are called arguments.

function greetPerson(name) {
  console.log("Hello, " + name + "!");
}

greetPerson("Maria");
greetPerson("James");

Here, name is the parameter, a placeholder for whatever value gets passed in. "Maria" and "James" are the arguments, the actual values used each time we call the function. The + symbol joins (concatenates) the pieces of text together, so the first call prints "Hello, Maria!" and the second prints "Hello, James!". A function can accept more than one parameter by separating them with commas, like function greetPerson(name, city) { ... }.

Returning a value with return

So far our functions have only printed text to the console. Often you want a function to calculate something and hand the result back to you, so you can use it elsewhere in your code. That is what the return keyword does.

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

let total = addNumbers(4, 7);
console.log(total);

addNumbers takes two parameters, a and b. Instead of printing anything, it uses return to send the value of a + b back to whoever called the function. We store that returned value in a variable named total using let, then print total, which shows 11. As soon as JavaScript hits a return statement, the function stops running and hands back that value. A function without a return statement automatically returns undefined.

Function expressions and arrow functions

The examples above use function declarations, the function keyword followed by a name. JavaScript also lets you store a function inside a variable, which is called a function expression. A shorter, very common way to write these today is the arrow function, using =>.

// Function expression
const multiply = function (a, b) {
  return a * b;
};

// Arrow function (shorter syntax)
const multiplyArrow = (a, b) => {
  return a * b;
};

console.log(multiply(3, 5));
console.log(multiplyArrow(3, 5));

Both multiply and multiplyArrow do exactly the same thing: they take two numbers and return their product. The arrow function replaces the word function with an arrow (=>) placed after the parameter list. Both calls print 15. You will see arrow functions constantly in modern JavaScript and in frameworks like React, so it is worth recognizing this style early, even though function declarations still work perfectly well.

Common mistakes beginners make

• Forgetting the parentheses when calling a function, for example writing greet instead of greet(). This does not run the function at all.
• Forgetting to use return, then wondering why a variable holding the function's result is undefined.
• Mixing up parameters and arguments in your head. Parameters are the names in the function definition; arguments are the real values you send when calling it.
• Defining a function but never calling it. A function only runs when you call it by name with parentheses.
• Using the same name for a parameter and an outer variable, which can make code confusing to read even though it may still work.

Practice: a small real example

Let's combine what you have learned into one useful example: a function that calculates the total price of an order, including tax.

function calculateTotal(price, taxRate) {
  const tax = price * taxRate;
  const total = price + tax;
  return total;
}

const orderTotal = calculateTotal(50, 0.08);
console.log("Total: $" + orderTotal);

calculateTotal takes the price and the taxRate as parameters. Inside the function, we create a variable tax by multiplying price by taxRate, then add it to price to get total, and return that value. We call the function with 50 as the price and 0.08 as an 8% tax rate, store the result in orderTotal, and print "Total: $54". Try changing the numbers and running it again to see how the output changes.

Functions are one of the most important building blocks in JavaScript. Once you are comfortable writing, calling, and returning values from them, you are ready to explore arrays, loops, and eventually frameworks like React, which use functions everywhere.