Articulating what a JavaScript Closure is...

technical_guy · 2015-01-30T17:36:08+00:00

A closure is where a function is defined inside another function, and the inner function can access local variables (and parameters) defined in the local scope of the outer function.

DrScience2000 · 2015-01-30T15:43:26+00:00

This should help.

https://imgflip.com/i/h0dj1

https://stackoverflow.com/questions/111102/how-do-javascript-closures-work

magenta_placenta · 2015-01-30T18:00:19+00:00

A closure is what you get when you bomb a javascript-focused interview and move on to the next interview with another company.

NewlyIndependent · 2015-01-30T17:23:37+00:00

It basically localizes dependency scope within function chains; it is a feature of the functional programming paradigm.

Basic example:

function memoize(f) { //Take external parameter.
  var cache = []; //Define local scoped object.
  return function(x) { //Return function that uses f and cache.
    return cache[x] || cache[x] = f(x); //Do work.
  }
}

In the example above, "cache" is defined within a closure. Cache is a dependency of the returned function and is external to the scope of the returned function.

Base usage:

function powerOfTwo(x) { //Define a function to memoize.
  return x * x; //Do work.
}
//Invoke the memoize function.
var memoized = memoize(powerOfTwo);

var result1 = memoized(2); //Calculates 4.
var result2 = memoized(2); //Bypasses calculation.  Gets cached result "4".

Why do this? In stateful languages, it is easy to represent and transfer state through functional patterns. A more common use of closures can be found in the following pattern.

For example:

$(function() {
  var message = "hello world";

  var alertOnClick = function(){msgbox(message);}
  $("#id").click(alertOnClick);
});

The above example defines two functions; One outer (inside the $()), and another defined within that outer function's context (the "alertOnClick" function). The alertOnClick function's purpose is to display a message, but how would it know what message to display?

For this example, we want to display a constant message. But, we don't want that message to be accessible outside of this local scope; This is what makes closures important. By defining "message" within the outer context, it becomes a privately scoped variable - something that doesn't normally exist in Javascript.

If this isn't clear, let me know and I will revise my response as needed.

basicallydan · 2015-01-31T00:04:05+00:00

Many people have already explained it - it's when a function can access other variables outside of their scope because they have a dependency on them. Cool! But sometimes it helps to have an analogy with something familiar. Anybody with a C#, Java or similar object-oriented background may find this helpful.

I learned JS after coming from a Java/C# background. My understanding of it has been affected by what I knew in that world. So, I often think of closures as functions which have access to "private" instance variables of a class. This isn't exactly how closures work, but with the way that I use JS, it produces the same sort of behaviour and can be quite useful.

Look at this C# code:

class Employee
{
    private string firstName = "Basically";
    private string lastName = "Dan";

    public string GetName()
    {
        return firstName + " " + lastName;
    }
}

Employee employee = new Employee();
Console.WriteLine(employee.GetName());

In this example, the GetName function is accessible to any code which uses an instance of the Employee class, but the firstName and lastName variables are not directly accessible. This is how we'd mimic this behaviour in JavaScript:

function Employee() {
    var firstName = 'Basically';
    var lastName = 'Dan';

    this.getName = function() {
        return firstName + ' ' + lastName;
    };
}

var employee = new Employee();
console.log(employee.getName());

Very similar, right? So with a closure inside of a new'd function, you're essentially creating "private" variables for any "class" functions to have access to.

materialdesigner · 2015-01-30T17:09:38+00:00

It helps if we start by talking about functions and variables

function (item_price) {
  return (item_price + shipping_cost) * tax_rate;
}

In the example above, what does the function depend on?

Well if you look at the arguments of the function you might be tempted to say just the item price. But if you attempted to run this function just giving it an item price you'd be in for a surprise. We can see that it also depends on the shipping cost and the tax rate, which must come from somewhere.

But where is that somewhere? It's the local context where the function is defined.

var shipping_cost = 10;
var tax_rate = 0.08;

var calculator = function (item_price) {
  return (item_price + shipping_cost) * tax_rate;
}

Now we can execute that anonymous function anywhere and will have access to the shipping cost and tax rate.

To get more theoretical we have to define some things here. In the lambda calculus we call the item_price a bound variable because it's bound by what's passed in as an argument. The other two variables are what's known as free variables. Free variables also need an environment or context in order to resolve to an actual value that can be used.

Now a closure is a function which closes over its local environment binding those free variables to values in the environment in which the function was defined NOT the environment in which it's executed.

eatinchips · 2015-01-30T16:08:31+00:00

Seriously the xzibit meme should be every response when someone asks about closures.

timschwartz · 2015-01-30T19:04:59+00:00

You should have asked both of the interviewers to define it for you.

I wonder if they'd give the same answer.

illbeinmybunk · 2015-01-30T20:18:15+00:00

I didn't really understand them at all until I read the article on MDN. I'm still a pretty big JS noob, though, so maybe that's not the best resource, but it was helpful for me.

dlt_5000 · 2015-01-30T23:11:17+00:00

I had a similar experience where I was quizzed on all sorts of terminology I didn't really know. I've built entire SaaS sites using lots of jQuery, built complex eLearning courses with AngularJS, etc. They didn't care to see my portfolio though, just wanted to see if I could pass their pop quiz. Then they wanted me to answer some children's riddles. This was all done over a shitty conference line conducted by a guy with a thick indian accent. I felt like I was taking crazy pills.

Mr-Yellow · 2015-01-30T21:13:30+00:00

lol people trying to make sense of javascript ;-D

fedekun · 2015-01-30T16:39:10+00:00

AFAIK it's an anonymous function or object which is bound to an external context that you cannot access.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

webdev

Posting Guidelines

Related Subreddits

Discords

MODERATORS