JavaScript › Programming Fundamentals

Functions, callbacks, and arrow style

5 min read Beginner 5 sections

Functions package behaviour under a name so you can reuse it. In JavaScript they do more than that: functions are values you can pass around, store in variables, and hand to other functions. That last idea — functions as arguments, called callbacks — is everywhere in modern code, so getting comfortable with it unlocks a huge amount of real-world reading.

You'll learn to

Write functions three ways and read all three
Understand callbacks: functions passed to functions
Recognise the arrow-function style that dominates modern code

Three ways to write a function

// 1. Function declaration:
function greet(name) {
  return "hello " + name;
}

// 2. Function expression (stored in a variable):
const greet2 = function (name) {
  return "hello " + name;
};

// 3. Arrow function (the modern, compact style):
const greet3 = (name) => "hello " + name;

All three do the same thing. The arrow function is the one you’ll see most in modern code — it’s shorter, and when the body is a single expression you can drop the braces and the return. Reading arrow functions fluently is essential because they’re everywhere.

Functions are values — and that gives us callbacks

Because a function is just a value, you can pass one into another function. The passed-in function is called a callback — code to run later, or for each item.

const nums = [1, 2, 3];

// map takes a callback and runs it on each item:
nums.map(function (n) { return n * 2; });   // [2, 4, 6]
nums.map((n) => n * 2);                      // same, arrow style

// Event handlers are callbacks — "run this when clicked":
button.addEventListener("click", () => {
  console.log("clicked");
});

This is the pattern that confuses newcomers and then suddenly clicks: addEventListener doesn’t run your code now — it stores it and runs it later, when the event happens. The function you hand over is a callback.

Default and rest parameters

// Default parameter — used if the caller omits it:
const fetchData = (url, timeout = 5000) => {
  // timeout is 5000 unless the caller passes one
};

// Rest parameter — collects extra arguments into an array:
const logAll = (...messages) => {
  for (const m of messages) console.log(m);
};
logAll("a", "b", "c");   // messages is ["a", "b", "c"]

Checkpoint

In button.addEventListener('click', () => doThing()), when does doThing run — immediately, or later?

Try it yourself

In the console, write an arrow function that takes a number and returns it squared, then use it with array map on the list 1 through 4. Then add an event listener to the document that logs a message on click — and notice it only runs when you actually click.

Summary

Functions package reusable behaviour and can be written as declarations, expressions, or arrow functions (the compact modern style with an implicit return when there are no braces). Because functions are values, you can pass them as callbacks — code run later or per item — which is the pattern behind event handlers, map/filter, and framework hooks. Default and rest parameters handle optional and variable arguments. Watch the this difference between arrow and regular functions.

Key takeaways

Three function styles; arrow functions dominate modern code.
A callback is a function passed to another function, run later or per item.
Arrow functions without braces return their expression implicitly.
Arrow vs regular functions treat this differently — a known bug source.

Quick quiz

That completes the JavaScript fundamentals. The next module goes into core JavaScript — scope, closures, and the mechanics that the security deep-dive builds on.

Was this lesson helpful?