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.

Where this bites you

Passing a function straight into map looks tidy: strings.map(parseInt). But map calls its callback with three arguments (the value, its index and the array), and parseInt treats its second argument as the number base. So the second item is parsed in base 1 and the third in base 2. Three identical strings come back as three different results, with no error.

const fromCsv = ["10", "10", "10"];

console.log(fromCsv.map(parseInt));   // [ 10, NaN, 2 ]

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

First-class functions can be passed around, but they still receive every argument the caller supplies. Here that's parseInt("10", 0), parseInt("10", 1) and parseInt("10", 2). Wrap the call so you decide which arguments it gets, or pass a function that takes exactly one argument:

const fromCsv = ["10", "10", "10"];

console.log(fromCsv.map((s) => parseInt(s, 10)));   // [ 10, 10, 10 ]
console.log(fromCsv.map(Number));                   // [ 10, 10, 10 ]

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.