This guide is for all coders eager to explore function closures, first-class functions, and higher-order functions in JavaScript.
Key takeaways:
Grasping the concept of first-class functions.
Learning to pass functions as arguments.
Mastering returning functions within functions.
Assigning functions to variables.
Identifying higher-order functions.
Gaining a clear understanding of function closures.
Let's dive into the fascinating world of JavaScript functions!
First-Class Functions
First-class functions are a unique feature in JavaScript, meaning that functions here are treated like any other variable. They can be passed as arguments, returned by another function, or assigned as a value to a variable.
Passing as an argument:
function print(value) {
console.log(value);
}
function greet(name, callFun) {
callFun("Hello " + name);
}
greet("Sammy", print); // Outputs: Hello Sammy
In this snippet, print()
is passed as an argument to greet()
, showcasing how functions can be used as arguments in JavaScript.
Returning from another function:
function house() {
return function () {
console.log("Hello");
};
}
house()(); // Outputs: Hello
In this example, house()
returns another function, demonstrating that functions can also be returned by other functions.
Assigning to a variable:
var printHello = function () {
console.log("Hello");
};
printHello(); // Outputs: Hello
Here, we assign a function to the variable printHello
and call it using the variable name followed by parentheses.
Higher-Order Functions
A higher-order function is a function that either takes one or more functions as arguments or returns a function as a result. It's a crucial concept in functional programming.
Taking a function as an argument:
function delay2sec(callback) {
setTimeout(() => {
callback('Something');
}, 2000);
}
delay2sec(console.log); // Outputs: Something after 2 seconds
This example showcases a function delay2sec()
, which takes console.log
as an argument and executes it after a delay of 2 seconds.
Returning a function as a result:
function outSide() {
let num = 5;
return function () {
return num;
};
}
In this case, outSide()
returns a function that has access to its parent function's variables, demonstrating function closure.
Function Closures
A closure is a function bundled with its surrounding lexical environment, granting the inner function access to the outer function's scope.
Local Variable:
function starting() {
let num = 0; // Local variable
}
The variable num
here is a local variable, only existing within the starting()
function.
Global Variable:
let num = 0; // Global variable
function first() {
console.log(num);
}
function second() {
console.log(num);
}
The variable num
is a global variable accessible to all parts of the code, including first()
and second()
functions.
Function Closure:
function host() {
let num = 0;
return function () {
num++;
return num;
};
}
let firstCall = host();
console.log(firstCall()); // Outputs: 1
console.log(firstCall()); // Outputs: 2
console.log(firstCall()); // Outputs: 3
Here, host()
declares a local variable num
, and its returned function has access to num
. Each call to firstCall()
increments num
.
Wrapping Up
We've just sailed through the world of JavaScript functions, exploring function closures, first-class functions, and higher-order functions. These concepts are essential to improving your JavaScript skills and broadening your understanding of functional programming. Happy coding!
Top comments (0)