Functions and Scope

Functions and Scope | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 28 MIN OF ACTIVE PRACTICE

Learn Functions and Scope step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Design functions with explicit contracts and returned results.
Distinguish parameter, block, function, module, and global scope.
Explain lexical closures without calling them value snapshots.
Separate pure domain logic from effects.

DEEP EXPLANATION

Build the complete mental model

A function contract includes failure behavior

A useful function name describes one responsibility, parameters expose changing inputs, validation protects assumptions, and a return value gives the caller a result. Decide whether invalid input returns a documented alternative or throws; inconsistent mixtures make callers fragile. Default parameters handle absence, not arbitrary invalid values. Keep effects at boundaries when possible so the core transformation can be tested with plain inputs.

Scope controls where a binding can be resolved

let and const are block scoped. Function declarations and parameters create function-local bindings, modules have their own top-level scope, and globals are visible widely. JavaScript resolves a name through its lexical environment—the structure where code was written—not through the function that called it. Shadowing creates a new binding with the same name and can make a correct program difficult to read.

Closures retain access, not frozen copies

When an inner function is created, it retains access to bindings in its lexical environment. If a retained binding later changes, the closure observes that current value. Closures support configured functions, event handlers, and private state, but they can also retain large objects longer than intended. Keep captured dependencies small and explicit, and clean up long-lived listeners when their owner is removed.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Expose a focused contract

The function validates integer cents and returns a result without deciding where it will be rendered.

function applyDiscount(subtotalCents, percent) {
  if (!Number.isInteger(subtotalCents) || subtotalCents < 0) throw new TypeError("Invalid subtotal");
  if (!Number.isFinite(percent) || percent < 0 || percent > 100) throw new RangeError("Invalid percent");
  return Math.round(subtotalCents * (1 - percent / 100));
}

Example 2: Create configured behavior with a closure

Each returned function retains access to its own currency binding.

function createFormatter(locale, currency) {
  const format = new Intl.NumberFormat(locale, { style: "currency", currency });
  return (cents) => format.format(cents / 100);
}

const mad = createFormatter("fr-MA", "MAD");
console.log(mad(12500));

How to trace this lesson

State the accepted inputs, returned output, and failure behavior.
For every name, locate the nearest lexical declaration.
List the bindings captured by each returned or event-handler function.
Move logging, DOM, and network effects outside the core calculation.

Common mistakes and corrections

Forgetting return because the calculation looks complete.: Test the caller-visible result, including undefined.
Reading a variable from an unrelated outer scope.: Pass meaningful dependencies as parameters or explicit configuration.
Assuming a closure copies the initial value.: Remember that it retains access to a binding, whose value may change.

PRACTICE LADDER

Move from recognition to independent work

1
Write a contract before implementing a formatter.
2
Trace shadowed bindings through three nested blocks.
3
Create two independent counters with closures.
4
Refactor a DOM-updating function into calculation and rendering layers.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

A function is a boundary with a contract

Parameters name required inputs, validation protects assumptions, and the return value describes the result. A focused pure function is easy to call with examples because the same inputs produce the same output. Effects such as logging or DOM updates are often clearer at the edge that consumes the returned value.

Closures retain lexical bindings

An inner function can continue using variables from the scope where it was created, even after the outer call finishes. This supports configured functions and private state, but retained references also consume memory. Prefer a small explicit closure over a function that silently depends on many changing outer variables.

RUNNABLE EXAMPLE

Change one assumption at a time

Create two tax calculators with different rates. Call both with the same subtotal and explain why they retain different behavior.

function createTaxCalculator(rate) {
  if (rate < 0) throw new RangeError("Rate must be positive");

  return function calculate(subtotal) {
    return Math.round(subtotal * rate);
  };
}

const calculateVat = createTaxCalculator(0.2);
console.log(calculateVat(1999));

function createTaxCalculator(rate) {
  if (rate < 0) throw new RangeError("Rate must be positive");

  return function calculate(subtotal) {
    return Math.round(subtotal * rate);
  };
}

const calculateVat = createTaxCalculator(0.2);
console.log(calculateVat(1999));

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

function addTax(total) {
  total * rate;
}
console.log(addTax(100));

Reveal repair and explanation

function addTax(total, rate) {
  return total * (1 + rate);
}
console.log(addTax(100, 0.2));

The function neither received rate nor returned its calculation. Make dependencies and results part of the function contract.

INDEPENDENT LAB

Build without copying the example

Create a configurable price formatter that captures a currency and locale, then returns a formatting function.

function createPriceFormatter(locale, currency) {
  // Return a function that formats integer cents.
}

function createPriceFormatter(locale, currency) {
  // Return a function that formats integer cents.
}

Press Run to execute your code.

Self-review checklist Locale and currency are explicit configuration inputs. The returned function validates integer cents. Two configured formatters demonstrate independent retained values.What did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. What does a closure retain? Access to its lexical environment A copy of the whole browser Only global variables

2. Which property makes a function easiest to test? Explicit inputs and a returned result Many hidden global dependencies Changing the DOM in every branch

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering