Skip to content

Create and Call Function

ts
// declare
function functionName(parameter1, parameter2) {  
	// logic
	return
	// value
}

// call
functionName(arg1, arg2)

Function Patterns

Simple Function

javascript
function greet() {
  console.log("Hello, World!");
}

greet(); // Output: Hello, World!

Function with Parameters

javascript
function add(a, b) {
  return a + b;
}

let sum = add(3, 4); // sum = 7
console.log(sum);

asynchronous Function

js
async function fetchUserData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
        
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }

        const userData = await response.json();
        console.log(userData);
        // Output: User object from API
        
    } catch (error) {
        console.error('Error fetching user data:', error);
    }
}

fetchUserData();

Arrow Function (ES6)

javascript
const multiply = (a, b) => a * b;

let result = multiply(5, 6); // result = 30
console.log(result);

Function Expression

javascript
const square = function(x) {
  return x * x;
};

console.log(square(5)); // Output: 25

Immediately Invoked Function Expression (IIFE)

javascript
(function() {
  console.log("This function runs immediately!");
})();

Higher-Order Function (HOC)

javascript
function applyOperation(a, b, op) {
  return op(a, b);
}

function add(x, y) {
  return x + y;
}

function subtract(x, y) {
  return x - y;
}

console.log(applyOperation(5, 3, add)); // Output: 8
console.log(applyOperation(5, 3, subtract)); // Output: 2

Recursive Function

javascript
function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5)); // Output: 120

Rest Parameters

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

console.log(sum(1, 2, 3, 4, 5)); // Output: 15

Default Parameters

javascript
function greet(name = "User") {
  console.log(`Hello, ${name}!`);
}

greet("John"); // Output: Hello, John!
greet(); // Output: Hello, User!

Getter and Setter

Getter

javascript
const student = {
  firstName: 'Monica',
  get getName() {
    return this.firstName;
  }
};

console.log(student.firstName); // Monica
console.log(student.getName); // Monica
// console.log(student.getName()); // Error: getter method, not a function

Setter

javascript
const student = {
  firstName: 'Monica',
  set changeName(newName) {
    this.firstName = newName;
  }
};

console.log(student.firstName); // Monica
student.changeName = 'Sarah';
console.log(student.firstName); // Sarah

Closures

javascript
function makeCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

const counter = makeCounter();
console.log(counter()); // Output: 0
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

Generator Function

javascript
function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

const numberGenerator = generateNumbers();
console.log(numberGenerator.next().value); // Output: 1
console.log(numberGenerator.next().value); // Output: 2
console.log(numberGenerator.next().value); // Output: 3

Callback Function

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

greet("Alice", function(message) {
  console.log(message);
});

Async/Await

javascript
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched!");
    }, 2000);
  });
}

async function getData() {
  const data = await fetchData();
  console.log(data);
}

getData(); // Output: Data fetched! (after 2 seconds)

Function Constructor

javascript
const multiply = new Function("x", "y", "return x * y");
console.log(multiply(3, 4)); // Output: 12

Currying

javascript
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...newArgs) {
        return curried.apply(this, args.concat(newArgs));
      };
    }
  };
}

const sum = curry(function(a, b, c) {
  return a + b + c;
});

console.log(sum(1, 2, 3)); // Output: 6
console.log(sum(1)(2, 3)); // Output: 6
console.log(sum(1)(2)(3)); // Output: 6

Memoization

javascript
function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}

const memoizedFactorial = memoize(factorial);
console.log(memoizedFactorial(5)); // Output: 120
console.log(memoizedFactorial(5)); // Output: 120 (from cache)

Function Composition

javascript
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);

const addOne = x => x + 1;
const multTwo = x => x * 2;

const pipeline = compose(addOne, multTwo);
console.log(pipeline(5)); // Output: 12 (5 * 2 + 1)

This format organizes the different function patterns and concepts with concise code examples and explanations.

Released under the MIT License