Function Declarations and Expressions

Functions are the primary building block of JavaScript programs. They let you name and reuse a block of logic, accept inputs via parameters, and return outputs. JavaScript is unique in treating functions as first-class values — they can be assigned to variables, passed to other functions, and returned from functions. In this lesson you will master function declarations, function expressions, default parameters, rest parameters, and the critical differences between them.

Function Types Comparison #

Parameters and Arguments #

Return Values #

Basic Example #

// ── Function declaration — hoisted ────────────────────────────────────────
console.log(add(3, 4));   // 7 — works before declaration due to hoisting

function add(a, b) {
    return a + b;
}

// ── Function expression — not hoisted ────────────────────────────────────
const multiply = function(a, b) {
    return a * b;
};
console.log(multiply(3, 4));  // 12

// ── Default parameters ────────────────────────────────────────────────────
function greet(name = 'Guest', greeting = 'Hello') {
    return `${greeting}, ${name}!`;
}

console.log(greet());                    // 'Hello, Guest!'
console.log(greet('Alice'));             // 'Hello, Alice!'
console.log(greet('Bob', 'Welcome'));    // 'Welcome, Bob!'
console.log(greet(undefined, 'Hi'));     // 'Hi, Guest!' — undefined triggers default

// ── Rest parameters — collect remaining args ──────────────────────────────
function sum(...numbers) {
    return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3));           // 6
console.log(sum(10, 20, 30, 40));    // 100
console.log(sum());                  // 0

// ── Destructured object parameter ────────────────────────────────────────
function createUserCard({ name, age, role = 'viewer', isActive = true } = {}) {
    return {
        display:  `${name} (${age}) — ${role}`,
        isActive,
        initials: name.split(' ').map(w => w[0]).join('').toUpperCase(),
    };
}

console.log(createUserCard({ name: 'Alice Smith', age: 30, role: 'admin' }));
// { display: 'Alice Smith (30) — admin', isActive: true, initials: 'AS' }

// ── Functions as values — assigned, passed, returned ─────────────────────
const operations = {
    add:      (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide:   (a, b) => b !== 0 ? a / b : null,
};

function calculate(op, a, b) {
    const fn = operations[op];
    if (!fn) throw new Error(`Unknown operation: ${op}`);
    return fn(a, b);
}

console.log(calculate('add',      10, 3));   // 13
console.log(calculate('multiply', 10, 3));   // 30
console.log(calculate('divide',   10, 0));   // null

// ── Early return pattern ──────────────────────────────────────────────────
function getDiscount(user, cartTotal) {
    if (!user)               return 0;
    if (cartTotal <= 0)      return 0;
    if (user.role === 'vip') return 0.20;
    if (user.loyaltyYears >= 3) return 0.10;
    if (cartTotal >= 100)    return 0.05;
    return 0;
}

console.log(getDiscount({ role: 'vip', loyaltyYears: 5 }, 50));  // 0.20
console.log(getDiscount({ role: 'user', loyaltyYears: 4 }, 50)); // 0.10
console.log(getDiscount({ role: 'user', loyaltyYears: 1 }, 150));// 0.05

How It Works #

Step 1 — Hoisting Lifts Declarations to the Top #

During the compilation phase, JavaScript scans for function declarations and registers them before any code runs. That is why add(3, 4) works before the function is written. Function expressions (assigned to const) are not hoisted — the variable is in the TDZ until the assignment line executes.

Step 2 — Default Parameters Only Trigger on undefined #

When you call greet(undefined, 'Hi'), the first argument is explicitly undefined — the default 'Guest' kicks in. But greet(null, 'Hi') would give 'Hi, null!' — because null is a value, not undefined. Defaults activate only for missing or explicitly-undefined arguments.

Step 3 — Rest Parameters Collect Extras into a Real Array #

...numbers collects all passed arguments into a genuine array. Unlike the legacy arguments object, it supports every array method. The rest parameter must be the last parameter — function f(first, ...rest) puts the first argument in first and everything else in rest.

Step 4 — Destructured Parameters Unpack Objects Inline #

{ name, age, role = 'viewer' } as a parameter destructures the passed object directly in the signature, with inline defaults for missing keys. The = {} at the end provides a default for the whole argument — so calling the function with no arguments does not throw a TypeError trying to destructure undefined.

Step 5 — Functions Are First-Class Values #

The operations object stores functions as values. calculate looks up the right function by name and calls it. This is the foundation of the strategy pattern — swapping behaviour by passing different functions. It is also how event listeners, array methods, and callbacks all work.

Real-World Example: Form Field Validator Factory #

// validator-factory.js

// Factory function — returns a configured validator function
function createValidator(rules) {
    return function validate(data) {
        const errors = {};

        for (const [field, fieldRules] of Object.entries(rules)) {
            const value = data[field];

            for (const rule of fieldRules) {
                const error = rule(value, field, data);
                if (error) {
                    errors[field] = error;
                    break;  // first failing rule wins per field
                }
            }
        }

        return {
            valid:  Object.keys(errors).length === 0,
            errors,
        };
    };
}

// Reusable rule functions
const required   = (v, f)    => (v == null || String(v).trim() === '') ? `${f} is required` : null;
const minLen     = (min) =>
    (v, f) => (String(v ?? '').length < min) ? `${f} must be at least ${min} characters` : null;
const maxLen     = (max) =>
    (v, f) => (String(v ?? '').length > max) ? `${f} must be ${max} characters or fewer` : null;
const isEmail    = (v, f)    => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v ?? '') ? null : `${f} must be a valid email`;
const isNumeric  = (v, f)    => Number.isFinite(Number(v)) ? null : `${f} must be a number`;
const minVal     = (min) =>
    (v, f) => Number(v) >= min ? null : `${f} must be at least ${min}`;

// Build a reusable validator for a registration form
const validateRegistration = createValidator({
    username: [required, minLen(3), maxLen(20)],
    email:    [required, isEmail],
    age:      [required, isNumeric, minVal(13)],
    password: [required, minLen(8)],
});

console.log(validateRegistration({ username: 'al', email: 'bad', age: '10', password: 'short' }));
// { valid: false, errors: { username: '...3 chars', email: '...valid email', age: '...13', password: '...8 chars' } }

console.log(validateRegistration({ username: 'alice', email: 'a@b.com', age: '25', password: 'secure123' }));
// { valid: true, errors: {} }

Common Mistakes #

Mistake 1 — Calling a function expression before its declaration #

❌ Wrong — function expressions are not hoisted:

console.log(double(5));           // ReferenceError — cannot access before init
const double = (n) => n * 2;

✅ Correct — declare before calling, or use a function declaration:

const double = (n) => n * 2;
console.log(double(5));           // 10 — declared first

Mistake 2 — Using || for default values in function body #

❌ Wrong — || replaces 0 and false with the default:

function setVolume(level) {
    level = level || 50;   // if level is 0, it becomes 50!
}

✅ Correct — use a default parameter:

function setVolume(level = 50) {
    // level is 0 when 0 is passed — default only for undefined
}

Mistake 3 — Forgetting to return from a function #

❌ Wrong — missing return means the function produces undefined:

function double(n) {
    n * 2;   // calculated but not returned!
}
console.log(double(5));   // undefined

✅ Correct — explicitly return the result:

function double(n) {
    return n * 2;
}
console.log(double(5));   // 10

▶ Try It Yourself

Quick Reference #