Week 2: Functions, Scope & Hoisting

1. Three Ways to Write a Function

JavaScript has three distinct syntaxes for creating a function — they overlap a lot, but each has a situation where it's the right (or only) choice:

function greet(name) {
  return `Hello, ${name}!`;
}

greet("Ada"); // "Hello, Ada!"

const greet = function (name) {
  return `Hello, ${name}!`;
};

greet("Ada"); // "Hello, Ada!"

const greet = (name) => {
  return `Hello, ${name}!`;
};

// A single expression can skip the braces and `return` entirely:
const greetShort = (name) => `Hello, ${name}!`;

greetShort("Ada"); // "Hello, Ada!"

A function declaration is hoisted in full (more on that below) and reads clearly as a named, top-level operation. A function expression stores an (often anonymous) function in a variable, useful when you want to pass a function around like any other value. An arrow function is the terse, modern default for short callbacks and one-line logic — and, importantly, doesn't have its own this (that distinction matters starting Week 3).

2. Default & Rest Parameters

Two features make function signatures far more flexible than a fixed parameter list:

function greet(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}

greet("Ada");            // "Hello, Ada!"
greet("Ada", "Hi");        // "Hi, Ada!"

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

sum(1, 2, 3);        // 6
sum(10, 20, 30, 40);   // 100

A default parameter only kicks in when the argument is undefined — passing null or 0 explicitly does not trigger the default. The rest parameter (...numbers) must come last in the parameter list, and collects any number of remaining arguments into a real array — useful whenever a function needs to accept a variable number of inputs.

3. Block vs. Function Scope

Scope determines where a variable is visible from. This is exactly where let/const and var genuinely diverge:

if (true) {
  let blockScoped = "only visible in here";
  console.log(blockScoped); // works
}

console.log(blockScoped); // ReferenceError: blockScoped is not defined

if (true) {
  var functionScoped = "leaks out of the block";
}

console.log(functionScoped); // "leaks out of the block" -- no error!

let and const are scoped to the nearest enclosing {'{'}...{'}'} block — an if, a for loop, any block at all. var ignores block boundaries entirely and is scoped to the nearest enclosing function (or the global scope, if there is no enclosing function) — which is exactly why it leaked out of the if block above. This is the single biggest practical reason to avoid var: its scope doesn't match what the code's indentation visually suggests.

4. Hoisting

Hoisting is JavaScript's behavior of processing certain declarations before running the rest of the code in a scope — but the three declaration types behave very differently under it:

sayHi(); // "Hi!" -- works, even though called before the declaration below

function sayHi() {
  console.log("Hi!");
}

console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 5;

console.log(y); // undefined -- no error, but not the value either
var y = 5;

A function declaration is hoisted with its entire body, so it can be called before the line it's written on. let and const are technically hoisted too, but stay in an inaccessible "temporal dead zone" until their declaration line actually runs — accessing them earlier throws, rather than silently returning undefined. var is hoisted and pre-initialized to undefined, which is exactly the kind of silent-bug-waiting-to-happen behavior that makes let/const the safer default.

5. Return Values & Pure Functions

A function that doesn't explicitly return anything returns undefined. Beyond that, a useful habit to build from week one: prefer writing pure functions — functions whose output depends only on their inputs, with no side effects on anything outside them:

let total = 0;

// Impure -- depends on and mutates something outside itself
function addToTotal(n) {
  total += n;
}

// Pure -- same inputs always produce the same output, nothing external touched
function add(a, b) {
  return a + b;
}

add(2, 3); // always 5, no matter what else is happening in the program

Pure functions are dramatically easier to test, reason about, and reuse — a function like add can be called anywhere, any number of times, and never surprises you. This habit pays off even more once state management shows up in a framework course later.

6. Hands-on Exercise

7. Knowledge Check

Four quick questions. Expand each to check your answer.