Closures exist, so what are they?

Closures are a style of writing JavaScript that provides object data privacy. What this seems to mean is that you can define a function within another function. Your child function will be able to access things from the parent function but the parent function will not be able to access variables in the child function unless it explicitly calls the child function. The child function might also choose to return only a subset of data that it was provided. This is called partial application.

A closure is simply any function that is within another function. I use this in my work were we might define a function and give it several functions inside it such as a Vue application.

“The inner function will have access to the variables in the outer function scope, even after the outer function has returned.” – Eric Elliott

Functional developers have a focus on developing interfaces rather than implementations. This means that we interact with other parts of our code and they operate independently rather than being a single implementation. This should hopefully cut down on code duplication. Interfacing with our code can build greater understanding for developers as the application gros in size. When an interface is used repeatedly then team members will begin to understand it better. If we’re writing unique code for every implementation then the code might work in an unexpected way even though it’s meant to mimic behaviour found elsewhere.

A function that is an application will accept a number of parameters and return the same number of parameters after they have had something applied to them. A partial application is a function that accepts a number of parameters but returns less variables than was provided. For example, a function might take in 3 parameters but only return 1 variable. This function would be a partial application.

If you’re assigning a closure to a variable outside of your parent function then the closure will maintain scope knowledge and the scope chain based on when it was defined. A good example of this is in the second sources link below.

A closure will always have access to the following three things:

  1. The contents of it’s own scope
  2. The contents of the parent scope (the parent function)
  3. The contents of the global scope – anything globally defined in your application

Closures are a simple-ish concept and you can learn them in an hour of playing around. I recommend checking out the two posts below to get a better understanding. I feel like people use things like closures as a form of gate keeping and to “alpha-nerd” people. Don’t let that happen, just spend a short time learning them. If you’re like me you’ll find that you already understood the concepts and used them in the real world.

Happy hunting!

Sources:

About Nick

Melbourne based web developer that loves building front-end systems with anything from vanilla JS to React. Infosec student and active learner. Subscribe to the blog

www ·

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.