Functions & Scope Skill

Quick Reference Card

Function Styles

javascript
1// Declaration (hoisted)
2function greet(name) { return `Hello, ${name}!`; }
3
4// Expression (not hoisted)
5const greet = function(name) { return `Hello, ${name}!`; };
6
7// Arrow (lexical this)
8const greet = (name) => `Hello, ${name}!`;
9const greet = name => `Hello, ${name}!`;  // Single param
10const getUser = async (id) => await fetch(`/api/${id}`);

Scope Rules

Global Scope
  └── Function Scope
        └── Block Scope (let/const)

javascript
1const global = 'accessible everywhere';
2
3function outer() {
4  const outerVar = 'accessible in outer + inner';
5
6  function inner() {
7    const innerVar = 'only accessible here';
8    console.log(global, outerVar, innerVar); // All work
9  }
10}

Closure Pattern

javascript
1function createCounter() {
2  let count = 0;  // Private state
3
4  return {
5    increment: () => ++count,
6    decrement: () => --count,
7    get: () => count
8  };
9}
10
11const counter = createCounter();
12counter.increment(); // 1
13counter.increment(); // 2

This Binding Rules

javascript
1// Explicit binding
2fn.call(thisArg, arg1, arg2);
3fn.apply(thisArg, [args]);
4const bound = fn.bind(thisArg);

Advanced Patterns

javascript
1// IIFE (Immediately Invoked)
2const module = (function() {
3  const private = 'hidden';
4  return { getPrivate: () => private };
5})();
6
7// Currying
8const multiply = a => b => a * b;
9const double = multiply(2);
10double(5); // 10
11
12// Memoization
13function memoize(fn) {
14  const cache = new Map();
15  return (...args) => {
16    const key = JSON.stringify(args);
17    if (!cache.has(key)) cache.set(key, fn(...args));
18    return cache.get(key);
19  };
20}

Troubleshooting

Common Issues

The Classic Loop Bug

javascript
1// BUG: var is function-scoped
2for (var i = 0; i < 3; i++) {
3  setTimeout(() => console.log(i), 100);
4}
5// Output: 3, 3, 3
6
7// FIX: Use let (block-scoped)
8for (let i = 0; i < 3; i++) {
9  setTimeout(() => console.log(i), 100);
10}
11// Output: 0, 1, 2

Debug Checklist

javascript
1// 1. Check this context
2console.log('this is:', this);
3
4// 2. Verify closure captures
5function test() {
6  let x = 1;
7  return () => { console.log('x:', x); };
8}
9
10// 3. Check hoisting
11console.log(typeof myFunc); // 'function' or 'undefined'?

Production Patterns

Factory Pattern

javascript
1function createLogger(prefix) {
2  return {
3    log: (msg) => console.log(`[${prefix}] ${msg}`),
4    error: (msg) => console.error(`[${prefix}] ${msg}`)
5  };
6}
7
8const apiLogger = createLogger('API');
9apiLogger.log('Request received');

Debounce/Throttle

javascript
1function debounce(fn, delay) {
2  let timeoutId;
3  return (...args) => {
4    clearTimeout(timeoutId);
5    timeoutId = setTimeout(() => fn(...args), delay);
6  };
7}

Related

• Agent 02: Functions & Scope (detailed learning)
• Skill: fundamentals: Variables and basics
• Skill: asynchronous: Async functions