JavaScript Functions: The Complete Guide (2026)

Quick answer: A JavaScript function packages reusable logic. Declare one with function name() {} or as an arrow function, const name = () => {}. Parameters pass values in; return passes a value out. Modern JavaScript adds default parameters, rest parameters, and optional chaining so functions handle missing data without crashing.The sections below cover JavaScript functions from the three ways to write one through parameters, scope and this, and end with the habit that matters most: one JavaScript function, one job.

JavaScript functions: three ways to write one

// 1. declaration — hoisted, callable before its line
function add(a, b) { return a + b; }

// 2. function expression
const subtract = function (a, b) { return a - b; };

// 3. arrow function — concise, no own this
const multiply = (a, b) => a * b;

Use declarations for named top-level helpers and arrow functions for short callbacks. Arrow functions without braces return their expression implicitly, which makes one-line transforms readable.

Parameters that adapt

// default values
function greet(name = "friend") { return `Hi, ${name}`; }

// rest parameter collects the extras into a real array
function sum(...nums) { return nums.reduce((a, b) => a + b, 0); }

// destructured object parameter — named, order-independent
function draw({ x, y, size = 10 }) { /* ... */ }

draw({ y: 2, x: 1 });

Destructuring an object parameter is the pattern that scales best: callers pass named options in any order, and defaults document the optional ones. It replaces a long positional parameter list that no one can remember.

Scope and why it matters

• Block scope — let and const live inside the nearest pair of braces.
• Function scope — anything declared with var lives in the whole enclosing function.
• Closures — a function remembers the variables where it was defined, even after that outer scope finishes.

function counter() {
  let count = 0;                 // private to this closure
  return () => ++count;
}
const next = counter();
next(); // 1
next(); // 2 — the variable persisted

That closure is the mechanism behind private state, memoisation and event handlers that remember context. It is the single most useful JavaScript idea to understand early.

this, and when it bites

this depends on how a function is called, not where it is written. Arrow functions do not have their own this; they inherit it from the surrounding scope, which is why they are the safe choice for callbacks.

const timer = {
  seconds: 0,
  startBroken() {
    setInterval(function () {
      this.seconds++;      // this is not the timer object
    }, 1000);
  },
  startFixed() {
    setInterval(() => {
      this.seconds++;      // this is the timer object
    }, 1000);
  },
};

The rule of thumb: use arrow functions for anything passed as a callback, and a method shorthand when the function is genuinely a method on an object and needs its own this.

A JavaScript function should do one thing

The most valuable habit with functions is small scope. A function that formats a price should not also fetch it and log it. When it does one thing, you can name it well, test it in isolation and reuse it. As a guide, if you cannot describe what a function does without the word “and”, split it.

Next: arrays and objects, where the data these functions operate on lives. To learn JavaScript with a mentor, Ampersand Academy teaches web development one-to-one.

Frequently asked questions