Functions

A function is a named piece of logic you can run whenever you want, with different inputs each time. If variables are how you store data, functions are how you do something with it.

Two ways to write one

The classic form is a function declaration:

function greet(name) {
  return "Hello, " + name;
}
 
greet("Anish"); // "Hello, Anish"

The modern, more common form in frontend code is an arrow function:

const greet = (name) => {
  return "Hello, " + name;
};

When the body is a single expression you can drop the braces and the return. This is called an implicit return, and you will see it constantly:

const greet = (name) => "Hello, " + name;
const double = (n) => n * 2;

Parameters and arguments

The names in the definition are parameters. The values you pass in are arguments. You can give a parameter a default so the function still works when an argument is missing:

const greet = (name = "there") => "Hello, " + name;
 
greet("Anish"); // "Hello, Anish"
greet();        // "Hello, there"

Without that default, calling greet() would give you "Hello, undefined" — a bug that reaches production more often than you would expect, because nothing throws an error.

Return values matter

A function that does not explicitly return something returns undefined.

function addQuietly(a, b) {
  a + b; // computed, then thrown away
}
 
const result = addQuietly(2, 3);
console.log(result); // undefined

The fix is one word:

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

Also be aware that return exits the function immediately. Anything after it on the same path never runs:

function checkScore(score) {
  if (score < 0) {
    return "Invalid";
  }
 
  return score >= 40 ? "Pass" : "Fail";
}

That early return pattern is worth getting comfortable with. Handling the odd cases first and returning early keeps the main logic flat and readable, instead of burying it inside nested if-else blocks.

Functions are values

This is the idea that unlocks most of modern JavaScript. A function can be stored in a variable, passed into another function, and returned from one.

const shout = (text) => text.toUpperCase();
 
function applyTwice(fn, value) {
  return fn(fn(value));
}
 
applyTwice(shout, "hey"); // "HEY"

A function that takes or returns another function is called a higher-order function. The next two lessons lean on this heavily — map, filter, and reduce all work by accepting a function you supply.

Try it yourself

Add a discount parameter with a sensible default, then call the function both with and without it.

What to remember

• Arrow functions with implicit returns are the everyday style in frontend code.
• Default parameters stop undefined from silently leaking through.
• No return means the function returns undefined.
• Functions are values, which is what makes array methods and callbacks possible.