Functions & Scope

Functions are JavaScript’s primary unit of abstraction. Understanding how they interact with scope and this removes the guesswork from how variables are found and how this gets bound.

Function Declarations vs Expressions vs Arrow Functions

// Declaration — hoisted entirely; callable before the line it appears on
function add(a: number, b: number): number {
  return a + b;
}

// Expression — only the variable binding is hoisted (as undefined with var,
// or TDZ with let/const); the function itself is NOT hoisted
const multiply = function (a: number, b: number): number {
  return a * b;
};

// Arrow function — same hoisting as an expression;
// does NOT have its own `this`, `arguments`, or `prototype`
const divide = (a: number, b: number): number => a / b;

Hoisting

JavaScript’s engine makes two passes: a compilation pass that records all declarations, then an execution pass. The result:

• function declarations are hoisted with their body — you can call them above their source position.
• var variables are hoisted as undefined — the name exists but has no useful value yet.
• let / const / class are hoisted to the top of their block but stay in the TDZ until the declaration line runs.

greet(); // works — declaration hoisted
function greet() { console.log("hi"); }

console.log(x); // undefined — var hoisted
var x = 5;

console.log(y); // ReferenceError — TDZ
let y = 5;

Lexical Scope and the Scope Chain

JavaScript uses lexical scope: which scope a variable belongs to is determined by where the code is written, not where it is called. When the engine looks up a name, it searches:

1. The current function’s local scope
2. The enclosing function’s scope (if any)
3. The next outer scope, continuing outward
4. The global scope

graph TD
    G["Global scope\n(window / globalThis)"]
    O["outer()\nscope: result, inner"]
    I["inner()\nscope: (nothing new)"]
    G --> O --> I
    I -->|"looks up 'result'"| O
    O -->|"looks up 'Math'"| G

const result = 10; // global

function outer() {
  const result = 20; // shadows global

  function inner() {
    console.log(result); // 20 — finds it in outer's scope first
  }
  inner();
}
outer();

The this Keyword

this is not about where a function is written — it is about how it is called. There are four binding rules, evaluated in order:

Arrow functions ignore all four rules — they capture this from the surrounding lexical scope at the time they are defined. This makes them ideal for callbacks that need to access the containing object’s this.

class Timer {
  seconds = 0;

  start() {
    // Arrow function: `this` is the Timer instance, always
    setInterval(() => {
      this.seconds++;
    }, 1000);
  }
}

IIFE (Immediately Invoked Function Expression)

Before let/const and modules, IIFEs were the standard way to create a private scope and avoid polluting the global namespace:

(function () {
  const secret = "hidden";
  // `secret` is not accessible outside
})();

They are rare in modern code — block scope and ES modules solve the same problem more cleanly — but you will encounter them in older codebases.

Further Learning

Search these terms to go deeper:

• “You Don’t Know JS: Scope & Closures” — the definitive treatment of JavaScript’s scope model
• “MDN: this” — complete reference for all this binding modes including edge cases
• “JavaScript hoisting explained” — multiple articles on MDN and CSS-Tricks cover this well
• “lexical scope vs dynamic scope” — search term for understanding why JS chose lexical scoping
• “JavaScript IIFE pattern” — good for understanding pre-module JavaScript codebases

Functions & Scope

A function is a reusable recipe: give it ingredients (arguments), it does some steps, and hands back a result. Scope is simply the question of “which variables can this piece of code see?” These two ideas together explain most of how JavaScript finds your data.

Three ways to write a function

// 1. Declaration — the classic
function add(a, b) {
  return a + b
}

// 2. Expression — a function stored in a variable
const multiply = function (a, b) {
  return a * b
}

// 3. Arrow function — shorter, very common today
const divide = (a, b) => a / b

They mostly do the same job. Arrow functions are shorter and have one special behavior with this (below).

Scope: who can see what

Scope is like nested rooms. Code in an inner room can see out into the rooms around it, but the outer rooms can’t see in.

const level = 'global'   // outer room

function outer() {
  const level = 'inner'  // inner room — its own 'level'
  console.log(level)     // 'inner' — finds the closest one first
}

When JavaScript needs a variable, it looks in the current room, then the room outside it, then further out, until it finds it. This is called the scope chain.

this — the one tricky part

this refers to “who is calling me,” and it depends on how a function is called, not where it’s written. This trips people up constantly. The good news: arrow functions don’t have their own this — they borrow it from the surrounding code, which is usually exactly what you want:

class Timer {
  seconds = 0
  start() {
    // arrow function → `this` is still the Timer. 
    setInterval(() => { this.seconds++ }, 1000)
  }
}

In one sentence

Functions are reusable recipes, scope decides which variables code can see (inner code sees outward), and arrow functions conveniently borrow this from their surroundings.

Want to go deeper?

Switch to Expert mode above for hoisting and the temporal dead zone, all four this binding rules, and the IIFE pattern.