JavaScript closures explained

During my online learning endeavors, I have continually come across the word “closure”. I didn’t really know what it was, but like any inquisitive mind that loves to learn, there is never a time like the present to figure out what JavaScript Closures are.

MDN documentation on JavaScript Closures:

First thing to do is to check out the MDN documentation and they have a good description:

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure ‘remembers’ the environment in which it was created.

Check out these JavaScript closures examples

Consider the following HTML and JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>THIS IS A PAGE</title>
</head>
<body>
  <h1>BEHOOOOOOOLD!!!!</h1>
  <p>an html page</p>
  <script>
    function makeColor(theColor) {
      var toChangeTo = theColor;
      return function() {
        document.body.style.background = toChangeTo;
      };
    };
  </script>
</body>
</html>

If I open this page, it is blank and looks as follows:

original page without execution of javascript closures

Now, if in the console, I create a variable:

var theThings = makeColor("red");

Notice the actual function is returned. Since functions in JavaScript are first class citizens, they can be passed around similar to variables. This really is one of the beautiful and dangerous things about JavaScript.

So the variable is a function that was returned from makeColor, but when I do the following:

final - after execution of javascript closures

I call “theThings()”, and not only does it execute the returned function, but it remembers and is aware of the variable toChangeTo. That is what makes this a closure. theThings remembers the environment in which it was created and that toChangeTo was “red”, so it was able to change colors when executed.

Closures are not just a JavaScript tool and are available in some other languages, but JavaScript it is where I am exposed to them most often. JavaScript’s treatment of functions as first class citizens is one of the great things about the language and also creates opportunities to utilize closures. If you had confusion about what a closure is, I hope this helps get you closer and you may begin to notice just how often it is used.

Tabs vs Spaces – I Choose Spaces

While I may have had an idea that there was a “tabs vs spaces” debate, I have never worked in an environment where a standard was enforced and did not know it was a debate of epic proportions. While looking into best practices, I found a treasure trove on the topic of tabs vs spaces. Today, I am going to point out the short version of each side and share why I am choosing spaces.

Tabs vs spaces - why I am choosing spaces

Tabs

This is how I HAVE BEEN coding since I started coding. Why? Well, I guess I didn’t realize that tabs vs spaces was an issue and using tabs just made sense. When I hit tab, it indented. Maybe I have noticed a few annoying visual things here and there, but have become well versed enough with Sublime use that I could fairly easily fix what looked odd. Now I understand that tabs are the reason it may have looked odd from time to time!

Even though my use of tabs was just because it was the default, people that intentionally and consciously choose tabs have some decent reasons.

Probably the most compelling argument for me on the use of tabs vs spaces debate is that tabs allows developers to set their individual visual preferences and it will translate from user to user. If I want to have a tab be 2 spaces, 4 spaces, 33 spaces… as long as the file I open is using tabs, my text editor will format it so that the tabs render how I want I indicate. This is great if everybody is in agreement! The big problem with this, however, is that it does not consider alignment when people are not in agreement.

Consider the following code under the pretext that the developer has a tab to show as 4 spaces:

function awesomeThings(){
  var things = ["a bucket",
      "a goat",
      "a fuflegnugenwieser"];
}

Now, perhaps, I have my tabs to show as 8 spaces. When I open this file, it will look as follows:

function otherAwesomeThings(){
  var things = ["a bucket",
          "a goat",
          "a fuflegnugenwieser"];
}

This is a very basic case, but the visual aspect of tabs can make things confusing and annoying to share code with other developers. And I HAVE encountered this, but didn’t even realize this was the problem until recently.

There are other reasons, such as the amount of bytes a space may take vs a tab, but this should not be impactful for most applications, particularly if code is being minified.

Spaces

Well, unlike tabs, there are no qualms about it…. A space is a space. That is the main benefit of using spaces for tabs (or a soft tab), as I see it. No matter the IDE or text editor that is being used, the space is just that!

Additionally, all modern text editors can be set up so that the tab key renders as X spaces, so really for the same amount of work, a developer gets both indentation and alignment.

What else is there outside of tabs vs spaces?

I know that some of you out there have some sort of hybrid or better version of this binary argument. I would love to hear what works for you.

Why I chose spaces in the tabs vs spaces debate

I think it is important for something like this to be a team decision. If your team uses tabs and chooses to use tabs, roll with it! If they choose spaces, stay consistent with them and choose spaces. Work with your team to figure out what works for you!

I am choosing spaces for two reasons.

First, The visual alignment element is important and using spaces addresses that. It feels friendlier to sharing code with others.

Second, I looked through the style guides of prominent and popular organizations (Google, AirBnB , Code Guide, CSS Guidelines) and they all recommend a soft tab (two space) standard. Not that these style guides are the end all, be all on this, or any other topic, but I do think it is important to recognize the discussion and be a part of it.

These three entities are a pretty good representation of what is current on the Internet and have chosen this style. If you are not going to follow the styles they all seem to embrace, at least be aware of the discussion and why it may seem that this is being used by such popular entities.