Logo

dev-resources.site

for different kinds of informations.

A Practical Introduction to Closures in JavaScript

Published at
4/5/2024
Categories
javascript
closures
Author
diegolepore
Categories
2 categories in total
javascript
open
closures
open
Author
11 person written this
diegolepore
open
A Practical Introduction to Closures in JavaScript

Closures are a very interesting topic, and it is a demonstration of how to leverage the lexical scope in JavaScript.

Let's start by showing a code example first:

function outerFunction() {
  let count = 0;

  return function innerFunction() {
   count += 1;
   console.log(`Count is now ${count}`)
  }
}
Enter fullscreen mode Exit fullscreen mode

Before adding more code, I think it is important to mention that when a function is invoked, after doing its stuff and returning its output, all the variables and functions and any data inside that function will be completely gone.

So, one might think that, if that's the case, the count variable will dissapear right after outerFunction is invoked, and the returned function will lose access to the count variable.

But, due to the lexical nature of JavaScript, when a function is created, like innerFunction in this case, it will always be returned along with its scope.

Even after the outerFunction has finished executing, the innerFunction retains access to the variables in its outer scope, allowing it to keep data private and alive throughout the lifecycle of the application.

Let's continue with our example above:

function outerFunction() {
  let count = 0;

  return function innerFunction() {
   count += 1;
   console.log(`Count is now ${count}`)
  }
}

const myFunction = outerFunction() // outerFunction is executed and, and myFunction becomes innerFunction

myFunction() // Count is now 1
myFunction() // Count is now 2
myFunction() // Count is now 3
Enter fullscreen mode Exit fullscreen mode

So basically functions can carry with them the scope in which they were created. This includes any variables or fucntions that were in scope at the time of creation.

So as you can see, when we return innerFunction from outerFunction, we're not just returning the innerFunction code, we're returning a package of the function and its scope, and this scope that gets returned along with the function, and to which the function keeps access to, is what we call a closure.

Long story short: in JavaScript, a closure is created every time a function is created.

Comming soon...

I will continue expanding on this topic soon, by deepen the discussion on lexical scoping and practical applications like memoization.

closures Article's
30 articles in total
Favicon
Understanding Closures in PHP: Key Differences and Use Cases
Favicon
JavaScript Closures in Depth: Unlocking the Power of Lexical Scope
Favicon
Understanding Closures in JavaScript
Favicon
Mastering Closures and Decorators in Python: From Basics to Advanced
Favicon
Understanding Closure in JavaScript.
Favicon
Let's Understand JavaScript Closures: A Fundamental Concept
Favicon
Memoization in JavaScript
Favicon
Closures: Performance implications
Favicon
Closures: Lifting the hood
Favicon
A Practical Introduction to Closures in JavaScript
Favicon
Unlocking New Possibilities: Rust Compiler Backend Brings Closures to the .NET Universe!
Favicon
πŸ“¦πŸ”“Closures in JavaScript visualized
Favicon
useClosure() {work, backwards in returnValuesAsInput (backwards, work)}
Favicon
Mastering Closures in JavaScript: A Comprehensive Guide
Favicon
# "JavaScript Closures: Demystified."
Favicon
Closures - JavaScript
Favicon
Exploring Advanced JavaScript Techniques: Closures, Prototypes, and Hoisting
Favicon
Unlocking JavaScript Magic: A Beginner's Guide to Closures
Favicon
JavaScript Closures: Understanding the Power of Functions
Favicon
Closures in javascript
Favicon
JavaScript Closure
Favicon
Groovy Gotchas - Loops, Closures, Scope, and Jenkins DSLs
Favicon
Understanding closures in JavaScript
Favicon
Javascript Currying and partials
Favicon
The ultimate explanation of closures
Favicon
Understanding Closures in JavaScript
Favicon
Closures and Memoization
Favicon
A Simple Explanation of JavaScript "Closures"
Favicon
Hoisting with closures example
Favicon
Closures in JavaScript

Featured ones: