• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Alex Aitken

Technical and Engineering Leadership, Coaching, and Mentorship

JavaScript – Closures and Scope

August 20, 2018 By Alex Leave a Comment

Looking at JavaScript today, it can be scary as a beginner. People talk about watching out for all the little quirks or “beginner mistakes” people can make. I think one of the most misunderstood topics, that seems to have a lot of mystery for some people, that people love to interview about, is closures and scope. It’s just one of those topics that we might take for granted as developers but you do have to be careful with.

In computer programming, the scope of a name binding – an association of a name to an entity, such as a variable – is the region of a computer program where the binding is valid: where the name can be used to refer to the entity. Such a region is referred to as a scope block.

https://en.wikipedia.org/wiki/Scope_(computer_science)

To me, if you were to read that quote – I’d be a bit confused. It’s not really explaining in a simple way what scope is. I’m hoping to change that today with my little introduction.

Scope is basically the visibility of your functions and/or variables. The deeper into functions you go, the more your scope will shrink – like when you zoom in with an actual scope in real life. You can see less, but more clearly.

Let’s say you insert JavaScript into your HTML file inside of a script tag.

The variable, myVariable, will now be accessible on the JavaScript global scope. That means, in any place in your code, you can write window.myVariable. It also means that code that you import can also access this variable.

It’s not really what you want to do. It’s also how a lot of libraries like jQuery work. They are on the global scope level. You can actually end up overriding them when you name your variable something on the global scope or they can override you.

Now, let’s take another example.

In this example, you’ll find that in the console, we’ll see an error because myVariable is not defined in the global scope. It’s actually scoped only to the function. That means that outside of this function, no one can read this variable.

In programming languages, a closure (also lexical closure or function closure) is a technique for implementing lexically scoped name binding in a language with first-class functions. Operationally, a closure is a record storing a function together with an environment.

https://en.wikipedia.org/wiki/Closure_(computer_programming)

Basically, in terms of JavaScript, a closure is a function that has access to a variable, that’s not globally available. AKA a private variable. If you come from OOP land, you can have private variables within functions etc. in JavaScript.

Let’s take a little example. I’ve taken the following example from W3Schools. It’s a great site to learn the basics (and more advanced) features of JavaScript.

This may look confusing, but it’s actually pretty simple. When we assign add, we’re actually assigning add to the inner function because the outer function is already run.

The outer function is where we can store our “private” variables. These won’t be accessible by anything outside of the scope which means that we have created a closure.

You may notice that a lot of the time, people actually write code like the following.

Basically, these closures allow them to safely write JavaScript code that isn’t accessible by anyone and is not on the global scope. They can be assured that their code will run like how they want.

I hope that this gave you a brief explanation of closures and scope within the JavaScript world. Now you can go forth and understand why code looks so funny.

Reposted on Medium.

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook

Like this:

Like Loading...

Related

Filed Under: Coding

Alex

Reader Interactions

Leave a ReplyCancel reply

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

Primary Sidebar

About the author

Alex is an AVP of Engineering currently working at Bukalapak. He is a leader in full-stack technologies. Read More…

Pages

  • Speaking Experience
  • About

Social Profiles

  • LinkedIn
  • Medium
  • ADPList

Recent Posts

  • Interviewing as an Engineering Leader
  • Managing Low Performers
  • Getting Docker, React, .NET Core, Postgres, and Nginx Playing Nice
  • What Makes a Good Software Engineering Manager?
  • “Am I There Yet?” Said an Engineer

Archives

  • January 2025
  • August 2024
  • July 2024
  • October 2023
  • August 2023
  • October 2020
  • May 2020
  • February 2020
  • June 2019
  • March 2019
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018

Categories

  • Coding
  • Essay
  • Leadership
  • Management
  • Roundtable
  • Strategy

Footer

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy

Copyright © 2025

%d