A function is a block of code that performs a specific task. It can accept parameters and return values. Functions in JavaScript are treated as first-class objects
, which means they can be assigned to variables, passed as arguments, and returned from other functions.
Types of Functions
1. Function Declaration
A function declaration is a statement that defines a function with a name, parameters, and a body.
function greet(name) {
console.log(`Hello, ${name}!`);
}
2. Function Expression
A function expression is a way to define a function as an expression, which can be assigned to a variable.
const greet = function(name) {
console.log(`Hello, ${name}!`);
};
3. Arrow Function
An arrow function is a shorthand syntax for defining a function expression.
const greet = (name) => {
console.log(`Hello, ${name}!`);
};
4. Anonymous Function
An anonymous function is a function without a name.
const add = function(a, b) {
return a + b;
};
5. IIFE
An IIFE (Immediately Invoked Function Expression) is a function that is executed as soon as it is defined.
(function() {
console.log('IIFE executed');
})();
Function Parameters and Arguments
A function parameter is a variable listed in the function definition, while an argument is the value passed to the function when it is called.
function greet(name) { // "name" is a parameter
console.log(`Hello, ${name}!`);
}
greet('John'); // 'John' is an argument
Functions can have multiple parameters and arguments.
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 5
Function Return Values
A function can return a value using the return statement. If a function doesn't return a value, it implicitly returns undefined.
function add(a, b) {
return a + b;
}
const result = add(2, 3);
console.log(result); // 5
Function Scope
Variables declared inside a function are only accessible within the function's scope.
function greet() {
const message = 'Hello, world!';
console.log(message);
}
greet(); // 'Hello, world!'
console.log(message); // ReferenceError: message is not defined
Function Hoisting
Function declarations are hoisted to the top of the scope, which means they can be called before they are defined.
greet(); // 'Hello, world!'
function greet() {
console.log('Hello, world!');
}
However, function expressions and arrow functions are not hoisted and must be defined before they are called.
greet(); // TypeError: greet is not a function
const greet = function() {
console.log('Hello, world!');
};
Other type of functions
Callback Function:
A callback function is a function that is passed as an argument to another function and is called by that function. A common use case for callback functions is with asynchronous code, where the callback is executed once the asynchronous operation is complete. Here's an example:
function getUser(id, callback) {
setTimeout(() => {
const user = {
id: id,
name: 'John Doe'
};
callback(user);
}, 2000);
}
getUser(123, (user) => {
console.log(user); // Output: { id: 123, name: 'John Doe' }
});
Higher-Order Function:
A higher-order function is a function that takes one or more functions as arguments or returns a function as its result. A common use case for higher-order functions is with array methods like map, filter, and reduce.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => {
return num * 2;
});
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
Advanced
Closures
Closures are a powerful feature of JavaScript that allows a function to access variables from its parent scope, even after the parent function has returned. This can be used to create private variables and functions, which are not accessible from outside the function.
function counter() {
let count = 0;
function increment() {
count++;
console.log(count);
}
return increment;
}
const myCounter = counter();
myCounter(); // Output: 1
myCounter(); // Output: 2
Currying
Currying is a technique in functional programming that allows a function to take multiple arguments as a series of single-argument functions. This can make your code more modular and easier to reuse.
function add(a) {
return function(b) {
return a + b;
}
}
const add2 = add(2);
console.log(add2(3)); // Output: 5
Memoization
Memoization is a technique that allows a function to cache its results based on its input arguments. This can improve the performance of a function, especially if it performs complex calculations or data retrieval.
function fibonacci(n, memo = {}) {
if (n in memo) return memo[n];
if (n <= 1) return 1;
memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);
return memo[n];
}
console.log(fibonacci(10)); // Output: 89
ð Congratulations, you have now learned about functions
Top comments (3)
The function stored in
add
in your anonymous function example is not an anonymous function. The act of assigning an anonymous function to a variable gives it a name:Compare this to checking the name of an anonymous function:
nice catch, thanks!. will update this
Good article.
Btw u can do curry with bind :)
function sum(a,b) {
return a + b
}
const plusTwo = sum.bind(null, 2);
Same behavior for your example of curry