DEV Community

Cover image for Understanding the .valueOf() method (Currying anyone?)
Edgar Carrillo
Edgar Carrillo

Posted on

Understanding the .valueOf() method (Currying anyone?)

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
Enter fullscreen mode Exit fullscreen mode

???

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!?!?

.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 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;
}
Enter fullscreen mode Exit fullscreen mode

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 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)