Understanding the .valueOf() method (Currying anyone?)
Tags: javascript, webdev, programming
Published: 2021-12-28 18:34:15


# 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](https://www.codewars.com/kata/539a0e4d85e3425cb0000a88/javascript). 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](https://javascript.info/currying-partials).
And more learning about [currying](https://www.youtube.com/watch?v=iZLP4qOwY8I&ab_channel=FunFunFunction).

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](https://javascript.info/currying-partials)


## The Solution and explanation ✅ (What you prob wanted to know)
So how do we solve the problem!?!?

[`.valueOf()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf)

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](https://www.codewars.com/kata/539a0e4d85e3425cb0000a88/javascript) from above.

Here's the solution
``` javascript
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.

1. I declared a result variable that will hold my final result after currying is complete.

2. I declared a function `func` using es6 arrow functions that creates a closure where result is consistently changing when `func` is called. The return value is `func` itself. Note - the function `add()` does not end here! it keeps going. I hope you understand why, if not, discuss in the comments :)

3. **❗ This is what you're looking for to understand `.valueOf()` ❗** - We add .valueOf to the `func` function. and in that closure we return `result`. What we are doing is overwriting the .valueOf method to return result once the callbacks have ended in the curry.

4. 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](https://www.codewars.com/kata/539a0e4d85e3425cb0000a88/javascript) mentioned throughout the article is from user [gelus](https://www.codewars.com/users/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!