What is a closure in JavaScript?

Closure: It’s not a complex concept. Yet it’s hard to describe. Sure, a lot of programming jargon is abstract and requires a little bending of one’s mind. Polymorphism, reflection, encapsulation — hell, even abstraction is an abstract concept.

In my own effort to understand closures better, I’ve compiled the best descriptions of JavaScript closures from authoritative sources on the Web. Hopefully this will be useful to you, too.

Mozilla’s docs describe closures like so:

Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions ‘remember’ the environment in which they were created.

In JavaScript: The Good Parts, Douglas Crockford describes closures:

Functions can be defined inside of other functions. An inner function of course has access to its parameters and variables. An inner function also enjoys access to the parameters and variables of the functions it is nested within. The function object created by a function literal contains a link to that outer context. This is called closure.

… inner functions get access to the parameters and variables of the functions they are defined within (with the exception of this and arguments).

Wikipedia’s not-so-elegant-but-sensical definition:

In programming languages, closures are techniques for implementing lexically scoped name binding in languages with first-class functions. Operationally, a closure is a record storing a function together with an environment: a mapping associating each free variable of the function (variables that are used locally, but defined in an enclosing scope) with the value or reference to which the name was bound when the closure was created. A closure — unlike a plain function — allows the function to access those captured variables through the closure’s copies of their values or references, even when the function is invoked outside their scope.

Stack Overflow has a hugely popular thread on the subject, complete with helpful examples. Another succinct definition:

a closure is one way of supporting first-class functions; it is an expression that can reference variables within its scope (when it was first declared), be assigned to a variable, be passed as an argument to a function, or be returned as a function result.

Of course, most of this is hard to understand without some hands-on. Check out the Stack examples and write some experimental code yourself to really get your head around it.

Share behavior between your Rails tests using modules

[tl;dr – Use ActiveSupport::Concern with modules in your Rails tests to reuse behavior. Or read the longer discussion and learn more about what’s going on behind the scenes.]

After writing a lot of BDD tests using Rspec and Cucumber in my Rails projects, I decided on a new approach for a new project: use the default Rails 4 test framework, Minitest. Duh.


An animated evolution of the Ferrari F1 car

While studying up on the 2014 Formula One season, I spent a little time creating an animated GIF of Ferrari’s car over the last eight iterations. Interesting to watch the change of specific areas, like the front end and the rear wing. The images are centered on the driver’s position and are lined up as best as possible to be consistent with where the ground would be.

Evolution of the Ferrari F1 as animated GIF

(Thanks to these guys for the images.)

Taking before you give: Harassing users with surveys and signups

Imagine you try to walk into a store but before you can, an employee jumps out and asks you to sign up for their newsletter. With an annoyed “No, thanks,” you try to pass by and go about your business. Why would you want to do that before you knew anything about the place, let alone whether you liked shopping there or the products they offered?


Hosting Web fonts on a CDN? You’re going to need some CORS.

Old Coors can

Yeah, you wish this was about beer.

So you’re using some trick Web fonts for your site or app. It looks awesome in development. Yay.

You push to production, where your assets are all hosted on a CDN and suddenly your fonts stop working on Firefox and probably Internet Explorer (9+), too. You see crappy little squares where awesome fonts should be.

Bang. You’ve just run into the browsers’ same-origin policy restrictions.


So how does JSONP really work?

JSONP is a way to fetch JSON data from a different domain, often in an asynchronous way, but without being restricted by the browser’s same-origin policy like you would be with XMLHttpRequest. But perhaps you only know it via a library like jQuery, which auto-magically handles JSONP URLs. Here’s a simple JSONP example and breakdown to show what’s really going on behind the scenes.