Requirements
You're required to know the below in order to understand what I'm going to be explaining in this article:
- ES6 Arrow functions
- Closures
- Callbacks
Understand the above? Great, keep reading! If you don't I'd do some quick googling to learn about them or for a refresher.
Story and why I wrote this
While completing my daily codewars.com questions I came up on the question A chain adding function. It had code I never saw before.
add(1)(2)(3); // 6
add(1)(2)(3)(4); // 10
add(1)(2)(3)(4)(5); // 15
???
Like any good developer I did some headbanging trying to figure it out before I jumped into google to see what was going on.
Enter Currying.
And more learning about currying.
After researching currying I had a pretty solid understanding of it even with it's confusion of calling a function that returns a function that calls a function that... you get the point. (If not, check out the currying links above!)
Now lets get back to the codewars problem, yea it's cool that we know about currying but how do we solve a problem were...
The Problem
... a transformation of functions is created where we don't know the amount of arguments that are to be used?
Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).
Quote from - Javascript.info, Currying
The Solution and explanation ✅ (What you prob wanted to know)
So how do we solve the problem!?!?
Get it? The mdn article on .valueOf()
threw me for a loop the first read around to.
I'm going to explain in my own code how I used it in the codewars.com problem from above.
Here's the solution
function add(n){
let result = n;
const func = (n) => {
result += n;
return func;
}
func.valueOf = () => {
return result;
}
return func;
}
Let's take it step by step.
I declared a result variable that will hold my final result after currying is complete.
I declared a function
func
using es6 arrow functions that creates a closure where result is consistently changing whenfunc
is called. The return value isfunc
itself. Note - the functionadd()
does not end here! it keeps going. I hope you understand why, if not, discuss in the comments :)❗ This is what you're looking for to understand
.valueOf()
❗ - We add .valueOf to thefunc
function. and in that closure we returnresult
. What we are doing is overwriting the .valueOf method to return result once the callbacks have ended in the curry.We return the
func
function - which will continue to repeat until there are no arguments left to do callbacks.
Summary
In summary, .valueOf() when in relation to functions will return a primitive value once there are no callbacks left to do.
A quote that made me understand .valueOf
that's related to the codewars.com problem mentioned throughout the article is from user gelus.
So the key is to have a function that returns a function that has the valueOf method overwritten to return the current "value". ( phew )
Read the quote slowly, it's a bit to take in but it shows the use of valueOf in action.
Happy Coding!
Top comments (0)