JavaScript Functions: Writing Reusable Blocks of Code

Imagine you’ve written ten lines of code that calculate the total price of an order including tax. Now you need that same calculation in five different places in your program. Do you copy those ten lines five times? Absolutely not — that’s a maintenance nightmare. Instead, you wrap them in a function: a named, reusable block of code you can run whenever you need it, as many times as you want.

Functions are one of the most important ideas in all of programming. They keep your code organized, cut out repetition, and let you break big problems into small, manageable pieces. Let’s see how they work.

What a function is

A function is a block of code with a name. You define it once, and then you call it (run it) whenever you want. Here’s the simplest possible function:

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

greet();   // runs the function — prints "Hello!"
greet();   // run it again — prints "Hello!" again

Two distinct steps are happening:

• Defining the function: function greet() { ... } creates it and gives it a name, but doesn’t run the code inside yet.
• Calling the function: greet() — the name followed by parentheses — actually runs the code.

Notice we called greet() twice and it ran both times. That’s the whole point: write the code once, run it as often as you like. The parentheses () are what trigger the function to run.

Parameters: giving a function input

A function gets far more useful once you can feed it different information each time you call it. Those inputs are called parameters, and they live inside the parentheses:

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

greet("John Doe");   // "Hello, John Doe!"
greet("Jane Doe");   // "Hello, Jane Doe!"

Here name is a parameter — a placeholder for a value you’ll supply when you call the function. Call greet("John Doe") and the value "John Doe" gets passed in, so name is "John Doe" for that run. The same function now gives different results depending on what you hand it, and that flexibility is exactly what makes functions so useful.

A function can take multiple parameters, separated by commas:

function add(a, b) {
  console.log(a + b);
}

add(5, 3);   // prints 8

Return values: getting something back

So far our functions just print things. But often you want a function to calculate a result and hand it back to you so you can use it. That’s what the return keyword does:

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

const sum = add(5, 3);   // sum is now 8
console.log(sum);        // prints 8

That difference matters. Instead of printing inside the function, add now returns the result, and we catch it in the variable sum. A function that returns a value works like a little machine: you put values in (the arguments) and it hands a value back (the return) that you can store, feed into more math, or pass along to another function.

Two key things about return:

• It hands a value back to wherever the function was called.
• It also ends the function immediately — any code after a return doesn’t run.

A function without a return simply gives back undefined. Use return whenever you want a function to produce a result rather than just perform an action.

Why functions matter: don’t repeat yourself

The real value of functions becomes clear with a practical example. Say you calculate a price with tax in several places:

function priceWithTax(price) {
  return price * 1.11;   // add 11% tax
}

const book = priceWithTax(50000);    // 55500
const pen = priceWithTax(10000);     // 11100
const total = priceWithTax(200000);  // 222000

The tax calculation lives in one place. If the rate ever changes, you edit a single line and every calculation across your whole program is fixed at once. Without the function, you’d have to track down every * 1.11 and change each one by hand — tedious and easy to get wrong. This principle even has a name: DRY — Don’t Repeat Yourself. Functions are the main way you put it into practice.

Arrow functions: the modern shorthand

Modern JavaScript has a shorter way to write functions, called arrow functions. You’ll see them everywhere in current code, so it’s worth recognizing them. Here’s the same add function in both styles:

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

// Arrow function — same thing, shorter
const add = (a, b) => {
  return a + b;
};

The arrow function uses => (the “arrow”) instead of the function keyword, and it’s assigned to a variable. For simple functions that just return a value, you can make it even shorter — drop the braces and the return:

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

That one line does exactly the same thing as the longer versions. Arrow functions are especially common when passing a function to another function (something you’ll do constantly with arrays, coming up next). For now, just know that => is a function — when you see it, read it as “a function that takes these inputs and gives this back.”

A complete example

Let’s tie it together with a small, realistic function that uses parameters, a conditional, and a return value:

function getDiscount(price, isMember) {
  if (isMember) {
    return price * 0.9;   // members get 10% off
  }
  return price;           // non-members pay full price
}

console.log(getDiscount(100000, true));    // 90000
console.log(getDiscount(100000, false));   // 100000

This function takes two inputs, makes a decision based on one of them, and returns the right result. It pulls together everything from the last few articles — variables, a conditional, and now functions — into one reusable, genuinely useful piece of code. This is what real programming starts to look like.

Wrapping up

Functions are how you organize and reuse code, and you’ve now got the essentials:

• A function is a named, reusable block of code. You define it once and call it (with ()) as many times as you like.
• Parameters (in the parentheses) let you pass different inputs each time, so one function handles many cases.
• return hands a value back to the caller and ends the function — use it to produce results.
• Functions keep your code DRY (Don’t Repeat Yourself): write logic once, use it everywhere, change it in one place.
• Arrow functions ((a, b) => a + b) are the modern shorthand you’ll see throughout current JavaScript.

With functions, you can structure programs of real size and complexity. Next, we’ll look at how JavaScript stores collections of values — arrays and objects — which, combined with functions, unlock most of what you’ll build day to day.