Intermediate JavaScript

Home / Topic / Intermediate JavaScript / Functions and Closures in JavaScript

Functions and Closures in JavaScript

Functions in JavaScript are blocks of code that can be executed independently, and closures are a powerful feature of the functions that allow them to retain their execution context. In this chapter, we will explore advanced functions and the concept of closures.

Higher-Order Functions

A higher-order function is one that can take other functions as arguments or return a function. This allows building more flexible code patterns.

javascript

"Here, 'greet' returns another function that accepts 'message' as a parameter, allowing you to create a personalized greeting for 'John'."

Closures

This image shows a diagram of how Closures work This image shows a diagram of how Closures work

A closure is a function that remembers the environment in which it was created, even after that environment has ended. This means that a closure's variables remain available even outside of their original scope.

javascript

"In this example, the 'counter' function creates a 'count' variable and returns a function that increments 'count' each time it is called. Although 'counter' is executed only once, 'count' remains in memory due to the closure."

Application of Closures in Programming

Closures are useful for creating private variables and functions that retain a state between calls.

javascript

"Here, 'makeCounter' returns an object with methods that can manipulate 'count'. These methods retain access to 'count' thanks to the closure."

Functions as Parameters

Passing functions as arguments is common in JavaScript, especially in methods like forEach, map, and filter.

javascript

"In this code, 'forEach' receives an anonymous function that multiplies each number of the 'numbers' array by two and prints it."

Functions that Return Functions

This pattern is common when you want to create more specific functions from general functions.

javascript

"In this example, 'multiplyBy' receives a 'factor' and returns a function that multiplies the given number by that factor. We create 'double', a function that doubles numbers by passing the factor 2."

Scope and Context in Closures

It is important to understand how closures retain the execution context and can access variables defined at the time of their creation.

javascript

"Here, the 'inner' function can access 'globalVar' and 'outerVar', in addition to its own variable 'innerVar', demonstrating the scope of closures."

Practical Examples of Closures

Closures are frequently used to encapsulate logic and protect data, especially in the creation of custom functions or modules.

javascript

"In this case, 'createBankAccount' defines an initial balance and returns methods for depositing and withdrawing funds. The methods access the balance using a closure, and the 'balance' variable is protected from direct external access."

Conclusion

Functions and closures are advanced concepts in JavaScript that allow for better modularization and protection of code. By understanding how closures and higher-order functions work, more robust and maintainable applications can be built.

Back to previous chapter

Mark as read and continue

Ask me anything