May 27, 2020

Closures and Function as Values

I was reading Eloquent JavaScript and came across this code in the section on Closures:

function multiplier(factor) {
  return (number) => number * factor;
}

let twice = multiplier(2); console.log(twice(5)); // → 10

I was confused about about the value of 10. Not the arithmetic, but how 5 got bound to number in the function?

I threw this into an index.html file:

<script>
  // Example function from book
  function multiplierArrow(factor) {
    return (number) => number * factor;
  }

// Same as above, but using Declaration Notation instead of Arrow function multiplierDeclaration(factor) { return function multiply(number) { return number * factor; }; } </script>

I opened up the file in Google Chrome and started playing around in the JavaScript console. Here are some things I noted (lines with < are the results returned by the Chrome console):

> multiplierArrow
< ƒ multiplierArrow(factor) {
    return number => number * factor;
  }
  • In this example, by typing in the function name, without parentheses, we receive back the function itself. So, in this case, this is like setting const x = 2, typing x, and getting the value 2. I’ve read so many times that, in JavaScript, we can treat “functions as values”. I’m slowly starting to understand that.
> multiplierArrow()
number => number * factor
  • Here, note the parentheses. Now we are invoking the function. multiplierArrow() is a function that takes the parameter number.
> multiplierArrow(3)
< number => number * factor
	undefined
  • This is similar to the example just above. However, in this case, we’ve passed the argument 3. So, the return value of this is: a function that takes the parameter number, with factor is bound to 3.
> multiplierArrow(3)(5)
< 15
  • Now I understand why the book’s example gave us 10. Here, we are calling multiplierArrow(3) (a function that takes one parameter with factor bound to 3) and passing the argument 5.
  • In the book’s example, twice was set to multiplier(2). So twice itself is a function that takes a parameter number.

I’m still new to JavaScript and I think the arrow function syntax was throwing me off a bit. That’s why I made the same function shown in the book through a function declaration. I went through the same examples as I did with the arrow function:

> multiplierDeclaration
< ƒ multiplierDeclaration(factor) {
    return function multiply(number) {
      return number * factor;
    }
  }
> multiplierDeclaration()
< ƒ multiply(number) {
      return number * factor;
    }
> multiplierDeclaration()
< ƒ multiply(number) {
      return number * factor;
    }
> multiplierDeclaration(2)
< ƒ multiply(number) {
      return number * factor;
    }
> multiplierDeclaration(2)(8)
< 16

As I continue my journey of trying to become a web developer, I’m seeing that, as with many things, “attention to detail” is important. Going through these examples gave me a better understanding of closures and values relating to functions. Particularly, it was reminder to ask myself, “what value am I expecting here” and to pay attention to the differences between values of a function, function call, and function return value.

Built with 11ty and Eleventailstarter package.