functions

Original：🇺🇸 English
Translated
2 scriptsChecked / no sensitive code detected

Advanced function patterns including declaration styles, closures, scope chains, hoisting, and this binding. Master function composition and advanced techniques.

11installs
Sourcepluginagentmarketplace/custom-plugin-javascript
Added on

NPX Install

npx skill4agent add pluginagentmarketplace/custom-plugin-javascript functions

Tags

Translated version includes tags in frontmatter
javascript-functionsscope-chainsclosure-patternsthis-bindingadvanced-js-patterns

SKILL.md Content

View Translation Comparison →

Functions & Scope Skill

Quick Reference Card

Function Styles

javascript
// Declaration (hoisted)
function greet(name) { return `Hello, ${name}!`; }

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

// Arrow (lexical this)
const greet = (name) => `Hello, ${name}!`;
const greet = name => `Hello, ${name}!`;  // Single param
const getUser = async (id) => await fetch(`/api/${id}`);

Scope Rules

Global Scope
  └── Function Scope
        └── Block Scope (let/const)
javascript
const global = 'accessible everywhere';

function outer() {
  const outerVar = 'accessible in outer + inner';

  function inner() {
    const innerVar = 'only accessible here';
    console.log(global, outerVar, innerVar); // All work
  }
}

Closure Pattern

javascript
function createCounter() {
  let count = 0;  // Private state

  return {
    increment: () => ++count,
    decrement: () => --count,
    get: () => count
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2

This Binding Rules

Context
this
Value
Global
window
/
global
Object methodThe object
Arrow functionLexical (outer)
call/apply/bind
Explicit value
Constructor (
new
)		New instance
javascript
// Explicit binding
fn.call(thisArg, arg1, arg2);
fn.apply(thisArg, [args]);
const bound = fn.bind(thisArg);

Advanced Patterns

javascript
// IIFE (Immediately Invoked)
const module = (function() {
  const private = 'hidden';
  return { getPrivate: () => private };
})();

// Currying
const multiply = a => b => a * b;
const double = multiply(2);
double(5); // 10

// Memoization
function memoize(fn) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache.has(key)) cache.set(key, fn(...args));
    return cache.get(key);
  };
}

Troubleshooting

Common Issues

ProblemSymptomFix
Lost 
this
undefined
or wrong value		Use arrow fn or 
.bind()
Closure loop bugAll callbacks same valueUse 
let
not 
var
Hoisting confusionUndefined before declarationDeclare at top
TDZ errorReferenceErrorMove 
let
/
const
before use

The Classic Loop Bug

javascript
// BUG: var is function-scoped
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3

// FIX: Use let (block-scoped)
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2

Debug Checklist

javascript
// 1. Check this context
console.log('this is:', this);

// 2. Verify closure captures
function test() {
  let x = 1;
  return () => { console.log('x:', x); };
}

// 3. Check hoisting
console.log(typeof myFunc); // 'function' or 'undefined'?

Production Patterns

Factory Pattern

javascript
function createLogger(prefix) {
  return {
    log: (msg) => console.log(`[${prefix}] ${msg}`),
    error: (msg) => console.error(`[${prefix}] ${msg}`)
  };
}

const apiLogger = createLogger('API');
apiLogger.log('Request received');

Debounce/Throttle

javascript
function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

Related

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