Functions

Reusable blocks of code — declarations, expressions, arrow functions, default parameters, and first-class functions.

What it is, in plain English: A function is a named, reusable block of code that does one specific job. You define it once, then call it as many times as you need. JavaScript has three ways to write a function: declarations, expressions, and arrow functions. Arrow functions are the modern choice for short callbacks; regular functions are needed when you use 'this'. In JavaScript, functions are values — you can store them in variables, pass them to other functions, and return them from functions.

Writing reusable code with functions

Imagine you need to calculate a discount on a price. You write the calculation once. Then you need to apply it to 50 products. Without functions, you'd copy-paste the same calculation 50 times. With a function, you write it once and call it 50 times. Functions are the fundamental unit of reusability.

Three ways to write a function

1. Function declaration — the traditional way:

function calculateDiscount(price, discountPercent) {
  const discount = price * (discountPercent / 100);
  return price - discount;
}

console.log(calculateDiscount(100, 20));  // 80
console.log(calculateDiscount(50, 10));   // 45

2. Function expression — assigned to a variable:

const calculateTax = function(price, rate) {
  return price * rate;
};

console.log(calculateTax(100, 0.18));  // 18

3. Arrow function — modern, concise, preferred for short functions:

// Full arrow function:
const greet = (name) => {
  return `Hello, ${name}!`;
};

// Shorthand: single expression — no braces, no return needed
const greetShort = (name) => `Hello, ${name}!`;

// Single parameter — parentheses optional
const double = n => n * 2;

// No parameters — empty parentheses required
const getRandom = () => Math.random();

console.log(greet("Alice"));       // "Hello, Alice!"
console.log(double(7));            // 14
console.log(getRandom());          // some random number

When to use which

Arrow functions for callbacks and short operations: array.map(x => x * 2)
Function declarations for named, top-level functions you'll call from many places
Avoid function expressions in most cases — arrow functions do the same with less code

Parameters and arguments

// Parameters are the names in the definition:
function add(a, b) {   // a and b are parameters
  return a + b;
}

// Arguments are the actual values you pass when calling:
add(3, 5);   // 3 and 5 are arguments

Default parameters

// If an argument is missing, use the default value:
function createUser(name, role = "viewer", isActive = true) {
  return { name, role, isActive };
}

console.log(createUser("Alice", "admin"));
// { name: "Alice", role: "admin", isActive: true }

console.log(createUser("Bob"));
// { name: "Bob", role: "viewer", isActive: true }  — defaults used

Rest parameters — variable number of arguments

// ...name collects all extra arguments into an array:
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2));          // 3
console.log(sum(1, 2, 3, 4, 5)); // 15
console.log(sum());               // 0

return — sending a value back

function isAdult(age) {
  return age >= 18;   // sends true or false back to the caller
}

const result = isAdult(20);
console.log(result);   // true

// A function without return gives back undefined:
function logMessage(msg) {
  console.log(msg);
  // no return — returns undefined
}
console.log(logMessage("hi"));  // logs "hi", then logs undefined

Functions are values — first-class functions

This is one of JavaScript's most important ideas: functions are values, just like numbers and strings. You can store them in variables, put them in arrays, pass them to other functions, and return them from functions.

// Store in a variable (already seen):
const greet = name => `Hello, ${name}!`;

// Pass to another function (callback):
const names = ["Alice", "Bob", "Charlie"];
const greeted = names.map(name => `Hello, ${name}!`);
console.log(greeted);
// ["Hello, Alice!", "Hello, Bob!", "Hello, Charlie!"]

// A function that takes another function as a parameter:
function doTwice(fn, value) {
  return fn(fn(value));
}
const addTen = n => n + 10;
console.log(doTwice(addTen, 5));   // 25  (5 → 15 → 25)

Try It Yourself

// Function declaration
function add(a, b) {
  return a + b;
}
console.log(add(3, 5));   // 8

// Arrow function — modern, concise
const multiply = (a, b) => a * b;
console.log(multiply(4, 6));  // 24

// Default parameters — used when argument is missing
function greet(name = "stranger") {
  return `Hello, ${name}!`;
}
console.log(greet("Alice"));   // "Hello, Alice!"
console.log(greet());          // "Hello, stranger!"

// Rest parameters — collect extra arguments into an array
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4, 5));   // 15

// Functions as values — pass a function to another function
const numbers = [5, 2, 8, 1, 9, 3];
const sorted = numbers.sort((a, b) => a - b);
console.log(sorted);   // [1, 2, 3, 5, 8, 9]

// Functions returning functions
function makeMultiplier(factor) {
  return (number) => number * factor;
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);
console.log(double(5));  // 10
console.log(triple(5));  // 15

Arrow functions and this, IIFEs, and higher-order patterns

The key difference: arrow functions and this

Regular functions have their own this — it depends on how they're called. Arrow functions don't have their own this — they inherit it from the surrounding scope.

const timer = {
  seconds: 0,

  // Regular function — this gets rebound when used as a callback:
  startWrong() {
    setInterval(function() {
      this.seconds++;             // 'this' is undefined (strict) or window — WRONG
      console.log(this.seconds);  // NaN or error
    }, 1000);
  },

  // Arrow function — this stays bound to timer:
  startRight() {
    setInterval(() => {
      this.seconds++;             // 'this' is timer — CORRECT
      console.log(this.seconds);  // 1, 2, 3 ...
    }, 1000);
  }
};

Rule of thumb: use arrow functions for callbacks. Use regular functions (or methods) when the function needs its own this (event listeners, constructors, object methods).

IIFE — Immediately Invoked Function Expression

// Define and call immediately — creates a private scope
(function() {
  const privateVar = "only exists in here";
  console.log(privateVar);
})();

// Modern alternative — just use a block with let/const (ES6+):
{
  const privateVar = "only exists in here";
  console.log(privateVar);
}

Higher-order functions and function composition

// A function that returns a function:
function makeAdder(x) {
  return y => x + y;  // closes over x
}
const add5  = makeAdder(5);
const add10 = makeAdder(10);
console.log(add5(3));   // 8
console.log(add10(3));  // 13

// compose — run functions right to left:
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const transform = compose(
  x => x * 2,
  x => x + 10,
  x => x - 3
);
console.log(transform(5));  // ((5-3)+10)*2 = 24

Function.prototype.bind, call, apply

function introduce(greeting, punctuation) {
  return `${greeting}, I'm ${this.name}${punctuation}`;
}

const user = { name: "Alice" };

// call — invoke with explicit this and individual args:
introduce.call(user, "Hello", "!");     // "Hello, I'm Alice!"

// apply — invoke with explicit this and args as array:
introduce.apply(user, ["Hi", "."]);     // "Hi, I'm Alice."

// bind — create a new function with this permanently set:
const boundIntroduce = introduce.bind(user, "Hey");
boundIntroduce("?");   // "Hey, I'm Alice?"

Function objects, [[Call]], tail calls, and the arguments object

Functions are callable objects

Functions are ordinary objects with an additional [[Call]] internal method (and [[Construct]] for constructors). They have a name property (the function's identifier, inferred for expressions), a length property (number of formal parameters, excluding rest and defaults), and a [[Prototype]] of Function.prototype.

const add = (a, b) => a + b;
console.log(add.name);    // "add" — inferred from variable name
console.log(add.length);  // 2 — number of parameters

function withDefault(a, b = 0, ...rest) {}
withDefault.length  // 1 — only a counts (defaults and rest excluded)

The arguments object (legacy)

function oldStyle() {
  // arguments is array-like (has length, indexable) but NOT an array:
  console.log(arguments[0]);            // first arg
  console.log(Array.from(arguments));   // convert to real array
}

// Arrow functions do NOT have arguments — use rest params instead:
const modern = (...args) => args;  // args is a real Array

Proper tail calls (PTC)

ES2015 specifies that tail calls — calls in tail position (the last action before return) — should be optimised to not grow the stack. This enables recursive algorithms that run in O(1) stack space. In strict mode only:

"use strict";
// Tail-recursive factorial — the recursive call is in tail position:
function factorial(n, acc = 1) {
  if (n <= 1) return acc;
  return factorial(n - 1, n * acc);  // tail call — PTC applies
}
// V8 removed PTC support; JavaScriptCore (Safari) still implements it.
// In practice, use iteration or trampolining for large recursion.

Generator functions

// function* creates a generator — a function that pauses and resumes:
function* count(start = 0) {
  while (true) {
    yield start++;  // pause here, return start, resume next .next() call
  }
}

const counter = count(1);
console.log(counter.next().value);  // 1
console.log(counter.next().value);  // 2
console.log(counter.next().value);  // 3
// Generators implement the iterator protocol — usable in for...of

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.