A named function is a traditional function with a name that can be called and referenced within its scope.
function add(a, b) {
return a + b;
}
console.log(add(3, 5)); // Outputs: 8
- The function add is declared with the function keyword and has the name add.
- It can be called by using its name and passing arguments.
- Named functions are reusable and easy to reference throughout the code.
An anonymous function is a function without a name, often assigned to a variable or used as an argument to another function.
const multiply = function(a, b) {
return a * b;
};
console.log(multiply(3, 5)); // Outputs: 15
- The function has no name and is assigned to the variable multiply.
- It behaves like any other function and can be called using the variable it’s assigned to.
- Anonymous functions are often used for short-lived purposes, such as in callbacks.
Arrow functions provide a shorter syntax for writing functions. They are anonymous by default and do not have their own this context.
const subtract = (a, b) => a - b;
console.log(subtract(10, 4)); // Outputs: 6
- Arrow functions use the => syntax instead of the function keyword.
- When the function body contains a single expression, the result is returned implicitly without using the return keyword.
- Arrow functions do not bind their own this, making them suitable for certain functional programming tasks.
An IIFE is a function that is executed immediately after it is defined.
(function() {
console.log("I am an IIFE!");
})();
- The function is enclosed in parentheses () to create an expression.
- The trailing () immediately invokes the function.
- IIFEs are useful for avoiding polluting the global scope and are often used in modular patterns.
A higher-order function is a function that takes another function as an argument or returns a function as its result.
function greet() {
console.log("Hello!");
}
function higherOrderFunction(callback) {
console.log("Before calling callback");
callback();
console.log("After calling callback");
}
higherOrderFunction(greet);
- higherOrderFunction takes greet as an argument and calls it as a callback.
- Higher-order functions allow more abstraction and are widely used in functional programming, such as with map, filter, and reduce.
A callback function is a function passed as an argument to another function and is executed later in response to an event or condition.
function fetchData(callback) {
setTimeout(() => {
console.log("Fetching data...");
callback();
}, 1000);
}
fetchData(() => {
console.log("Data fetched!");
});
- fetchData simulates an asynchronous operation (using setTimeout) and calls the provided callback once the operation is done.
- Callbacks are used extensively in asynchronous programming to handle operations like API calls or I/O.
A generator function is a special kind of function that can pause its execution and yield multiple values over time, returning an iterator.
function* generateSequence() {
yield 1;
yield 2;
yield 3;
}
const generator = generateSequence();
console.log(generator.next().value); // Outputs: 1
console.log(generator.next().value); // Outputs: 2
console.log(generator.next().value); // Outputs: 3
- The * indicates that this is a generator function.
- The yield keyword allows the function to pause execution and return a value.
- Generators are useful for creating sequences of values and implementing iterators.
An async function allows asynchronous operations to be written in a more readable manner using async and await.
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
console.log(data);
}
fetchData();
- async functions always return a Promise.
- The await keyword pauses the function execution until the promise is resolved, making asynchronous code appear synchronous and easier to read.
- async/await helps avoid "callback hell" and provides better error handling with try/catch blocks.