Skip to content

JavaScript Functions

Function declarations, arrow functions, parameters, return values, and closures.

What you'll learn

  • Function declarations vs function expressions vs arrow functions
  • Parameters, default values, and the rest parameter (...args)
  • The return statement and why forgetting it returns undefined
  • How this behaves in regular vs arrow functions
  • What closures are and why they are useful

Concept

Three Ways to Write a Function

// 1. Function declaration — hoisted, can be called before definition
function add(a, b) {
  return a + b;
}

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

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

Parameters and Defaults

Functions accept parameters and can give them default values:

function greet(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
greet("Ada");           // "Hello, Ada!"
greet("Ada", "Hi");     // "Hi, Ada!"

The rest parameter ...args collects any extra arguments into an array:

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3, 4); // 10

Return Values

A function returns undefined if it has no return statement or if return is used alone. Forgetting return is one of the most common beginner mistakes:

function double(x) {
  x * 2; // ← forgot return! Returns undefined
}
function doubleFixed(x) {
  return x * 2; // correct
}

Arrow Functions and this

Arrow functions do not have their own this — they inherit it from the surrounding scope. This makes them perfect for callbacks, but bad for object methods that need this:

const obj = {
  value: 42,
  regular: function () { return this.value; },     // 42
  arrow: () => this.value,                          // undefined — no own this
};

Closures

A closure is a function that remembers the variables from where it was created, even after the outer function has returned. This is how you create private state:

function makeCounter() {
  let count = 0;
  return () => ++count; // "remembers" count
}
const counter = makeCounter();
counter(); // 1
counter(); // 2
counter(); // 3

Closures power many patterns: module factories, memoization, partial application, and React hooks.

Example

              // Function declaration with default parameters
function greet(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
console.log(greet("Ada"));        // "Hello, Ada!"
console.log(greet("Ada", "Hi"));  // "Hi, Ada!"

// Arrow function — concise for short transformations
const square = (n) => n * n;
console.log(square(5)); // 25

// Rest parameter collects extra arguments
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4)); // 10

// Closure: a function that remembers its creation scope
function makeAdder(base) {
  return (n) => base + n; // remembers base
}
const addTen = makeAdder(10);
console.log(addTen(5));  // 15
console.log(addTen(20)); // 30

This example shows a declaration with defaults, an arrow function, the rest parameter, and a closure (makeAdder). Closures let you create configurable functions that remember their setup.

Try it

  • Math Evaluator

    Evaluate mathematical expressions — similar to what a function returns.

  • Regex Tester

    Functions often wrap regex logic — test patterns live.

Common mistakes

The mistake

Forgetting the return keyword

The fix

A function without an explicit return statement returns undefined. If your function should produce a value, make sure to write return value;.

The mistake

Using an arrow function as an object method and expecting this to work

The fix

Arrow functions do not have their own this — they inherit it from the surrounding scope. Use a regular function or method shorthand for object methods that need this.

Related Resources

Related Snippets

Related Cheatsheets

Practice JavaScript Functions

2 exercises

Practice JavaScript Functions

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors