What Are JavaScript Functions?

Imagine you’re building a website that welcomes visitors. Every time someone signs in, you want to display a friendly greeting. You could write the same instructions in several places, but that quickly becomes repetitive.

A function groups instructions into a reusable block of code. You define it once, then call it whenever you need it.

function sayHello() {
  console.log("Hello, developer!");
}

sayHello();
sayHello();

The first part defines the function. The parentheses in sayHello() are how you call it. Each call runs the instructions inside the function.

Give Your Functions Information

A greeting that always says the same thing is useful, but what if you want to welcome different visitors? Functions can accept information through parameters.

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

greet("Alex");
greet("Jordan");

name is a parameter: the placeholder in the function definition. "Alex" and "Jordan" are arguments: the actual values supplied when calling the function.

You can add multiple parameters by separating them with commas.

function introduce(name, city) {
  console.log(name + " lives in " + city);
}

introduce("Alex", "Irvine");

Get a Result Back From a Function

Sometimes you don’t want a function to display a message immediately. You want it to calculate or create something that other parts of your program can use.

The return statement sends a result back to the code that called the function.

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

const total = addNumbers(5, 3);

console.log(total);

Here, addNumbers(5, 3) returns 8, which is stored in total. The result can then be displayed, compared, or used in another calculation.

Provide a Backup Value

What happens when someone calls your greeting function without providing a name? You can use a default parameter to supply a fallback value.

function greet(name = "Friend") {
  return "Hello, " + name + "!";
}

console.log(greet("Alex"));
console.log(greet());

The default is used when the argument is omitted or explicitly passed as undefined. It isn’t automatically used for every empty value, such as an empty string.

Default parameters are helpful for creating flexible functions that still work when some information is missing.

Store a Function in a Variable

Functions are values in JavaScript, which means you can store them in variables. This approach is called a function expression.

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

console.log(multiply(4, 5));

The variable multiply refers to a function. Calling multiply(4, 5) runs it just like a function declaration.

One important difference: function declarations can generally be called earlier in the same scope, but a function expression assigned to const cannot be used before that declaration has been initialized.

Write Functions With Modern Syntax

JavaScript offers a shorter way to write many functions using the arrow syntax =>.

const square = (number) => {
  return number * number;
};

console.log(square(6));

For a simple expression, you can make it even shorter.

const square = number => number * number;

console.log(square(6));

Arrow functions are especially common when working with arrays and event callbacks. They aren’t identical to traditional functions: for example, they don’t create their own this binding. You’ll encounter those differences as you advance.

Connect Functions to User Actions

Functions become particularly powerful when they’re connected to webpage events. You can create a reusable function that updates a message whenever someone clicks a button.

function createGreeting(name) {
  return "Welcome to mC0de, " + name + "!";
}

const button = document.getElementById("greetBtn");
const message = document.getElementById("message");

button.addEventListener("click", function() {
  message.textContent = createGreeting("Alex");
});

The createGreeting() function creates the message, while the click handler decides when to display it. Keeping those responsibilities separate makes the code easier to reuse and improve.