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.