This content originally appeared on DEV Community and was authored by Sudhanshu Gaikwad
JavaScript functions are a cornerstone of modern web development, offering a way to organize, reuse, and execute code efficiently. This guide provides a detailed overview of the various types of functions in JavaScript, complete with examples.
1. Normal Function
A named function that can be called anywhere in its scope.
Syntax:
function functionName(parameters) {
// Function body
return result;
}
Example:
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("John")); // Output: Hello, John!
2. Function Expression
A function defined and assigned to a variable, usually anonymous.
Syntax:
const functionName = function(parameters) {
// Function body
return result;
};
Example:
const add = function(a, b) {
return a + b;
};
console.log(add(5, 3)); // Output: 8
3. Arrow Function
A concise syntax for writing functions introduced in ES6. Arrow functions do not have their own this.
Syntax:
const functionName = (parameters) => {
// Function body
return result;
};
Example:
const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // Output: 20
4. Immediately Invoked Function Expression (IIFE)
A function that is executed immediately after it is defined.
Syntax:
(function() {
// Function body
})();
Example:
(function() {
console.log("IIFE executed!");
})(); // Output: IIFE executed!
5. Constructor Function
A special function used to create and initialize objects.
Syntax:
function ConstructorFunction(parameters) {
this.property = value;
}
Example:
function Person(name, age) {
this.name = name;
this.age = age;
}
const person1 = new Person("Alice", 30);
console.log(person1.name); // Output: Alice
6. Class Method
A function defined inside a class to operate on class properties.
Syntax:
class ClassName {
methodName(parameters) {
// Method body
}
}
Example:
class Calculator {
add(a, b) {
return a + b;
}
}
const calc = new Calculator();
console.log(calc.add(7, 8)); // Output: 15
7. Generator Function
A function that can pause and resume execution using the yield keyword.
Syntax:
function* generatorFunction() {
yield value;
}
Example:
function* countUpToThree() {
yield 1;
yield 2;
yield 3;
}
const counter = countUpToThree();
console.log(counter.next().value); // Output: 1
console.log(counter.next().value); // Output: 2
console.log(counter.next().value); // Output: 3
8. Async Function
A function that works with asynchronous operations, using asyncand await.
Syntax:
async function functionName(parameters) {
// Function body
}
Example:
async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
return data;
}
fetchData().then(console.log);
9. Recursive Function
A function that calls itself to solve a smaller subproblem.
Syntax:
function functionName(parameters) {
if (baseCondition) return result;
return functionName(smallerProblem);
}
Example:
function factorial(n) {
if (n === 0) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5)); // Output: 120
10. Anonymous Function
A function without a name, often used as a callback or inside expressions.
Syntax:
(function() {
// Function body
})();
Example:
const numbers = [1, 2, 3];
numbers.forEach(function(number) {
console.log(number);
});
// Output: 1, 2, 3
11. Higher-Order Function
A function that accepts another function as an argument or returns a function.
Syntax:
function higherOrderFunction(callback) {
return callback();
}
Example:
function greet() {
return "Hello, world!";
}
function executeFunction(fn) {
console.log(fn());
}
executeFunction(greet); // Output: Hello, world!
This content originally appeared on DEV Community and was authored by Sudhanshu Gaikwad
Sudhanshu Gaikwad | Sciencx (2025-01-26T00:30:00+00:00) JavaScript Functions Higher-Order, Anonymous, Invoked & More!. Retrieved from https://www.scien.cx/2025/01/26/javascript-functions-higher-order-anonymous-invoked-more/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.