CodeX
Published in

CodeX

Understanding JavaScript Closures

Photo by Kevin Ku on Unsplash

Today I am going to talk about a very confusing but fundamental topic in JavaScript programming. I had a hard time wrapping my head around JavaScript closures. After a very painful interview question on this topic I decided to really try and understand closures and why they can be useful. I will also do my best to explain it in a clear way. Let’s get started.

So what is a closure? A closure is a function bundled with references to its surrounding state. In clearer terms we could say that a closure is a function inside an outer function that has access to the outer function’s scope. The closure has access to its own variables, the outer function’s variables and the global variables. Just reading this might not make much sense so let’s look at an example.

We have two functions here. The outer function has a variable named ‘a’ and returns the inner function. The inner function has a variable named ‘b’ and accesses the variable from the outer function. After that we save the results of the execution of the outer function into a variable ‘myFunc’. That means that ‘myFunc’ is now holding the inner function. When executed we actually get the sum output on the terminal. Why? At first it might not make sense that this code actually works. In other programming languages, the local variables within a function exist for just the duration of that function’s execution. You might expect that after the outer function executes the ‘a’ variable would no longer be accessible. This is not the case in JavaScript thanks to closures. A closure is the combination of a function and the lexical environment where the function was declared. This environment consists of any local variables that were in-scope at the time the closure was created. This feature of JavaScript allows code like this to run. Things get a lot more interesting when these functions start taking arguments. Let’s take a look at an example.

Closures let you associate data with a function that operates on that data. This can be compared to how in object-oriented programming objects allow you to associate data with methods. As you can see we can save the closure into two different variables and the operation on different values. Even though the outer function already ran the environment within it is still accessible to the inner function because it was saved in memory. The environment is stored by the closure for its own later use.

I hope this will help anyone out there understand the basics of closures. It is a very interesting topic and there is still many more things I need to learn about it. Practicing with them will only help more. Questions about closures are frequently asked during interviews so it is very important to understand this concept in order to ace the interview. Happy coding! 😎

--

--

--

Everything connected with Tech & Code. Follow to join our 900K+ monthly readers

Recommended from Medium

Sending emails in Javascript (3 ways to send and test emails with NodeJS).

Morse Code and the Web Audio APIs

Solving content preview with Next.js Preview Mode

Demystifying RxJS, Part I: Building our own Observables

Our output from our custom Observable code on the left, vs. the RxJS guide code on the right. They are equivalent.

First steps with Postman…

Stop Rashly Copying Commands From Websites

JavaScript copy-to-clipboard

Dou you know about JavaScript shift() and unshift() methods?

Node.js Child Process exec exit code null

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ray Alva

Ray Alva

Software engineer with a passion for building applications. I love nature, gaming, cooking and of course coding!

More from Medium

JavaScript Array.map(): Read all about it!

Difference between export as class and object in javascript ?

Javascript getter and setter

String Methods — JavaScript