I'm learning javascript by reading "Eloquent Javascript" and am confused by the "Closures" section in chapter 3 (Functions).

In previous sections I learned about arrow functions, and how they can be used as anonymous functions. My initial thoughts were that this is an anonymous function example and I am simply not familiar yet.

In particular, I am confused on what "() => local" does to/for return.

function wrapValue(n) {
  let local = n;
  return () => local;
}

let wrap1 = wrapValue(1);
let wrap2 = wrapValue(2);
console.log(wrap1());
// → 1
console.log(wrap2());
// → 2

Here is a link to the chapter: Eloquent Javascript - Ch. 3 "Functions"

Thanks in advance!

I'm learning javascript by reading "Eloquent Javascript" and am confused by the "Closures" section in chapter 3 (Functions).

In previous sections I learned about arrow functions, and how they can be used as anonymous functions. My initial thoughts were that this is an anonymous function example and I am simply not familiar yet.

In particular, I am confused on what "() => local" does to/for return.

function wrapValue(n) {
  let local = n;
  return () => local;
}

let wrap1 = wrapValue(1);
let wrap2 = wrapValue(2);
console.log(wrap1());
// → 1
console.log(wrap2());
// → 2

Here is a link to the chapter: Eloquent Javascript - Ch. 3 "Functions"

Thanks in advance!

• javascript
• return
• closures

Share Improve this question Follow asked Dec 19, 2018 at 23:56 TuckerTucker 36711 gold badge44 silver badges1212 bronze badges 9

• 1 It's just a function that returns the variable local when called. The point of the closure is that the variable local is set in the outer function, but continues to be within scope of the returned function even after wrapValue has returned. – Mark Commented Dec 19, 2018 at 23:59
• Seems like a convoluted way of doing const wrap1 = 1;. – RobG Commented Dec 20, 2018 at 0:01
• 1 @RobG - not convoluted, it's "eloquent" :D – Jaromanda X Commented Dec 20, 2018 at 0:03
• @MarkMeyer Oh ok, I see. So this is quit simply returning whatever it was given by assigning n to local, then returning local. Convoluted indeed! haha So why wouldn't I just use "return local"? – Tucker Commented Dec 20, 2018 at 0:07
• @Tucker You could, but it wouldn't demonstrate how the variables are still accessible after the wrap function has returned. – Feathercrown Commented Dec 20, 2018 at 0:13

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 4

In javascript function create scope. For example:

function scoped(){
  let local = 10;
  console.log(local) // this works local is within scope
}

scoped() // logs:

console.log(local) // error -- local doesn't exist out here.

Outside of scoped local doesn't exist.

A function inside a function has access to the entire scope. So this works:

function scoped() {
  let local = 10;
  function f() {
    console.log(local) // this works local is within scope
  }
  f()
}

scoped()

But what happens if you return that function that references the scope of the function? It turns out that the inner function carries the whole scope with it. This is a closure:

function scoped(){
  let local = 10;
  function f(){
    console.log(local) // this works local is within scope
  }
  return f
}

f = scoped()
f() // can still see local

// but nobody else out here can:
console.log(local) // still an error

This allows you to do some very slick things — an import one is that you can keep certain variables private, but still manipulate them with the closure.

For example here's a counter that doesn't require a variable in global scope:

function counter(){
  let count = 0
  return () => count++
}

let c = counter()

console.log(c())  // it can count but there's not count variable in scape
console.log(c())
console.log(c())

Doing this with a global count variable is messy and risks some other part of the code clashing with the global variable. Above, nothing other than the c function can access the counter. In fact you can make several independent ones:

function counter(){
  let count = 0
  return () => count++
}

let c = counter()
let d = counter()

console.log("c:", c())  // it can count but there's not count variable in scape
console.log("c:", c())
console.log("d:", d())  // d has it's own closure
console.log("d:", d())
console.log("c:", c())

There's a lot you can do with closures and they're important in Javascript. It's worth taking the time to really understand them.

function wrapValue(n) {
   let local = n;
   return () => local;
}

Is the same as writing (without the benefits of "this")

function wrapValue(n) {
   let local = n;
   return function() {
        return local;
   }
}

It's a function that returns another function that uses the passed parameters. This is called a Curry function

console.log(typeof wrapValue(2)); // prints "function"
console.log(wrapValue(2)()); // prints "2"

Here's a better example

function multiple(a) {
    return (b) => a*b;
}

console.log([1,2,3,4].map(multiple(2)); // prints "[2,4,6,8]"

You can use curried functions very easily with Arrays