Closures with the Code Witch

Once upon a time, a little code witch had her first mock technical interview. Her interviewer was super nice, but he asked her lots of questions using terms she had studied, but couldn’t quite remember or explain. She felt quite stupid and discouraged.

When her interviewer showed the code witch an actual example of said technical terms, she literally facepalmed. Now that she could see the code, the little code witch could clearly explain what was happening. The interviewer congratulated her, and she felt slightly less dense.

The code witch realized she spent so much time reading and learning a broad swath of coding concepts over the past few months, but she rarely stopped to smell the roses. She didn’t dig deep into confusing or interesting concepts because the curriculum just kept moving forward, and she couldn’t afford to lag behind.

Now that the code witch is a Flatiron School graduate, she has time to explore the intricacies and nuances of programming. With a set jaw and an eager heart, she created a list of vocabulary terms and confusing topics. Now, the code witch can explore these concepts, work them into her code, and record her findings in her spellbook… err… blog.

Here is her first entry:

JavaScript Closures

If you have written any JavaScript, chances are, you’ve used a closure, possibly without even realizing it. But what is a closure? Basically, a closure is a function nested within and returned by another function.

Consider lexical scoping. A closure’s scope has at least three levels:

1. Its own, local scope
2. Its parent scope (and any grandparents)
3. The global scope

Because of this, closures are useful for emulating private variables. While the closure has access to its parent’s variables, the parent can’t access the closure’s variables.

Using Closures

Let’s look at an example, using one of the little code witch’s favorite spells:

See the Pen Song of the Witches by Audrea Cook (@audthecodewitch) on CodePen.

Potential Drawbacks

See? Closures aren’t that scary, though the Macbeth witches sure are. There are a couple of drawbacks to using closures in your code, however. First, closures have the potential to cause memory leaks because they can’t be garbage collected until the entire program is done using them. Closures can also lead to some unexpected results when used within loops. Luckily, MDN has a good explanation of how to avoid this in their docs.

Helpful Resources

I am far from an expert on Javascript closures, but I certainly know more after researching and writing about it this week. Here are my favorite resources I discovered along the way:

1. MDN - My husband is a technical writer, folks. Always look at the docs. Somebody worked hard to answer your questions before you even thought to ask them.
2. W3Schools - Their JavaScript Closures lesson is short and sweet, with a clear, practical example.
3. Master the JavaScript Interview: What is a Closure? - This article is the first of several super informative pieces on common JavaScript interview questions. I recommend reading all of them.