Toggle theme

Function Patterns

Common function patterns and best practices

Function Declaration

javascript

Different ways to declare functions

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

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

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

// Shorthand Arrow Function
const greet = name => `Hello, ${name}!`;

Higher Order Functions

javascript

Functions that operate on other functions

// Function that returns a function
function multiply(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiply(2);
const triple = multiply(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

// Function that takes a function as argument
function applyOperation(numbers, operation) {
  return numbers.map(operation);
}

const numbers = [1, 2, 3, 4];
const doubled = applyOperation(numbers, double);

Async Functions

javascript

Handle asynchronous operations

// Async/Await Function
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// Promise-based Function
function fetchUserData(userId) {
  return fetch(`/api/users/${userId}`)
    .then(response => response.json())
    .catch(error => {
      console.error('Error:', error);
      throw error;
    });
}

Generator Functions

javascript

Create iterators using generator functions

// Simple Generator
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numberGenerator();
console.log(gen.next()); // { value: 1, done: false }

// Infinite Generator
function* fibonacci() {
  let prev = 0, curr = 1;
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

const fib = fibonacci();
for (let i = 0; i < 5; i++) {
  console.log(fib.next().value);
}