Understanding JavaScript Closures: A Practical Approach
Published: 2023-07-10 20:37:08

---
title: Understanding JavaScript Closures: A Practical Approach
published: true
date: 2023-06-10 15:48:26 UTC
tags: 
canonical_url: https://blog.snehasishnayak.com/understanding-javascript-closures-a-practical-approach
---

_"One of the enigmatic concepts in JavaScript, yet super powerful if you can tame it!"_

Well, that's right! Today, we're going to dive into [JavaScript](https://blog.snehasishnayak.com/series/javascript/) Closures, unravel their mystery, and make them our best friend. Don't worry if you are new to this topic or have been dodging it for a while; today, we are going to hold hands and jump into this together!

## So, What's the Buzz About?

Before we set sail, let's try to get a basic understanding. So, what are closures?

**Closures are** [**functions**](https://blog.snehasishnayak.com/functions-in-javascript-a-deep-dive/) **bundled with their lexical scope.** This creates a private namespace for variables that are defined in the outer function, and the inner function can access these variables.

Feeling puzzled? No worries, we will break it down further!

## Getting Friendly With Scope

Before diving into closures, it's crucial to understand scope in JavaScript. Scope is the context in which values and expressions are visible or can be referenced. There are two types of scope in JavaScript - Global Scope and Local Scope.

In the above example, `globalVar` is a global variable and is accessible everywhere, but `localVar` is a local variable and can only be accessed within `someFunction`.

## Nesting Functions and Lexical Scope

Let's take one more step towards understanding closures by introducing nested functions and the concept of lexical scope.

In the example above, `innerFunction` can access `outerVar`, even though `outerVar` is defined outside `innerFunction`. This is possible because of _lexical scoping_ - JavaScript functions have access to variables that are in their outer scope.

## Birth of a Closure

Now that we have a basic understanding of scope and lexical scoping, let's finally meet closures!

In the above example, `outerFunction` returns `innerFunction`. `innerFunction` is a closure because it retains access to `outerVar`, even after `outerFunction` has finished executing.

## Practical Usage of Closures

Closures are not just some obscure part of JavaScript; they are incredibly practical and often used in coding. They provide a way to create data privacy and are used extensively in [event handlers](https://blog.snehasishnayak.com/exploring-javascripts-event-driven-programming#the-role-of-event-handlers-and-event-listeners), callbacks, and other asynchronous JavaScript patterns.

### Closures for Data Privacy

One of the most common uses for closures is to create private data that can't be accessed from outside the function.

In the above example, `count`

is not accessible from outside the `createCounter` function, but the inner function has access to it through closure.

### Closures in Callbacks and Event Handlers

Closures are also used in callbacks and event handlers to maintain the state.

In the first loop, JavaScript's closure concept is responsible for the result. The `setTimeout` function creates a function (the closure) that has access to its outer scope, which is the loop that contains the index `i`.

When the `setTimeout` function is called, it refers to the value of `i` at the time `setTimeout` is triggered, not the value when the loop was run.

In contrast, the second loop uses `let` instead of `var`, which provides block-scoping, allowing each closure to correctly capture each value of `i`.

## Wrapping Up

Don't be disheartened if you are still struggling to completely understand closures; it takes a while for all of us. It's like learning to ride a bike. You won't get it at first, but once you do, you will ride it for life!

Remember, closures are everywhere in JavaScript, and mastering them means mastering JavaScript. Practice with different examples, and soon you'll be surprised by how natural and powerful closures are. Keep exploring, keep coding!

Remember, the journey of a thousand miles begins with one step. You've taken more than a few steps today by understanding JavaScript closures, so pat yourself on the back. Good job, mate! Until our next adventure, keep that curiosity alive.

Happy coding!